02-programmatic-attach.html

<!--
  Installing with attach(): load the script without the snippet's id (so it
  waits for you), then attach the guide to one form with your own options.
  Fields can be left out three ways: the exclude option, field rules, and
  being outside the container. The buttons call the guide's methods.

  Replace YOUR_AGENT_ID (in the script 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: install with attach()</title>
</head>
<body>
  <h1>Install with attach()</h1>
  <p><code>attach()</code> puts the guide on one form only. The newsletter form further down gets no icons, and the options leave out the email, phone and promo code fields. Use the buttons to add a field or to call the guide's methods.</p>

  <form id="application" aria-label="Income protection application">
    <fieldset>
      <legend>Your application (guided)</legend>
      <p>
        <label for="occupation">Occupation</label><br>
        <input id="occupation" name="occupation">
      </p>
      <p>
        <label for="deferred">Deferred period</label><br>
        <select id="deferred" name="deferred_period">
          <option value="">Choose one</option>
          <option value="4w">4 weeks</option>
          <option value="13w">13 weeks</option>
          <option value="26w">26 weeks</option>
          <option value="52w">52 weeks</option>
        </select>
      </p>
      <p>
        <label for="email">Email address (excluded by a field_name rule)</label><br>
        <input id="email" name="email" type="email">
      </p>
      <p>
        <label for="phone">Phone (excluded by a css_selector rule)</label><br>
        <input id="phone" name="phone" type="tel" class="no-help">
      </p>
      <p>
        <label for="promo">Promo code (excluded by the exclude option)</label><br>
        <input id="promo" name="promo_code">
      </p>
      <div id="extra-rows"></div>
    </fieldset>
  </form>

  <p>
    <button type="button" id="add-field">Add a field</button>
    <button type="button" id="disable">disable()</button>
    <button type="button" id="enable">enable()</button>
    <button type="button" id="rescan">rescan()</button>
    <button type="button" id="destroy">destroy()</button>
    <button type="button" id="attach">attach() again</button>
  </p>

  <form id="newsletter">
    <fieldset>
      <legend>Newsletter (not attached, so no icons)</legend>
      <p>
        <label for="newsletter-email">Email</label><br>
        <input id="newsletter-email" name="newsletter_email" type="email">
      </p>
    </fieldset>
  </form>

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

  <!-- No id on this tag, so the script waits for attach(). -->
  <script src="https://js.subcontext.com/formguide-latest.js"></script>
  <script>
    // Adds a line to the log on this page.
    function show(text) {
      var item = document.createElement('li')
      item.textContent = text
      document.getElementById('log').appendChild(item)
    }

    var guide = null

    function attachGuide() {
      window.SubcontextFormGuide.attach({
        container: document.getElementById('application'),
        // YOUR_AGENT_ID: your agent's id. In the Subcontext dashboard open
        // Agents, your agent, Channels, Form guide. It's in the snippet there.
        agentId:   'YOUR_AGENT_ID',
        mode:      'popover',
        exclude:   '[name="promo_code"]',
        fieldRules: {
          mode: 'blocklist',
          entries: [
            { type: 'field_name',   pattern: 'email' },
            { type: 'css_selector', pattern: '.no-help' }
          ]
        },
        debug: true
      }).then(function (handle) {
        guide = handle
        show('attached (version ' + window.SubcontextFormGuide.version + ')')
      }).catch(function (error) {
        // The agent couldn't be loaded, for example
        // "Agent not available (403: Form guide is switched off for this agent)"
        show('attach failed: ' + error.message)
      })
    }

    attachGuide()

    // The guide picks up fields added later, so no rescan() is needed.
    var added = 0
    document.getElementById('add-field').addEventListener('click', function () {
      added += 1
      var row = document.createElement('p')
      row.innerHTML = '<label for="extra-' + added + '">Annual income from second job ' + added + '</label><br>' +
        '<input id="extra-' + added + '" name="second_income_' + added + '" type="number">'
      document.getElementById('extra-rows').appendChild(row)
      show('field added')
    })

    ;['disable', 'enable', 'rescan'].forEach(function (method) {
      document.getElementById(method).addEventListener('click', function () {
        if (!guide) return show(method + '() skipped: not attached')
        guide[method]()
        show(method + '()')
      })
    })

    // destroy() is final. After it, enable() and rescan() do nothing.
    // Call attach() again for a new guide.
    document.getElementById('destroy').addEventListener('click', function () {
      if (!guide) return show('destroy() skipped: not attached')
      guide.destroy()
      guide = null
      show('destroy()')
    })

    document.getElementById('attach').addEventListener('click', function () {
      if (guide) return show('attach() skipped: already attached, destroy() first')
      attachGuide()
    })
  </script>
</body>
</html>