Intro Banner

The intro banner is an image, some introductory copy and a set of conversation
starter buttons, shown at the top of the conversation when the widget opens.

It only shows when all of these are true:

• introBanner.isEnabled is true
• generalSettings.isDrawerMode is true
• prechatForm.isEnabled is false
• welcomeScreen.isEnabled is false

window.DG_CHAT_WIDGET_CONFIG = {
  // ...
  generalSettings: {
    isDrawerMode: true,
  },
  introBanner: {
    isEnabled: true,
    image: 'https://cdn.example.com/chat/intro-banner.jpg',
    imageAlt: 'Runners on a grassy hillside',
    content:
      "<p>Hi, I'm your shopping guide. Tell me where you're headed and I'll help you find the gear to get you there.</p>" +
      '<p>Start here or <strong>ask me anything</strong>.</p>',
    buttons: [
      'Race day apparel and shoes for a marathon',
      'Hiking boots for technical terrain',
      'Shoes to take me from trail to travel',
    ],
  },
};

Behaviour

• Opening the widget shows the banner and the chat input without creating a
  conversation, so no start event is sent and the flow's greeting doesn't
  run.
• The customer's first button click or typed message creates the conversation
  and sends a
  conversation_starter event
  with source: 'intro_banner': action: 'question' for a button,
  action: 'free_text' for a typed message. text is what the customer
  clicked or typed.
• The buttons stay visible after the conversation starts, so the customer can
  click another one later. They're disabled while the bot is typing.
• The conversation scrolls up so the customer's message sits under the header,
  with the banner scrolled out of view above it.
• A restored session reconnects as usual, with the banner above its messages.

Styling

Each part has a class name you can target from styles.widgetStyles:
dg-intro-banner, dg-intro-banner-image, dg-intro-banner-copy,
dg-intro-banner-buttons, dg-intro-banner-button and dg-intro-banner-button-icon. The button icon is
the Sparkle icon and can be replaced via styles.icons.Sparkle.