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.

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 widget block to your window.DG_SDK_CONFIG and include the SDK script:

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

<script>
  window.DG_SDK_CONFIG = {
    widgetId: 'your-widget-id',
    env: 'eu', // 'eu', 'us', or 'dev.us'
    widget: {
      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>

If any of these are missing or invalid, nothing is displayed and a warning is logged to the browser console.

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

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

To change how the buttons look, use CSS custom properties or the ::part() selector.

CSS custom properties

Set these on the target element, or on any element that contains it:

#product-questions {
  --dg-button-bg: #1f3d2b;
  --dg-button-color: #ffffff;
  --dg-button-border: 2px solid #1f3d2b;
  --dg-button-radius: 999px;
  --dg-button-gap: 12px;
}

Styling with ::part()

For anything not covered by the custom properties, such as padding, text alignment or letter spacing, target each button with ::part(button). The app adds its own element inside your target element, so include [data-dg-sdk-widget="button"] in the selector:

#product-questions [data-dg-sdk-widget="button"]::part(button) {
  padding: 1em 1.5em;
  text-align: left;
  text-transform: uppercase;
}

#product-questions [data-dg-sdk-widget="button"]::part(button):hover {
  background: #b5542c;
  color: #ffffff;
}

#product-questions [data-dg-sdk-widget="button"]::part(button):disabled {
  opacity: 0.3;
}

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