04-field-context.html

<!--
  What the agent reads from your page. Apart from the data-formguide*
  attributes, this is standard, accessible HTML.
  This form shows help text, one icon for a date split into three boxes, a
  radio group, a question made of buttons, and a skipped field. UTM tags and
  ad click ids are taken from the page address, so you don't pass them yourself.

  Replace YOUR_AGENT_ID (near the bottom) with your agent's id.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Form guide: what the agent reads</title>
  <style>
    button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
  </style>
</head>
<body>
  <h1>What the agent reads</h1>
  <p>When you open a help panel, the agent is told the question, its type, any help text and choices, and the labels of the other questions. It is never told the answers already in the form. The list at the bottom shows exactly what is sent each time you open a panel.</p>
  <p><a href="?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=spring">Reload this page with UTM tags</a>, then open a panel. The tags travel with the page address and are kept with the conversation, so your reports show where the visitor came from.</p>

  <!-- The form's aria-label tells the agent which form this is. -->
  <form id="application" aria-label="Life cover application">
    <!-- aria-describedby points at the help text, which the agent is told about. -->
    <p>
      <label for="occupation">Your job</label><br>
      <input id="occupation" name="occupation" aria-describedby="occupation-help"><br>
      <small id="occupation-help">As you'd describe it to a friend. We use it to price the cover, so be specific: "site electrician", not "construction".</small>
    </p>

    <!-- One icon for three boxes. The first names the whole question and the others are skipped. -->
    <p>
      <span class="label">Date of birth</span><br>
      <input name="dob_day" aria-label="Day" inputmode="numeric" placeholder="DD" size="3" data-formguide-field-label="Date of birth">
      <input name="dob_month" aria-label="Month" inputmode="numeric" placeholder="MM" size="3" data-formguide="skip">
      <input name="dob_year" aria-label="Year" inputmode="numeric" placeholder="YYYY" size="5" data-formguide="skip">
    </p>

    <!-- A radio group gets one icon, with its legend as the question. -->
    <fieldset>
      <legend>Do you own your home?</legend>
      <label><input type="radio" name="home" value="own"> Own outright</label>
      <label><input type="radio" name="home" value="mortgage"> Own with a mortgage</label>
      <label><input type="radio" name="home" value="rent"> Rent</label>
    </fieldset>

    <!-- A row of buttons as one question. The button text is sent as the choices. -->
    <div data-formguide-field="cover_reason" data-formguide-field-label="What is the cover for?">
      <p class="label">What is the cover for?</p>
      <button type="button" aria-pressed="false">Mortgage</button>
      <button type="button" aria-pressed="false">Family</button>
      <button type="button" aria-pressed="false">Income</button>
      <button type="button" aria-pressed="false">Business</button>
    </div>

    <!-- A <small> right after the field is read as help text too. -->
    <p>
      <label for="weight">Weight in kilograms</label><br>
      <input id="weight" name="weight_kg" type="number">
      <small>Optional. It can make the price more accurate.</small>
    </p>

    <p>
      <label for="reference">Reference from your adviser (no icon: it has data-formguide="skip")</label><br>
      <input id="reference" name="adviser_reference" data-formguide="skip">
    </p>

    <!-- No label, so the placeholder is used as the question. -->
    <p>
      <textarea name="anything_else" rows="3" cols="40" placeholder="Anything else we should know?"></textarea>
    </p>
  </form>

  <h2>What was sent</h2>
  <ul id="log"></ul>

  <script>
    // Your own code records which buttons are pressed. The form guide only
    // reads their text (and clicks them when it fills in an answer).
    document.querySelectorAll('[data-formguide-field] button').forEach(function (button) {
      button.addEventListener('click', function () {
        button.setAttribute('aria-pressed', button.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')
      })
    })

    // For this example only: list what each new help conversation sends, so
    // you can see what the agent is told. Leave this out on your own site.
    var realFetch = window.fetch
    window.fetch = function (url, init) {
      if (String(url).indexOf('/api/v1/webchat/conversations') !== -1 && init && init.body) {
        var body = JSON.parse(init.body)
        var item = document.createElement('li')
        item.textContent = JSON.stringify({ subcontext: body.subcontext, provenance: body.provenance })
        document.getElementById('log').appendChild(item)
      }
      return realFetch.apply(this, arguments)
    }
  </script>

  <!--
    YOUR_AGENT_ID: your agent's id. In the Subcontext dashboard open Agents,
    your agent, Channels, Form guide. It's in the snippet shown there.
  -->
  <script
    id="formguide-embed-script"
    src="https://js.subcontext.com/formguide-latest.js"
    data-agent-id="YOUR_AGENT_ID"></script>
</body>
</html>