Webchat options

Each option has a JavaScript name (for init()) and, where there is one, a data-* attribute for the script tag. Only agentId is required.

A few rules for data-* attributes, because attribute values are always text:

• For on/off options, write exactly "true". (For data-enabled, write "false" to turn it off.)
• For lists, write a JSON array, for example data-conversation-starters='["Hi", "Get a quote"]'.

The basics#

Look and feel#

The theme object (JavaScript only) is the one every Subcontext embed takes, so you can share one theme between the webchat, quote form, form guide, lead form and Nurture. Theming the embeds says what each embed does with each key.

theme: {
  primaryColor: '#0F3D3E',
  accentColor: '#E07A5F',
  backgroundColor: '#FFFDF8',
  fontFamily: "'Georgia', serif",
  fontSize: 15,
  mode: 'light' // or 'dark'
}

Values in the theme object win over the separate options with the same name. Unknown keys are ignored. theme: 'dark' and theme: { mode: 'dark' } mean the same.

How it behaves#

Information about the page or visitor#

Launcher animation#

The chat has no entrance animation of its own. To add one, pass a function. It receives the launcher button and three helpers. While your function runs, the button has the class sc-fly, which turns off its own transition so it doesn't interfere with your animation.

SubcontextWebchat.init({
  agentId: 'YOUR_AGENT_ID',
  baseUrl: 'https://subcontext.com',
  launchAnimation(fab, hooks) {
    // hooks.isFullScreen(): true on a phone, where the panel would fill the screen
    // hooks.isStale():      true if the chat has redrawn the launcher (stop animating)
    // hooks.onLand():       call it to open the small panel
    fab.animate([{ transform: 'translateY(120px)' }, { transform: 'none' }], { duration: 600, easing: 'ease-out' })
  }
})

Once the visitor has closed the panel in a browser tab, the animation doesn't play again on later pages in that tab.

Text you can re-word#

Pass any of these in strings to change the text. Keep any text in {curly brackets}: the chat fills it in.