05-embedded-and-events.html

<!--
  The chat inside your own page layout (embedded mode), with your own
  microphone and question buttons, and the events the chat sends on window.
  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: embedded mode and events</title>
  <style>
    /* The chat fills this box, so give it a height. */
    #chat { height: 520px; border: 1px solid #d1d5db; }
  </style>
</head>
<body>
  <h1>Embedded mode and events</h1>
  <p>
    The chat sits in this page's own box instead of floating in the corner. The heading, the microphone
    button and the quick questions belong to the page, and call <code>toggleVoice()</code> and
    <code>ask()</code>. Every event the chat sends appears in the log.
  </p>

  <h2>Ask our adviser <button type="button" id="mic">Talk</button></h2>
  <div id="chat"></div>

  <p>
    <button type="button" data-question="Can you explain decreasing term cover?">Decreasing term?</button>
    <button type="button" data-question="Do I need a medical?">Do I need a medical?</button>
    <button type="button" data-question="I'd like a quote please">Get a quote</button>
  </p>

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

  <script>
    // Adds a line to the log on this page.
    function log(label, detail) {
      var item = document.createElement('li')
      item.textContent = label + (detail === undefined ? '' : '  ' + JSON.stringify(detail))
      document.getElementById('log').prepend(item)
    }

    // Listen before the chat starts so nothing is missed.
    var mic = document.getElementById('mic')

    // Talking in the browser started or stopped. Keep your own button in step.
    window.addEventListener('subcontext:voice-state', function (event) {
      mic.textContent = event.detail.state === 'active' ? 'Stop' : 'Talk'
      log('subcontext:voice-state', event.detail)
    })

    // The agent started an insurance application in the chat. event.detail is
    // { id, share_token, customer, risk_factors }. A quote form on the page
    // would use share_token to follow the application.
    window.addEventListener('subcontext:application-ready', function (event) {
      log('subcontext:application-ready', { id: event.detail.id, customer: event.detail.customer })
    })

    // A link in the chat to a page on this same website. Cancel the event to
    // handle the link yourself; otherwise it opens as normal.
    window.addEventListener('subcontext:link', function (event) {
      if (event.detail.path.indexOf('/quote') === 0) {
        event.preventDefault()
        log('subcontext:link handled in place', event.detail)
      } else {
        log('subcontext:link left to open', event.detail)
      }
    })
  </script>

  <!-- YOUR_AGENT_ID: your agent's id. In the dashboard, go to Agents and open your agent. The id is in the
       address bar. data-target names the box the chat fills. -->
  <script
    id="webchat-embed-script"
    src="https://js.subcontext.com/webchat-latest.js"
    data-agent-id="YOUR_AGENT_ID"
    data-mode="embedded"
    data-target="#chat"
    data-conversation-starters='["What cover do I need?", "How long does a quote take?"]'></script>

  <script>
    // Your own microphone button. It asks for the microphone on first use;
    // other problems show inside the chat.
    document.getElementById('mic').addEventListener('click', function () {
      SubcontextWebchat.toggleVoice().catch(function (error) {
        log('toggleVoice() failed: ' + error.message)
      })
    })

    // Your own quick-question buttons.
    document.querySelectorAll('[data-question]').forEach(function (button) {
      button.addEventListener('click', function () {
        SubcontextWebchat.ask(button.dataset.question).catch(function (error) {
          log('ask() failed: ' + error.message)
        })
      })
    })
  </script>
</body>
</html>