Install the form guide

There are two ways to install the form guide. Pick one.

Option 1: the paste-in snippet#

Paste this anywhere on the page, usually just before </body>:

<script
  id="formguide-embed-script"
  src="https://js.subcontext.com/formguide-latest.js"
  data-agent-id="YOUR_AGENT_ID"
  data-base-url="https://subcontext.com"></script>

About the snippet:

• Keep id="formguide-embed-script" exactly as it is. The script only starts by itself when it finds a tag with this id. Without it, the script loads and then waits for you to call attach().
• data-base-url is optional. It defaults to https://subcontext.com. If you set it, don't add a slash at the end.
• It looks at the whole page. Every field it can find a label for gets an icon. To leave some out, see Choosing which fields get help.

If your site uses Turbo (as many Rails sites do), the guide looks for fields again after each page change.

Option 2: attach() in JavaScript#

Load the script without the id, then attach it to the element that holds your form. Use this to:

• put the guide on one form only,
• give different forms different looks,
• choose the field icon, or
• start the guide when your own code is ready.

<script src="https://js.subcontext.com/formguide-latest.js"></script>
<script>
  window.SubcontextFormGuide.attach({
    container: document.getElementById('application-form'),
    agentId:   'YOUR_AGENT_ID',
    baseUrl:   'https://subcontext.com',
    mode:      'inline'
  }).then(function (guide) {
    // It's running. You can call guide.rescan(), guide.disable(),
    // guide.enable() or guide.destroy() later.
  }).catch(function (error) {
    // The agent couldn't be loaded, for example
    // "Agent not available (403: Form guide is switched off for this agent)"
    console.error(error.message)
  })
</script>

attach() returns a promise that resolves once the agent has loaded. It fails with an error when the agent can't be loaded, so you can handle that in your own code.

Each attach() is separate. You can attach to several forms on one page, each with its own options.

Only call attach() once the script has loaded. Putting your code after the script tag, as above, does that. If you add the script from your own code, wait for its load event:

var script = document.createElement('script')
script.src = 'https://js.subcontext.com/formguide-latest.js'
script.onload = function () {
  window.SubcontextFormGuide.attach({
    container: document.getElementById('application-form'),
    agentId:   'YOUR_AGENT_ID',
    baseUrl:   'https://subcontext.com'
  })
}
document.head.appendChild(script)

Inside a Subcontext quote form#

The quote form can run the form guide on its own pages. Turn it on with the quote form's formGuide option. The quote form loads the form guide for you and passes along its look and settings, so you don't add the form guide script yourself. It also tells the agent the answers the visitor has already given on the quote form, so its help fits their situation.