Button App

The Button app displays a set of question buttons on your page. When a customer clicks one, the Genius Chat Widget opens and the button's text is sent as the customer's first message. If a product name is set, it's added to the end of that message.

Prerequisites

The Button app opens the Genius Chat Widget, so the widget must also be on the page. See Integrating Genius Chat Widget.

Configuration

Add a components entry to your window.DG_SDK_CONFIG and include the SDK script:

<div id="product-questions"></div>

<script>
  window.DG_SDK_CONFIG = {
    components: [
      {
        widgetId: 'your-widget-id',
        env: 'eu', // 'eu' / 'us'
        targetDOMNode: '#product-questions',
        type: 'button',
        config: {
          buttonLabels: [
            'Help with sizing',
            'Is this 100% cotton?',
            'When will my order arrive?',
          ],
        },
      },
    ],
  };
</script>
<script src="https://chat.digitalgenius.com/init-sdk.js"></script>

The following properties are set on each entry in components.

If targetDOMNode, type, or config.buttonLabels is missing or invalid, nothing is displayed and a warning is logged to the browser console.

Product name

When productName is set, it's added to the end of the message sent to the chat, after a space. The button text on your page doesn't change. For example, with the label Help with sizing and the product name Trail Runner 2, the customer's message is Help with sizing Trail Runner 2.

Product name from config

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:

config: {
  buttonLabels: ['Help with sizing', 'Is this 100% cotton?'],
  productName: 'Trail Runner 2',
},

Product name from the page

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

config: {
  buttonLabels: ['Help with sizing', 'Is this 100% cotton?'],
  retrievalMethod: 'selector',
  productName: 'h1.product-title',
},

Any CSS selector works, including a plain h1. If the selector matches more than one element, the first one is used. The element's full text is used, including the text of any elements inside it, so point the selector at the element that contains only the product name, or use productNameExclude to leave some of it out. For input, select and textarea elements, the value is used instead.

The product name is read when the button is clicked, so it can be rendered after the app loads. If the selector doesn't match an element, the label is sent on its own and an error is logged to the browser console.

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

Behaviour

• Target element: If the targetDOMNode element isn't on the page yet (for example, if it's rendered later by JavaScript), the app waits for it to appear before adding the buttons.
• Loading state: The buttons are disabled until the Genius Chat Widget has loaded. If the chat widget hasn't loaded after 30 seconds, the buttons stay disabled and a warning is logged to the console.
• Clicking a button: Opens the chat widget and sends the button's text, followed by the product name if one is set, as the customer's first message. If the chat is already open, clicking a button has no effect.
• Layout: The buttons wrap onto new lines and grow to fill the available width, so they work in both wide areas such as the main content column and narrow ones such as a sidebar. Long labels wrap within their button.

Styling

The buttons render inside a shadow DOM, so the styles on your page don't affect them directly. By default they inherit your page's font and text colour:

• Font: family, size, weight and line height are inherited from the target element.
• Text and border colour: use the target element's text colour.
• Background: transparent, so your page's background shows through.
• Hover and focus: a light tint of the text colour.
• Icon: each button shows a sparkles icon to the left of its label, in the text colour.

Sizes are set in em, so spacing and padding scale with your font size.

To change how the buttons look, use config.style:

config: {
  buttonLabels: [
    'Help with sizing',
    'Is this 100% cotton?',
    'When will my order arrive?',
  ],
  style: {
    backgroundColor: '#1f3d2b',
    textColor: '#ffffff',
    border: '2px solid #1f3d2b',
    radius: '999px',
    gap: '12px',
  },
},

Solid shadow

Set shadowColor to draw an even, solid ring around each button, outside its border. Unlike a normal shadow, it doesn't fade out. Space is added around each button for the ring, so rings never overlap and the gap between them stays at gap. Leave out shadowColor to turn the ring off.

For example, a 3px light grey ring around a rounded outlined button:

style: {
  backgroundColor: '#ffffff',
  textColor: '#0f1d4a',
  border: '1.5px solid #0f1d4a',
  radius: '999px',
  shadowColor: '#e5e7eb',
  shadowWidth: '3px',
},