Display the AI Agent on your storefront

Display the AI Agent on your storefront

Introduction

After creating and publishing your AI Agent, you can display it on your storefront to provide customers with instant, AI-powered assistance. This article explains how to enable the AI Agent widget on your Shopify store and verify that it is visible and ready to assist your customers.


Here are the steps to display the AI Agent in the front store:

Step 1: Go to Ai Agent >> Dashboard >> click on the menu icon and click on Integrate.



Step 2: Copy the Integration script.



Step 3: Go to Online store >> click on Edit theme



Step 4: In the Header section, click on Add section and click on Custom liquid.




Step 5: Paste the copied code and click on the Save button.




Now, the AI Agent will appear in the front store


Important Notes:

  1. Ensure your AI Agent is published and in Active status before integrating it into your storefront.
  2. Copy the complete integration script without making any modifications. Editing the script may prevent the AI Agent from loading correctly.
  3. Add the integration script to a Custom Liquid section in your Shopify theme header as described in this article.
  4. Click Save after adding the script to apply the changes to your storefront.
  5. If the AI Agent does not appear immediately, clear your browser cache or refresh the storefront after a few minutes.
  6. If you update your AI Agent's settings or knowledge sources, there is no need to reinstall the integration script. Simply republish the AI Agent to apply the latest changes.
  7. Ensure your theme does not block custom JavaScript or third-party scripts, as this may prevent the AI Agent widget from loading properly.
  8. If your store uses multiple themes, make sure you add the integration script to the published (live) theme or the theme where you want the AI Agent to appear.


    • Related Articles

    • Enable and Create an AI Agent

      Introduction AI Agents enable you to provide instant, AI-powered support to your customers by answering their questions based on your store's knowledge base. In this article, you'll learn how to enable the AI Agents module, create a new AI Agent, and ...

    • View AI Agent Details and Customer Token Usage

      Introduction The AI Agent Details page provides an overview of your AI Agent's configuration, activity, and token usage. You can review key information about the AI Agent, monitor the number of tokens consumed during customer conversations, and track ...

    • Mark an AI Agent as Inactive

      Introduction If you no longer want your AI Agent to assist customers, you can mark it as Inactive. This will disable the AI Agent and prevent it from responding to customer queries until it is reactivated. This article explains how to mark an AI ...

    • View AI Agent Conversations

      Introduction The AI Agent Conversations section allows you to review all customer interactions handled by your AI Agent. You can view conversation details, monitor the AI Agent's responses, and analyze customer queries to evaluate performance and ...

    • Enable/ Disable The Ai Box

      Introduction: Discover the flexibility of controlling your e-commerce platform's Ai Box module with AiTrillion. In this article, you can check out how to effortlessly enable or disable the Ai Box Module on your Shopify Store to tailor your website's ...