Embedded Prompts Widget

The Embedded 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 your flow can continue the conversation there.

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

Prerequisites

The Embedded 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 sent in the conversation starter as data.productName, whether the shopper clicked a suggested question or typed their own. The text on the page, and the message in the chat, stay as the question. For example, with the product name Trail Runner 2, clicking What's it made from? sends What's it made from?.

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 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.

What your flow receives

The conversation opens with a conversation_starter chat event with source set to shopping_agent_prompts. action is question for a suggested question or free_text for a typed one. When a product name is set, it's sent in data.productName, otherwise data is empty. For example, when the shopper clicks What's it made from? with the product name Trail Runner 2:

{
  "from": "customer",
  "type": "chat_event",
  "payload": {
    "name": "conversation_starter",
    "source": "shopping_agent_prompts",
    "action": "question",
    "text": "What's it made from?",
    "data": { "productName": "Trail Runner 2" }
  }
}

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 Embedded 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 Embedded 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 Embedded 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 Embedded 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.