PAI Prompts Widget

The PAI Prompts widget adds a panel to your product pages with a heading, a set of suggested questions and an Ask anything text box. When a shopper picks a question or types their own, the Genius Chat Widget opens with it as their first message, so Purchase AI can continue the conversation there.

To keep the whole conversation on the product page instead, use the PAI Chat widget.

Prerequisites

The PAI Prompts widget opens the Genius Chat Widget, so the chat widget must also be on the page. See Integrating Genius Chat Widget.

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

<script>
  window.DG_SDK_CONFIG = {
    components: [
      {
        widgetId: 'your-widget-id',
        env: 'eu',
        targetDOMNode: '#pai-prompts',
        type: 'paiPrompts',
        config: {
          productName: 'Trail Runner 2',
          buttonLabels: [
            'Tell me more',
            "What's it made from?",
            'How does it fit?',
            'Care instructions',
          ],
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

Configuration

The following properties are set on each entry in components.

If there are no buttonLabels and showChatInput is false, nothing is displayed and a warning is logged to the browser console. The style options are listed under Styling.

Product name

When productName is set, it's added to the end of every message sent to the chat, after a space, whether the shopper clicked a suggested question or typed their own. This tells Purchase AI which product the shopper is asking about. The text on your page doesn't change. For example, with the product name Trail Runner 2, clicking What's it made from? sends What's it made from? Trail Runner 2.

productName, retrievalMethod and productNameExclude work the same way as in the Button app. With retrievalMethod set to 'selector', the product name is read when the message is sent, so it can be rendered after the widget loads.

Behaviour

• Loading state: The buttons and the send button are disabled until the Genius Chat Widget has loaded. If the chat widget hasn't loaded after 30 seconds, they stay disabled and a warning is logged to the console. Shoppers can type in the text box while it loads.
• Sending a message: Opens the chat widget and sends the question, followed by the product name if one is set, as the shopper's first message. The text box is cleared after sending. If the chat is already open, sending has no effect.
• Layout: The buttons are as wide as their labels and wrap onto new lines, so they fit both wide areas and narrow ones such as a sidebar. Long labels wrap within their button.

Localisation

The widget is displayed in British English by default. To change the language, set locale in your configuration. The supported locales are the same as the PAI Chat widget.

Customising text

The text below can be customised using a lang object in the app's config. Only the properties you specify are overridden.

window.DG_SDK_CONFIG = {
  components: [
    {
      widgetId: 'your-widget-id',
      env: 'eu',
      targetDOMNode: '#pai-prompts',
      type: 'paiPrompts',
      config: {
        lang: {
          title: 'Ask our product expert',
          askAQuestionPlaceholder: 'Ask anything',
        },
      },
    },
  ],
};

lang only applies to this app, so a PAI Chat widget on the same page keeps its own title and text box text.

Styling

The widget renders inside a shadow DOM, so the styles on your page don't affect it directly. It's designed to sit alongside the other apps, with the same heading as the PAI Chat widget and buttons like the Button app.

By default it inherits your page's font and text colour:

• Panel: a light grey background (a light tint of the text colour) with a faint border in the text colour.
• Buttons: a transparent background with a 1px border in the text colour, and a sparkles icon to the left of each label.
• Text box: a white background with the same corner shape as the buttons, and a send arrow that's greyed out until the shopper has typed something. If your site has a dark background, set inputBackground to suit.

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. The panel options are the same as the PAI Chat widget and the button options are the same as the Button app, except for buttonRadius, because radius sets the panel's corners.

For example, white rounded buttons with a soft border, in your brand colour:

config: {
  buttonLabels: [
    'Tell me more',
    "What's it made from?",
    'How does it fit?',
    'Care instructions',
  ],
  style: {
    accentColor: '#6b52ea',
    border: '1px solid #d9d2fb',
    backgroundColor: '#ffffff',
    buttonRadius: '999px',
  },
},

Troubleshooting

If the widget does not appear, check that:

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

If the buttons stay disabled, check that the Genius Chat Widget is on the page and loads without errors.