PAI Chat Widget

The PAI Chat widget embeds a Purchase AI conversation within your product pages. Shoppers can ask a question or select a suggested prompt, and receive tailored guidance and product recommendations in the same panel, without opening a chat window.

To start the conversation in the Genius Chat Widget instead, use the PAI Prompts widget.

Prerequisites

• Your DigitalGenius widget ID.
• Your region: eu or us.
• Access to edit the HTML of your product pages.

Installation

Add the following code to your product page, at the position where the widget should appear. Replace your-widget-id with your widget ID, and update env to match your region if required.

<div id="pai-chat"></div>

<script>
  window.DG_SDK_CONFIG = {
    components: [
      {
        widgetId: 'your-widget-id',
        env: 'eu',
        targetDOMNode: '#pai-chat',
        type: 'paiChat',
        config: {
          productName: 'Trail Runner 2',
          buttonLabels: [
            'What would you recommend?',
            'Something for a gift',
            'Show me similar products',
          ],
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

The widget is rendered inside the <div id="pai-chat"></div> container.

Configuration

The following properties are set on each entry in components.

Providing the product

retrievalMethod controls where the product name comes from.

Example: value in the configuration

With retrievalMethod set to 'config' (the default), productName is the product name itself. Use this when your page template can output the product name into the script:

<div id="pai-chat"></div>

<script>
  window.DG_SDK_CONFIG = {
    components: [
      {
        widgetId: 'your-widget-id',
        env: 'eu',
        targetDOMNode: '#pai-chat',
        type: 'paiChat',
        config: {
          retrievalMethod: 'config',
          // replace with the product name output by your page template
          productName: 'Trail Runner 2',
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

Example: value read from the page

With retrievalMethod set to 'selector', productName is a CSS selector for an element already on the page, and the widget reads the product name from it. Use this when the product name is displayed on the page but can't easily be added to the script:

<h1 class="product-title">Trail Runner 2</h1>

<div id="pai-chat"></div>

<script>
  window.DG_SDK_CONFIG = {
    components: [
      {
        widgetId: 'your-widget-id',
        env: 'eu',
        targetDOMNode: '#pai-chat',
        type: 'paiChat',
        config: {
          retrievalMethod: 'selector',
          productName: '.product-title',
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

For form fields (input, select and textarea) the field's value is used; for other elements, their text content is used, with surrounding spaces removed.

Leaving out hidden text

Some product name elements contain extra text for screen readers that isn't shown on screen, for example:

<h1 class="product-name">
  <span class="accessibility-hidden">details about product:</span>
  Pure Linen Polo - Olive
</h1>

The widget reads all the text in the element, so set productNameExclude to a CSS selector for the elements inside it to leave out:

config: {
  retrievalMethod: 'selector',
  productName: 'h1.product-name',
  productNameExclude: '.accessibility-hidden',
},

The product name read is then Pure Linen Polo - Olive. Line breaks and repeated spaces in the element's text are always collapsed into single spaces.

Shopper experience

On load, the widget displays:

1. The heading "Ask about this product".
2. A text input for free-form questions.
3. Any suggested prompts you have configured.

Once a shopper submits a question, the widget displays the conversation. Responses may include a product carousel, from which shoppers can browse and select one or more products.

Localisation

The widget is displayed in British English by default. To change the language, set locale in your configuration:

window.DG_SDK_CONFIG = {
  locale: 'fr-FR',
  components: [
    {
      widgetId: 'your-widget-id',
      env: 'eu',
      targetDOMNode: '#pai-chat',
      type: 'paiChat',
    },
  ],
};

The following locales are supported: cs-CZ, da-DK, de-DE, en-GB, en-LU, en-US, es-ES, et-EE, fi-FI, fr-FR, it-IT, ja-JP, ko-KR, lt-LT, lv-LV, nl-NL, no-NO, pl-PL, pt-PT, ro-RO, sk-SK, sv-SE, zh-CN and zh-TW. Unsupported locales fall back to British English.

Customising text

The text listed below can be customised using a lang object in the app's config. Only the properties you specify are overridden; all other text uses the default wording for the selected locale.

window.DG_SDK_CONFIG = {
  components: [
    {
      widgetId: 'your-widget-id',
      env: 'eu',
      targetDOMNode: '#pai-chat',
      type: 'paiChat',
      config: {
        lang: {
          title: 'Find the right product',
          askAQuestionPlaceholder: 'Tell us what you need',
        },
      },
    },
  ],
};

Visible text

For example, to adjust the product carousel buttons to suit your brand's tone of voice:

config: {
  lang: {
    carouselSelectionButtonText: 'Choose this',
    carouselMultiSelectButtonText: 'Show my picks',
  },
},

Accessibility text

The following text is not displayed visually but is announced by screen readers. If you provide your own translations, we recommend including these properties to ensure an accessible experience.

Styling

By default, the widget inherits your page's font and text colour, and uses a transparent background, so it integrates with your existing design. Sizes are set in em, so the widget scales with your font size.

To change its appearance, use config.style. Only the properties you specify are overridden.

config: {
  style: {
    accentColor: '#4a3428',
    maxWidth: '28rem',
    maxHeight: '24em',
    radius: '16px',
    panelBackground: '#ffffff',
    userBackground: '#4a3428',
    userColor: '#f4efe6',
    assistantBackground: '#f4efe6',
    assistantColor: '#4a3428',
  },
},

Troubleshooting

If the widget does not appear, check that:

• The <div id="pai-chat"></div> container is on the page and placed before the scripts.
• targetDOMNode matches the container's id, including the # prefix.
• type is set to 'paiChat'.
• widgetId is correct and env matches your region.

When retrievalMethod is 'selector', an error is logged if the selector doesn't match an element on the page.