Headless SDK Apps

Headless SDK Apps are small, ready-made components that you can add to your website through the Headless Chat SDK configuration. List one or more apps in the components array on window.DG_SDK_CONFIG. The SDK loads the right app for each entry, so there is nothing to install or keep up to date. Conversational components each open their own session.

Apps render inside a shadow DOM, so your page styles won't break them and their styles won't leak into your page. They inherit your site's font and colours so they look at home on your page.

Available apps

Button

Displays a set of question buttons anywhere on your page, such as on a product page or in a sidebar. When a customer clicks a button, the Genius Chat Widget opens with the button's text sent as their first message. The buttons fit the width of the space you put them in.

Configure the Button app →

PAI Chat

A widget solely for conversations powered by Purchase AI. Shoppers ask a question on the product page and get a reply in the same panel, with product recommendations in carousels. Suggested questions and a text box can both be displayed.

Configure the PAI Chat widget →

PAI Prompts

A panel of suggested questions with an Ask anything text box underneath, for your product pages. When a customer picks a question or types their own, the Genius Chat Widget opens with it as their first message, so Purchase AI can pick up the conversation there.

Configure the PAI Prompts widget →

Help Me Choose

Adds a Help me choose tab to the right-hand edge of your product pages. When a customer clicks it, the Genius Chat Widget opens with a message asking for help with the product they're viewing, so Purchase AI can pick up the conversation. The tab shimmers when it appears so customers notice it.

Configure the Help Me Choose widget →

Track Order Form

Displays a form where customers enter their email address and order number, with a Track Order button. When they submit it, the widget looks up the order and shows its delivery progress as a series of steps. The form fields can be changed to match the details your flow uses to find orders.

Configure the Track Order Form widget →

Using more than one app

Add an entry to components for each app. Every entry needs its own widgetId and env, so apps on the same page can use different widgets. An app that can't load, for example because its widget ID is wrong, is skipped and logged to the browser console, and the other apps still load.

<div id="purchase-ai"></div>
<div id="track-order"></div>

<script>
  window.DG_SDK_CONFIG = {
    locale: 'fr-FR',
    components: [
      {
        widgetId: 'your-purchase-ai-widget-id',
        env: 'eu',
        targetDOMNode: '#purchase-ai',
        type: 'paiChat',
      },
      {
        widgetId: 'your-track-order-widget-id',
        env: 'eu',
        targetDOMNode: '#track-order',
        type: 'trackOrder',
        config: {
          orderNumber: 'HB-614357',
          email: '[email protected]',
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

Options set at the top level of window.DG_SDK_CONFIG, such as locale, apply to every app on the page, and take priority over the settings configured for each widget. Each conversational app keeps its own chat session, so the apps don't share a conversation.

locale is set once for the whole page. To change an app's text, set lang in that app's config, not at the top level. It takes priority over the widget's settings and only applies to that app, so two apps on the same page can use different wording. Only the properties you specify are overridden.

{
  widgetId: 'your-purchase-ai-widget-id',
  env: 'eu',
  targetDOMNode: '#purchase-ai',
  type: 'paiChat',
  config: {
    lang: {
      askAQuestionPlaceholder: 'Ask about this jacket...',
    },
  },
},