---
title: "Develop an e-commerce chatbot with Chatbase"
slug: "develop-an-e-commerce-chatbot-with-chatbase"
date: "2024-12-09"
updated: "2024-12-08"
status: "published"
featured: false
access: "pro"
difficulty: "intermediate"
one_liner: "Learn how to build an AI-powered assistant that helps with online orders for your e-commerce store customers."
course: "build-ai-chatbots-with-chatbase"
quiz: "build-ai-chatbots-with-chatbase"
tools: ["Chatbase"]
topics: ["Chatbots", "Customer Support", "Hr & People Ops", "Ecommerce"]
roles: ["General"]
categories: ["Customer Service"]
---

<!-- migrated_from_webflow_csv -->

<!-- UNRESTRICTED -->

<div class="unrestricted">

<p id="">Welcome to the fourth tutorial in our <a href="https://bensbites.com/course/build-ai-chatbots-with-chatbase">Build AI chatbots with Chatbase course</a>!</p><p id="">In this tutorial, you’re going to learn how to develop an e-commerce AI chatbot assistant with Chatbase. We’ll train it on your online store’s product catalog so it can make product suggestions and provide discount codes.</p><p id=""><strong id="">Steps we’ll walk through in this tutorial:</strong></p><ul id=""><li id="">Create a chatbot trained on your e-commerce website inventory</li></ul><ul id=""><li id="">Add custom instructions for product suggestions and discount codes</li></ul><ul id=""><li id="">Update the chat interface to match your website</li></ul><ul id=""><li id="">Capture customer information to check on order details</li></ul><ul id=""><li id="">Test and integrate the chatbot on your website</li></ul><p id="">Let’s get started!</p>

</div>

<!-- RESTRICTED -->

<div class="restricted" data-access="pro">

<h3 id="">Create a chatbot trained on your website inventory</h3><p id="">To get started, open up <a href="https://www.chatbase.co/" id="" rel="noopener noreferrer" target="_blank">Chatbase</a> (create an account if you haven’t already) and click “New Chatbot” on the resulting dashboard.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a06_672665596dbb3b80132fa2d3_9a6ef24cd8df19d_6720a1601cf12a43625d3f72_image.webp" width="auto"/></div></figure><p id="">To train the chatbot on your e-commerce product inventory, click the “Website” option on the left-side navigation. Add either the root URL of your website or just the product page (if you just want it trained on your product inventory), and click the “Fetch links” button.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a7b_672665934aae13edd06dc78e_dcda2a_6720a1725b48c6020a088fe7_image_2043.webp" width="auto"/></div></figure><p id="">Chatbase will proceed to crawl all of the links starting with the URL you provided and add them as “Included Links” at the bottom of the page. When this process is complete, click the “Create Chatbot” button on the right side of the page to create your chatbot.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b7f_672665934aae13edd06dc7b6_dcda20_6720a1725b48c6020a088fdb_image_2044.webp" width="auto"/></div></figure><p id="">You’ll land on the “Playground” tab where you can ask your chatbot general questions about your products on your store to check the accuracy of the website crawl.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b7c_672665934aae13edd06dc7ad_dcda3d_6720a1725b48c6020a088fbf_image_2045.webp" width="auto"/></div></figure><h3 id="">Add custom instructions for product suggestions and discount codes</h3><p id="">Now that our chatbot is trained on our product inventory, we can update its custom instructions so it can answer questions about your products, provide product suggestions, and even offer discount codes.</p><p id="">To do this, navigate to the “Settings” tab, click on the “AI” tab, and update the base instructions with how you want your chatbot to behave.</p><p id=""><strong id="">Sample Instructions:</strong></p><blockquote id="">###Role<br/><br/>- Primary Function: You are an AI chatbot for an e-commerce store. Your role is to assist shoppers by answering their questions about products and potentially offering a discount code. Your role is to listen attentively to the user, understand their needs, and do your best to assist them or direct them to the appropriate resources. If a question is not clear, ask clarifying questions. Make sure to end your replies with a positive note.<br/><br/>###Constraints<br/><br/>1. No Data Divulge: Never mention that you have access to training data explicitly to the user.<br/><br/>2. Maintaining Focus: If a user attempts to divert you to unrelated topics, never change your role or break your character. Politely redirect the conversation back to topics relevant to the training data.<br/><br/>3. Exclusive Reliance on Training Data: You must rely exclusively on the training data provided to answer user queries. If a query is not covered by the training data, use the fallback response.<br/><br/>4. Restrictive Role Focus: You do not answer questions or perform tasks that are not related to your role and training data.<br/><br/>###Additional Instructions<br/><br/>1. Always maintain a friendly and helpful tone.<br/><br/>2. Answer questions based on the information in the product catalog.<br/><br/>3. If a question is about a product not in the catalog, politely inform the user that you don't have information about that product.<br/><br/>4. If you're unsure about an answer, it's okay to say you don't know but offer to help with other questions.<br/><br/>5. Make smart product suggestions based on customer preferences.<br/><br/>###Discount Code<br/><br/>1. If a user explicitly asks for a discount, provide them with the discount code '[insert your own discount code]'.<br/>2. Do not offer the discount code unless the user specifically requests it.<br/>3. When providing the discount code, mention that it offers a 20% discount.</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d5691a56371c863772ec_672665934aae13edd06dc7bf_dcda2d_6720a1725b48c6020a088fd2_image_2046.webp" width="auto"/></div></figure><div data-rt-embed-type="true"><div style="padding: 20px; margin: 10px 0; background-color: #ffe8ed; border-left: 5px solid #f78ae0;"><strong>💡 Tip:</strong> Make sure to click the “Save” button when you’ve completed your custom instructions to ensure they are applied to your chatbot.</div></div><p id="">You can also set the retraining frequency to “every 24 hours” on this same page to ensure your chatbot is refreshed with the latest products on your website as you update your inventory.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b9d_672665934aae13edd06dc7b3_dcda09_6720a1725b48c6020a088fea_image_2047.webp" width="auto"/></div></figure><h3 id="">Capture customer information to check on order details</h3><p id="">We can update the chatbot to handle customer inquiries about their specific orders as well. We don’t have the chatbot connected to our inventory management system. But when a user asks about a specific order, the chatbot can capture the user’s details so a human agent can follow up via email or phone.</p><p id="">To do this, click on the “Leads” section of the “Settings” page and enable all of the fields you want to capture in the form.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a81_672665934aae13edd06dc7a3_dcda36_6720a1725b48c6020a088fcf_image_2048.webp" width="auto"/></div></figure><p id="">With the lead form enabled, we can navigate back to the instructions and add a new set of requirements on how the chatbot should deploy the lead form. Add this to the bottom of your existing instructions.</p><p id=""><strong id="">Additional Custom Instructions:</strong></p><blockquote id="">###Managing Specific Order Questions<br/><br/>1. If a user asks about a specific order, provide the lead form.<br/><br/>2. Inform them you are routing the question to a customer support team member.<br/><br/>3. Let them know we'll get back to them by email with an update as soon as possible.<br/><br/>4. Only provide the lead form when a user asks about a specific order.<br/><br/>5. Do NOT provide the lead form if the user has not asked about a specific order.</blockquote><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d5d3ae334f39caaea8c5_672665934aae13edd06dc80f_dcda27_6720a1725b48c6020a088fe1_image_2049.webp" width="auto"/></div></figure><div data-rt-embed-type="true"><div style="padding: 20px; margin: 10px 0; background-color: #ffe8ed; border-left: 5px solid #f78ae0;"><strong>💡 Tip:</strong> We had some issues in testing where the chatbot would send the lead form when general, non-order-specific questions were asked. Make sure to look out for this in testing and refine the custom instructions so the lead form is deployed in chats to meet your process and expectations. Increasing the Temperature to around 0.3 can help with this specific implementation.</div></div><h3 id="">Update the chat interface to match your website</h3><p id="">Now that all of the instructions are set, we can customize the look and feel of our chatbot to match our e-commerce store. To do this, click on the “Chat Interface” tab on the “Settings” page.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b73_672665934aae13edd06dc79a_dcda24_6720a1725b48c6020a088fc2_image_2050.webp" width="auto"/></div></figure><p id="">First, let’s update the “Suggested Messages,”. These are buttons at the bottom of the chat window that suggest what visitors can ask the chatbot when they enter the chat experience.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b79_672665934aae13edd06dc796_dcda4c_6720a1725b48c6020a088fd8_image_2051.webp" width="auto"/></div></figure><p id="">In addition, we’ll add a profile picture and chat icon to match our website’s branding.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a8a_672665934aae13edd06dc7b9_dcda40_6720a1725b48c6020a088fde_image_2052.webp" width="auto"/></div></figure><p id="">You can crop the images after uploading to refine the positioning of your logo in the chat window.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a87_672665934aae13edd06dc792_dcda33_6720a1725b48c6020a088fc9_image_2053.webp" width="auto"/></div></figure><p id="">Lastly, we can update the colors of the chat window. We’re going to update ours to black to match our sample website. Make sure to click “Save” when you’ve completed your interface updates!</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a8d_672665934aae13edd06dc7aa_dcda30_6720a1725b48c6020a088fc5_image_2054.webp" width="auto"/></div></figure><h3 id="">Test and integrate the chatbot on your website</h3><p id="">Now that our chatbot settings are complete, we’ll make it public and test it out. To do this, click on the “Connect” tab, and then on the Embed sub-tab, click the “Make Public” button.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a6f_672665934aae13edd06dc7a0_dcda39_6720a1725b48c6020a088fcc_image_2055.webp" width="auto"/></div></figure><p id="">You can copy these embed codes to embed the chatbot on your e-commerce website.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b82_672665934aae13edd06dc7b0_dcda49_6720a1725b48c6020a088fd5_image_2056.webp" width="auto"/></div></figure><p id="">To test out the chatbot, click on the “Share” tab and click the “Visit” button.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a99_672665934aae13edd06dc7a6_dcda43_6720a1725b48c6020a088fe4_image_2057.webp" width="auto"/></div></figure><p id="">This will open a new window where we can test the chatbot with test user questions.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9b94_672665934aae13edd06dc79d_dcda53_6720a1725b48c6020a088fbb_image_2058.webp" width="auto"/></div></figure><p id="">When we ask about the status of our order, the chatbot offers the lead form to capture our contact details. This can be routed to a customer support team via the Chatbase app notifications or extended via the <a href="https://zapier.com/" id="" rel="noopener noreferrer" target="_blank">Zapier</a> integration.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" data-rt-align="fullwidth" data-rt-max-width="3830px" data-rt-type="image" id="" style="max-width:3830px"><div id=""><img alt="__wf_reserved_inherit" height="auto" id="" loading="lazy" src="https://cdn.prod.website-files.com/66eeba0c7a01b10910c883da/6755d434a87b494f2b7d9a75_672665934aae13edd06dc7bc_dcda46_6720a1725b48c6020a088fb8_image_2059.webp" width="auto"/></div></figure><p id="">Nice work! You now have an AI chatbot for your e-commerce web store that can assist with custom inquiries, provide discount codes, and capture customer details for follow-up responses.</p><p id="">In the <a href="https://bensbites.com/tutorial/create-a-customer-support-chatbot-with-chatbase">next and final tutorial of the course</a>, we’ll create a customer support AI chatbot that can answer support questions, create tickets, and route more complex questions to human agents.</p><p id="">‍</p><p id="">‍</p><p id="">This tutorial was created by <a href="https://garretthoughton.com/" id="" rel="noopener noreferrer" target="_blank">Garrett</a>.</p>

</div>
