02-programmatic.html

<!--
  Starting the chat from JavaScript: init() with the main options, waiting
  for cookie consent before the chat appears, and each method of the
  JavaScript API on a button. Replace YOUR_AGENT_ID below.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Webchat: start from JavaScript</title>
</head>
<body>
  <h1>Start from JavaScript</h1>
  <p>
    The chat loads hidden (<code>enabled: false</code>) and appears only once the visitor accepts the
    cookie banner. After that, each button calls one method of the JavaScript API.
  </p>

  <div id="consent">
    We use a small amount of storage to remember your chat.
    <button type="button" id="accept">Accept and show the chat</button>
  </div>

  <h2>API</h2>
  <p>
    <button type="button" data-action="open">open()</button>
    <button type="button" data-action="open-expanded">open({ expanded: true })</button>
    <button type="button" data-action="ask">ask('How much cover do I need?')</button>
    <button type="button" data-action="start">startChat()</button>
    <button type="button" data-action="reset">resetConversation()</button>
    <button type="button" data-action="disable">disable()</button>
    <button type="button" data-action="enable">enable()</button>
    <button type="button" data-action="destroy">destroy()</button>
    <button type="button" data-action="init">init() again</button>
  </p>

  <h2>Log</h2>
  <ol id="log"></ol>

  <!-- 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>
    // Adds a line to the log on this page.
    function log(text) {
      var item = document.createElement('li')
      item.textContent = text
      document.getElementById('log').prepend(item)
    }

    var options = {
      // Your agent's id. In the dashboard, go to Agents and open your agent.
      // The id is in the address bar.
      agentId: 'YOUR_AGENT_ID',
      enabled: false, // nothing appears or connects until enable()
      title: 'Questions about cover?',
      position: 'bottom-right',
      primaryColor: '#1B3A6B',
      accentColor: '#F08A24',
      startUnread: true,
      conversationStarters: ['How much cover do I need?', 'What does it cost?', 'Can I speak to someone?']
    }

    SubcontextWebchat.init(options)
    log('init({ enabled: false }): hidden until the visitor accepts')

    // When the visitor accepts cookies (the chat saves a visitor id in the browser).
    document.getElementById('accept').addEventListener('click', function () {
      SubcontextWebchat.enable()
      document.getElementById('consent').hidden = true
      log('enable(): the chat button appears, with an unread dot')
    })

    // Methods that return a Promise fail if the chat hasn't started yet
    // (WidgetNotReadyError) or the agent didn't load.
    function run(label, result) {
      log(label)
      if (result && result.then) {
        result.then(
          function () { log(label + ' resolved') },
          function (error) { log(label + ' rejected: ' + error.message) }
        )
      }
    }

    var actions = {
      open: function () { run('open()', SubcontextWebchat.open()) },
      'open-expanded': function () { run('open({ expanded: true })', SubcontextWebchat.open({ expanded: true })) },
      ask: function () { run('ask()', SubcontextWebchat.ask('How much cover do I need?')) },
      start: function () { run('startChat()', SubcontextWebchat.startChat()) },
      reset: function () { run('resetConversation()', SubcontextWebchat.resetConversation()) },
      disable: function () { run('disable()', SubcontextWebchat.disable()) },
      enable: function () { run('enable()', SubcontextWebchat.enable()) },
      destroy: function () { run('destroy()', SubcontextWebchat.destroy()) },
      // destroy() then init(options) is how you change a running chat's
      // options. This starts it visible straight away.
      init: function () { run('init()', SubcontextWebchat.init(Object.assign({}, options, { enabled: true }))) }
    }

    document.querySelectorAll('[data-action]').forEach(function (button) {
      button.addEventListener('click', actions[button.dataset.action])
    })
  </script>
</body>
</html>