Help Me Choose Widget

The Help Me Choose widget 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 about the product they're viewing, such as I'd like to talk about Trail Runner 2, so Purchase AI can pick up the conversation.

The tab shimmers once when it appears so customers notice it, and can be set to shimmer again on an interval.

Prerequisites

• Your DigitalGenius widget ID.
• Your region: eu or us.
• The Genius Chat Widget on the same page. The widget opens the chat to send its message. See Integrating Genius Chat Widget.
• A Purchase AI flow that responds to the message.
• Access to edit the HTML of the page the widget is displayed on.

Installation

Add the following code to your product page, after the Genius Chat Widget. Replace your-widget-id with your widget ID, update env to match your region if required, and replace the product name with the one output by your page template.

<script>
  window.DG_SDK_CONFIG = {
    widgetId: 'your-widget-id',
    env: 'eu',
    widget: {
      type: 'helpMeChoose',
      config: {
        productName: 'Trail Runner 2',
      },
    },
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

The tab is docked to the right-hand edge of the page, so it doesn't need a container. targetDOMNode isn't used.

Configuration

The following properties are set within the widget object.

Providing the product name

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:

<script>
  window.DG_SDK_CONFIG = {
    widgetId: 'your-widget-id',
    env: 'eu',
    widget: {
      type: 'helpMeChoose',
      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>

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

The product name is read when the customer clicks the tab, so elements rendered after the widget loads, or changed when a customer picks a different variant, are supported. 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.

Customising the message

The message sent to the chat is message, a space, then the product name. For example, with this configuration:

config: {
  productName: 'Trail Runner 2',
  message: 'Can you help me decide on the',
},

the customer's first message is Can you help me decide on the Trail Runner 2. Make sure your Purchase AI flow recognises the wording you choose.

Shimmer

The tab shimmers once, with a highlight that sweeps along it and the sparkles twinkling, when it first appears. To keep drawing customers' attention to it, set shimmerInterval so it shimmers again on a regular interval:

config: {
  productName: 'Trail Runner 2',
  // shimmer every 15 seconds
  shimmerInterval: 15000,
},

If a customer's device is set to reduce motion, the tab doesn't shimmer or slide in.

Behaviour

• Product name: if productName isn't set, the tab isn't shown and a warning is logged to the browser console.
• Loading: the tab is hidden until the Genius Chat Widget has loaded, then slides in from the right-hand edge of the page. If the chat widget hasn't loaded after 30 seconds, the tab isn't shown and a warning is logged to the browser console.
• Clicking the tab: opens the chat widget and sends the message as the customer's first message. If the chat is already open, clicking the tab has no effect.
• Position: the tab stays in place as the customer scrolls, and appears behind the chat widget when it's open.

Styling

The widget renders inside a shadow DOM, so the styles on your page don't affect it directly. By default it inherits your page's font, and uses your page's text colour as its background and your page's background colour as its text, so it stands out while matching your colours. Sizes are set in em, so the tab scales with your page's font size.

To change the colours or position, use config.style:

config: {
  productName: 'Trail Runner 2',
  style: {
    backgroundColor: '#1f3d2b',
    textColor: '#ffffff',
    shimmerColor: 'rgba(255, 215, 120, 0.6)',
    top: '40%',
  },
},

Styling with ::part()

For anything not covered by config.style, such as padding, font size or corner radius, use the ::part() selector. The widget adds its own element to the end of the page's <body>, so include [data-dg-sdk-widget="helpMeChoose"] in the selector:

[data-dg-sdk-widget='helpMeChoose']::part(button) {
  padding: 1.25em 0.75em;
  font-size: 1rem;
  text-transform: uppercase;
  --dg-radius: 0;
}

[data-dg-sdk-widget='helpMeChoose']::part(icon) {
  color: #f5c542;
}

Rules you write with ::part() take priority over the widget's default styles, so you don't need !important.

Troubleshooting

If the tab does not appear, check that:

• The Genius Chat Widget is on the page and loads without errors.
• type is set to 'helpMeChoose'.
• productName is set and isn't empty.
• widgetId is correct and env matches your region.

If the message doesn't include the product name, check the browser console. When retrievalMethod is 'selector', an error is logged if the selector doesn't match an element on the page.