06-handoff.html

<!--
  Letting the visitor carry the conversation on by text, WhatsApp, email or a
  call back: from your own form with contactMe(), and from the chat's
  built-in "Switch channel" button (the omni option). Replace YOUR_AGENT_ID
  below. Both send real messages, so use your own number or address.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Webchat: carry the chat on elsewhere</title>
</head>
<body>
  <h1>Carry the chat on elsewhere</h1>
  <p>
    Two ways to move a conversation off the page. The chat's header has a <strong>Switch channel</strong>
    button. The form below is the page's own, calling <code>contactMe()</code>.
  </p>
  <p>
    Text and WhatsApp need an SMS or WhatsApp channel with a number on the agent (dashboard: <strong>Agents</strong>,
    your agent, <strong>Channels</strong>). A call back needs its voice channel. Before a chat has started, you
    can send 5 of these an hour from one internet address.
  </p>

  <form id="contact">
    <p>
      <label>Continue by
        <select id="channel">
          <option value="sms">Text message</option>
          <option value="whatsapp">WhatsApp</option>
          <option value="email">Email</option>
          <option value="voice">A phone call back</option>
        </select>
      </label>
    </p>
    <p><label>Mobile number or email address <input id="address" required placeholder="07700 900123 or you@example.com"></label></p>
    <p><button type="submit">Continue</button></p>
    <p id="result" role="status"></p>
  </form>

  <!-- 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>
    SubcontextWebchat.init({
      // 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',
      // The header's "Switch channel" button, with these choices in this order.
      omni: ['whatsapp', 'sms', 'email', 'phone', 'mic'],
      defaultOpen: true
    })

    var result = document.getElementById('result')

    function contactOptions(channel, address, extra) {
      var options = channel === 'email'
        ? { channel: channel, email: address }
        : { channel: channel, phone_number: address }
      return Object.assign(options, extra)
    }

    async function handOff(channel, address) {
      // One idempotency key per press, so a double click can't send twice.
      var key = crypto.randomUUID()
      var reply = await SubcontextWebchat.contactMe(contactOptions(channel, address, { idempotencyKey: key }))

      // They told the firm to stop messaging them on this channel before.
      // Only their own confirmation reopens it.
      if (reply.status === 'consent_withdrawn') {
        if (!window.confirm(reply.message + ' Do you want messages there again?')) {
          result.textContent = 'OK, we won\'t message you there.'
          return
        }
        reply = await SubcontextWebchat.contactMe(contactOptions(channel, address, { consent_confirmed: true }))
      }

      if (reply.status === 'ok') {
        // A WhatsApp request can come back as 'sms', meaning a text was sent instead.
        result.textContent = reply.channel === 'sms' && channel === 'whatsapp'
          ? 'WhatsApp isn\'t available, so we\'ve sent you a text instead.'
          : 'Thanks: we\'ll continue by ' + reply.channel + '.'
      } else if (reply.status === 'unavailable') {
        result.textContent = reply.message
      }
    }

    document.getElementById('contact').addEventListener('submit', function (event) {
      event.preventDefault()
      var channel = document.getElementById('channel').value
      var address = document.getElementById('address').value.trim()
      result.textContent = 'Sending...'
      handOff(channel, address).catch(function (error) {
        // Other problems fail with a readable message, for example
        // "That doesn't look like a valid mobile number."
        result.textContent = error.message
      })
    })
  </script>
</body>
</html>