PAI Widget

The PAI widget embeds an inline widget within your product pages. Shoppers can ask a question or select a suggested prompt, and receive tailored guidance and product recommendations.

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-widget"></div>

<script>
  window.DG_SDK_CONFIG = {
    widgetId: 'your-widget-id',
    env: 'eu',
    widget: {
      targetDOMNode: '#pai-widget',
      type: 'PAI',
      config: {
        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-widget"></div> container.

Configuration

The following properties are set within the widget object.

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 = {
  widgetId: 'your-widget-id',
  env: 'eu',
  locale: 'fr-FR',
  widget: {
    targetDOMNode: '#pai-widget',
    type: 'PAI',
  },
};

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 your configuration. Only the properties you specify are overridden; all other text uses the default wording for the selected locale.

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

Visible text

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

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.

To customise its appearance, set any of the following CSS custom properties on the container. Only the properties you specify are overridden.

#pai-widget {
  --dg-max-width: 28rem;
  --dg-max-height: 24em;
  --dg-radius: 16px;
  --dg-panel-bg: #ffffff;
  --dg-user-bg: #4a3428;
  --dg-user-color: #f4efe6;
  --dg-assistant-bg: #f4efe6;
  --dg-assistant-color: #4a3428;
}

Troubleshooting

If the widget does not appear, check that:

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