03-branding.html

<!--
  Styling the chat to match your brand: the theme object, dark mode, a font,
  your own wording, the corner and a launcher animation. These have no data-*
  form, so the chat starts with init(). Replace YOUR_AGENT_ID below, then
  keep the look you want.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Webchat: branding</title>
</head>
<body>
  <h1>Branding</h1>
  <p>
    Three looks for the same agent. Picking one calls <code>destroy()</code> and then <code>init()</code> with
    new options, which is how you change a running chat. The conversation carries on, because it is saved
    for the agent.
  </p>

  <fieldset>
    <legend>Look</legend>
    <label><input type="radio" name="look" value="harbour" checked> Serif brand, bottom left, custom wording and a launcher animation</label><br>
    <label><input type="radio" name="look" value="dark"> Dark mode for a dark page section</label><br>
    <label><input type="radio" name="look" value="plain"> Defaults (only the agent id)</label>
  </fieldset>

  <!-- No data-agent-id on the tag, so the chat waits for init() below. -->
  <script id="webchat-embed-script" src="https://js.subcontext.com/webchat-latest.js"></script>
  <script>
    // Your agent's id. In the dashboard, go to Agents and open your agent.
    // The id is in the address bar.
    var agentId = 'YOUR_AGENT_ID'

    // An entrance that slides the chat button up from below the window. The
    // chat adds the class sc-fly to the button so its own transition stays
    // out of the way. The helpers: hooks.isFullScreen() is true on a phone,
    // hooks.isStale() is true if the chat has redrawn the button (stop
    // animating), and hooks.onLand() opens the panel. This leaves it shut.
    function slideUp(fab, hooks) {
      fab.animate(
        [{ transform: 'translateY(140px)' }, { transform: 'none' }],
        { duration: 700, easing: 'cubic-bezier(.2,.9,.3,1.2)' }
      )
    }

    var looks = {
      harbour: {
        title: 'Talk to Harbour Life',
        position: 'bottom-left',
        // The same theme object works for every Subcontext embed.
        // Colours can be any CSS colour: hex, rgb(), hsl() or a name.
        theme: {
          primaryColor: '#0F3D3E',
          accentColor: '#E07A5F',
          backgroundColor: '#FFFDF8',
          fontFamily: "'Georgia', serif", // your page must already load the font
          fontSize: 15,
          mode: 'light'
        },
        // Re-word any text the visitor sees (every key is listed at
        // https://subcontext.com/developers/embeds/webchat/options#text-you-can-re-word).
        strings: {
          inputPlaceholder: 'Ask about your cover...',
          couldNotConnect: 'We could not reach Harbour Life. Please try again.'
        },
        launchAnimation: slideUp
      },
      dark: {
        title: 'Chat with us',
        // 'dark' gives light text on a dark background.
        theme: {
          mode: 'dark',
          backgroundColor: '#111827',
          primaryColor: '#7C3AED',
          accentColor: '#A78BFA'
        },
        defaultExpanded: true
      },
      plain: {}
    }

    function start(name) {
      SubcontextWebchat.destroy()
      SubcontextWebchat.init(Object.assign({ agentId: agentId }, looks[name]))
    }

    start('harbour')
    document.querySelectorAll('input[name=look]').forEach(function (input) {
      input.addEventListener('change', function () { start(input.value) })
    })
  </script>
</body>
</html>