Installing Shipped AI Chat Widget to Shopify theme


Shipped
Last Updated: 7 months ago

If you've decided to use the Shipped AI native chat widget on your Shopify site, use the below instructions to insert the chat widget script.

We recommend installing the widget to a test theme first so you can do internal QAs during the configuration phase. When ready, then publish the changes to the live theme.

Instructions

  1. First check that the "Web Widget" channel is enabled in Shipped Merchant Admin > Channels. If not, click on "Enable".

  2. From Shopify admin, go to "Themes".

  3. On the desired theme, access "Edit theme code".

  4. Locate the "theme.liquid" file.

  5. Right before the closing </head> tag, add the below script.

    <script>
    window.addEventListener('shipped:chat-script-loaded', () => {
      const shippedChatWidget = new ShippedAI.ChatWidget({
        integrationId: 'your_integration_id',
      })
    })
    </script>
    
    <script defer type="module" src="https://js.shippedsuite.com/api/chat-widget.js"></script>
  6. From your Shipped Merchant Admin > Channels, copy your integration ID under the "Web Widget" channel.

  7. Replace your_intergation_id in the added script with the copied integration ID.

  8. Click save.

  9. Preview the theme to see the chat widget.

If you have any questions or need help with the installation, contact us at support@invisiblecommerce.com.


Was this article helpful?