04-context-and-provenance.html

<!--
  Telling the agent who the visitor is and where they came from: partner
  details at the start, setContext() from your own form, and campaign
  tracking. Replace YOUR_AGENT_ID below, and fill the details from what your
  own page knows about its customer.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Webchat: context and campaign tracking</title>
</head>
<body>
  <h1>Context and campaign tracking</h1>
  <p>
    This page pretends to be a bank's signed-in area. The chat starts with what the bank knows about its
    customer, and the agent offers those details back to confirm instead of asking for them. The form below
    changes that information; the chat uses it when it next starts a conversation.
  </p>

  <h2>Campaign tracking</h2>
  <p>
    Subcontext reads <code>utm_*</code> tags and ad click ids
    (<code>gclid</code>, <code>fbclid</code>, ...) from the address of the page the chat starts on.
    <a id="campaign-link" href="#">Reload this page as if from an email campaign</a>, then open the chat and send
    a message. The conversation's origin details in your inbox show the source, medium, campaign and click id.
  </p>

  <h2>Change what the chat knows</h2>
  <form id="customer">
    <p><label>First name <input id="first-name" value="Sam"></label></p>
    <p><label>Last name <input id="last-name" value="Taylor"></label></p>
    <p><label>Date of birth <input id="dob" type="date" value="1988-04-12"></label></p>
    <p>
      <label>Interested in
        <select id="interest">
          <option value="mortgage_protection">Protecting a mortgage</option>
          <option value="family">Providing for family</option>
        </select>
      </label>
    </p>
    <p><button type="submit">setContext() and start a new conversation</button></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>
    // The campaign link: this page with utm_* tags and a click id in the address.
    var campaign = new URL(location.href)
    campaign.search = '?utm_source=newsletter&utm_medium=email&utm_campaign=autumn_protection&gclid=EXAMPLE123'
    document.getElementById('campaign-link').href = campaign.href

    // What the page knows. The agent reads `partner` (as background it
    // confirms with the customer). Any other key is saved with the
    // conversation for your inbox, but not read by the agent.
    function contextFromForm() {
      return {
        partner: {
          name: 'Northbank',
          customer: {
            first_name: document.getElementById('first-name').value,
            last_name: document.getElementById('last-name').value,
            dob: document.getElementById('dob').value
          },
          insights: ['Took out a mortgage with Northbank in March']
        },
        // Your own keys, for example your customer's id in your own system.
        crm_customer_id: 'CUST-0042',
        interest: document.getElementById('interest').value
      }
    }

    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',
      title: 'Northbank protection',
      // The information is only sent when a conversation starts, so start a
      // new one instead of picking up one saved earlier in this browser.
      freshConversation: true,
      subcontext: contextFromForm()
    })

    document.getElementById('customer').addEventListener('submit', function (event) {
      event.preventDefault()
      // setContext() replaces all the information (it doesn't merge). It is
      // used by the next conversation, so end the current one first.
      SubcontextWebchat.resetConversation()
      SubcontextWebchat.setContext({ subcontext: contextFromForm() })
      SubcontextWebchat.open()
    })
  </script>
</body>
</html>