Add AI Chat to your E-commerce Store

Why AI Chat for E-commerce

AI Chat can significantly enhance the customer experience on your e-commerce site by providing instant support, product recommendations, and answering frequently asked questions.

Get an API key

Go to the yoursearchbox Dashboard
Select your project under Projects
Go to the Integrations tab
Click on Create integration
Select E-commerce
Provide a Name and Store URL for the integration
Click on Create
Click the Example < /> button to get your API key and view suggested settings

Add the Chat Widget to Your Store

The method to add the chat widget may vary depending on your e-commerce platform. Here's a general approach:

Open WordPress admin panel
Select the Plugins tab
Open the Add New Plugin section
Install the Head & Footer Code plugin

Initialize the widget

Next, under the Tools tab open Head & Footer Code option. Add the code below to the HEAD Code section:

<script
  id="yoursearchbox-script"
  src="https://unpkg.com/@yoursearchbox/uikit-js@0.3.7/dist/embed.js"
  type="module"
  defer
></script>
 
<script defer>
  const yoursearchboxScript = document.getElementById("yoursearchbox-script");
 
  // configure and initialize the widget
  const yoursearchboxWidget = () => {
    const yoursearchboxWidget = yoursearchbox().embed({
      componentType: "ChatButton",
      properties: {
        chatButtonType: "PILL",
        baseSettings: {
          apiKey: "yoursearchbox_API_KEY", // required
          integrationId: "yoursearchbox_INTEGRATION_ID", // required
          organizationId: "yoursearchbox_ORGANIZATION_ID", // required
          primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
          organizationDisplayName: "yoursearchbox",
          // ...optional settings,
        },
        modalSettings: {
          // optional settings
        },
        searchSettings: {
          // optional settings
        },
        aiChatSettings: {
          // optional settings
          botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
          quickQuestions: [
            "Example question 1?",
            "Example question 2?",
            "Example question 3?",
          ],
        },
      },
    });
  };
 
  yoursearchboxScript.addEventListener("load", () => {
    if (document.body) yoursearchboxWidget(); // initialize the widget
  });
</script>

Save Custom Code

Click on the "Save Changes" button.
Navigate to your web application to ensure the widget is installed correctly.

For a full list of customizations, please refer to the Chat Button documentation.

Search Bar Search Bar