06-script-api.html

<!--
  Controlling the paste-in snippet from your own code: start it switched off,
  turn it on when you choose, open help from your own buttons, and replace
  the panel's wording (here in French).

  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: controlling it from your code</title>
</head>
<body>
  <h1>Controlling it from your code</h1>
  <p>The snippet starts switched off (<code>data-enabled="false"</code>), with no icons and nothing loaded until you press <code>enable()</code>. Help opens inside the page, with the panel's wording in French from <code>data-strings</code>. The agent itself replies in its own language.</p>

  <p>
    <button type="button" id="enable">enable()</button>
    <button type="button" id="disable">disable()</button>
    <button type="button" id="rescan">rescan()</button>
    <button type="button" id="hide">hide()</button>
    <button type="button" id="destroy">destroy()</button>
    <button type="button" id="init">init()</button>
  </p>

  <form id="mortgage" aria-label="Mortgage protection">
    <p>
      <label for="income">Revenu annuel brut</label><br>
      <input id="income" name="gross_income" type="number">
      <button type="button" data-help-for="income">Expliquez-moi ce champ</button>
    </p>
    <p>
      <label for="balance">Capital restant dû</label><br>
      <input id="balance" name="mortgage_balance" type="number">
      <button type="button" data-help-for="balance">Expliquez-moi ce champ</button>
    </p>
    <p>
      <label for="newsletter">Recevoir notre lettre d'information (no icon: left out by data-exclude)</label><br>
      <select id="newsletter" name="newsletter">
        <option value="no">Non</option>
        <option value="yes">Oui</option>
      </select>
    </p>
  </form>

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

  <!--
    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"
    data-enabled="false"
    data-mode="inline"
    data-exclude="[name=newsletter]"
    data-strings='{"askFollowUp":"Posez une autre question...","typeAnswer":"Votre réponse...","done":"Terminé","helpWith":"Aide pour : {label}","closePanel":"Fermer"}'></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 = window.SubcontextFormGuide

    // enable() switches it on (loading the agent the first time) and
    // returns a promise.
    document.getElementById('enable').addEventListener('click', function () {
      guide.enable().then(function () { show('enable()') })
    })

    // disable() removes the icons but keeps the settings. rescan() looks for
    // new fields now. hide() closes every open panel. destroy() forgets
    // everything; init() then starts again from the script tag (switched off
    // again, because of data-enabled="false").
    ;['disable', 'rescan', 'hide', 'destroy', 'init'].forEach(function (method) {
      document.getElementById(method).addEventListener('click', function () {
        guide[method]()
        show(method + '()')
      })
    })

    // Your own "explain" buttons. trigger() opens the help panel for a field,
    // the same as clicking its icon. It does nothing until enable() has run.
    document.querySelectorAll('[data-help-for]').forEach(function (button) {
      button.addEventListener('click', function () {
        var field = document.getElementById(button.getAttribute('data-help-for'))
        guide.trigger(field)
        show('trigger(' + field.name + ')')
      })
    })
  </script>
</body>
</html>