Chat Widget - JavaScript SDK

In order to integrate the Shipped AI Chat Widget into your website, please follow these instructions:

Add the JS SDK right before the closing </head> tag

<script defer type="module" src="https://js.shippedsuite.com/api/chat-widget.js"></script>

📘
Staging JS SDK
For staging environment, use https://js-staging.shippedsuite.com/api/chat-widget.js

Add a new <script></script> and instantiate the JS SDK:

<script>
window.addEventListener('shipped:chat-script-loaded', () => {
  const shippedChatWidget = new ShippedAI.ChatWidget({
    integrationId: 'your_integration_id',
    jwt: async (callback) => {
      const jwt = await getJwtFromServer()
      callback(jwt)
    },
  })
})
</script>

You can authenticate the current user by creating getJwtFromServer() function which should return a promise that resolves with the JWT token.

To open or close the chat window programmatically use the following methods:

shippedChatWidget.toggle()
shippedChatWidget.open()
shippedChatWidget.close()

Similarly, to hide or show the chat button, use:

shippedChatWidget.hide()
shippedChatWidget.show()

To destroy the chat widget instance:

shippedChatWidget.destroy()

You can keep the chat widget hidden on certain pages using hiddenPaths config option:

window.addEventListener('shipped:chat-script-loaded', () => {
  const shippedChatWidget = new ShippedAI.ChatWidget({
    integrationId: 'your_integration_id',
    
    // Specify paths where the chat widget should be hidden
    hiddenPaths: [
      '/contact/', // Exact path match
      '*about*', // Wildcard pattern - hides on any path containing 'about'
      '/faq*',  // Wildcard pattern - hides on any path starting with /faq
      new RegExp('^/help/.*$'), // RegExp object - hides on any path starting with /help/
    ]
  })
})

Add custom CSS to the chat widget

window.addEventListener('shipped:chat-script-loaded', () => {
  const shippedChatWidget = new ShippedAI.ChatWidget({
    integrationId: 'your_integration_id',
    
    customCSS: ".chat-widget { bottom: 50px !important; } .chat-window { height: calc(100vh - 10em); }"
  })
})

If necessary, enable cookie storage instead of local storage:

By default, the chat widget uses local storage to keep user state.
However, if you use the chat widget on different subdomains, you'll need to enable cookie storage:

window.addEventListener('shipped:chat-script-loaded', () => {
  const shippedChatWidget = new ShippedAI.ChatWidget({
    integrationId: 'your_integration_id',
    
    useCookieStorage: true,
    cookieDomain: 'your-main-domain.com',
  })
})

cookieDomain must be set when useCookieStorage is true

Shopify Headless authentication:

// an example function that reads the user token from a cookie
function getCookieToken(name) {
  var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
  if (!match) return null;

  try {
    var decodedValue = decodeURIComponent(match[2]);
    var parsedValue = JSON.parse(decodedValue);
    return parsedValue.token ? parsedValue.token : null;
  } catch (e) {
    return null;
  }
}

window.addEventListener("shipped:chat-script-loaded", () => {
  new ShippedAI.ChatWidget({
    integrationId: "your_integration_id",
    
    // perform customer JWT authentication
    jwt: async () => {
      const customerAccessToken = getCookieToken("user-profile");
      if (!customerAccessToken) return null;

      return await ShippedAI.getShopifyHeadlessJWT(
        customerAccessToken,
        "your_storefron_token"
      );
    },
  });
});

📘Staging JS SDK

📘
Staging JS SDK