Shopify Integration

Learn how to install and configure OpenSpeechAI chat widget on your Shopify store. Complete guide for e-commerce integration.

What You'll Need

Before starting the installation, make sure you have:

Active Shopify store (any plan)
OpenSpeechAI account with a configured agent
Access to edit your Shopify theme code

Before you can install the widget on Shopify, you need to get your unique widget script from the OpenSpeechAI dashboard. This script connects the chat interface on your store to your configured AI agent.

Make sure you've already created an agent and connected a knowledge base (if needed). The widget won't work without an active agent.

To get your widget script:

Log in to your OpenSpeechAI dashboard
Navigate to Agents and select your agent
Click the Widget tab at the top
You'll see your unique installation code
Click Copy to copy it to your clipboard

The code looks like this:

<script
  src="https://widget.openspeechai.com/widgets/chat-widget.js?widgetId=abc-123"
  defer
  crossorigin="anonymous"
></script>

Keep this code ready - you'll paste it into your Shopify theme in the next step.

Access Shopify Theme Editor

Now that you have your widget script copied, you need to add it to your Shopify theme. To do this, you'll need to access the theme code editor in your Shopify admin.

Log in to your Shopify admin panel
In the left sidebar, click Online Store
Click Themes
Find your currently active theme (it will have a "Current theme" badge)
Click the Actions dropdown button (three dots or "..." button)
Select Edit code from the dropdown menu

Shopify edit code navigation

This will open the theme code editor in a new tab where you can edit your store's template files.

In the next step, you'll add the widget script to the main theme file.

Add the Script to Your Theme

In the theme code editor, you'll see a file browser on the left side. You need to find and edit the main theme file called theme.liquid.

In the file browser on the left, click the Layout folder to expand it
Click on theme.liquid to open the file
Scroll all the way to the bottom of the file
Find the closing </body> tag (usually near the end)
Paste your widget script on a new line RIGHT BEFORE </body>
Click the Save button in the top right

Important: The script must go before the closing </body> tag, not in the <head> section. This ensures your page loads quickly and the widget works correctly.

Your theme.liquid file should look like this at the bottom:

    {{ content_for_layout }}

    {% section 'footer' %}

    <!-- Your OpenSpeechAI widget script -->
    <script
      src="https://widget.openspeechai.com/widgets/chat-widget.js?widgetId=abc-123"
      defer
      crossorigin="anonymous"
    ></script>

  </body>
</html>

Once you click Save, the widget will be live on all pages of your store.

Test Your Installation

Now that you've added the widget script and saved your changes, it's time to verify everything is working correctly.

Open your Shopify store in a new browser tab (visit your store's URL, not the admin)
You should see the chat widget appear in the bottom-right corner of your page
Click on the widget to open the chat interface
Send a test message to verify Atlas responds correctly
Check that the widget appears on different pages (homepage, product pages, collections)

If the widget doesn't appear immediately, try clearing your browser cache and refreshing the page:

Windows/Linux: Press Ctrl + Shift + R
Mac: Press Cmd + Shift + R

The widget is now live on all pages of your store and ready to help your customers 24/7.

Troubleshooting

If you encounter any issues with your widget installation, here are common problems and solutions:

Widget not appearing?

Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R) and refresh
Verify the script is placed before the </body> tag in theme.liquid
Check that you copied the complete script from your dashboard
Verify your widget ID in the script matches your dashboard

Widget appears but doesn't respond?

Check that your agent is published and active
Open browser console (F12) and check for error messages
Make sure your knowledge base is connected (if using one)

Need help?

If you're still experiencing issues, email us at shri@openspeechai.com with:

Your Shopify store URL
Screenshot of the issue
Any error messages from browser console

We're here to help you get up and running!

What You'll Need

Get Your Widget Script

Access Shopify Theme Editor

Add the Script to Your Theme

Test Your Installation

Troubleshooting

On this page