What it sends, and why#
When the page loads#
The script asks Subcontext for the agent's name and details, so it can show the panels. Nothing about the visitor or your form is sent at this point.
When a visitor clicks a help icon#
Each click starts a new, short conversation about that one question. The agent is told:
| What | Where it comes from |
|---|---|
| The question | The field's label. |
| The type of field | text, email, select, radio, buttons and so on. |
| The field's name | Its name, or a button group's key. |
| Help text | The field's help text, if any. |
| The choices | A dropdown's options, a radio group's labels, or a button group's button text. |
| The rest of the form | The form's name (its aria-label, first heading or legend) and the labels of the other questions, so the agent understands the context. |
| The page address | So the agent knows which page the visitor is on. |
| Whether it may fill in the field | Yes for fields marked data-formguide="extract". |
The answers already in your form are never sent, only labels, help text and choices. What the visitor types into the help panel is sent.
The agent is asked to reply in one to three sentences, to stay on this question, and to pick from the listed choices where there are any.
A visitor who opens help on five questions has five short conversations.
Where the visit came from#
Each conversation also records some basic facts about the visit, so you can see in your reports where people came from:
- the page address (without anything after a
#), the page title and the previous page (referrer), - whether the page is shown inside a frame, and if so the outer website,
- the visitor's language and time zone.
From the page address, Subcontext keeps only the campaign tags people
commonly use: UTM tags (utm_source, utm_medium, utm_campaign,
utm_term, utm_content, utm_id) and ad click ids (gclid, gbraid,
wbraid, fbclid, msclkid, ttclid, li_fat_id). Any other part of the
address after the ? is dropped. UTM tags are taken from the address the
visitor arrived on, so you don't pass them yourself.
Linking to a quote#
applicationContext: { id, share_token } links each new conversation to an
insurance application the visitor has started with Subcontext. The agent can
then see the answers already given on the quote form and earlier help
chats.
The Subcontext quote form does this for you. Outside the quote form you'd only have these values if your own code created the application through the Subcontext API. A wrong value doesn't cause an error. The chat isn't linked.
Where the conversations show up#
- Form guide chats don't appear in your dashboard inbox (each icon click would be a new entry). When a chat is linked to an application, you'll find it on that application's page.
- They're counted in your analytics, under the form guide.
What's stored in the visitor's browser#
A random visitor id, in the browser's local storage under the name
subcontext_formguide. Nothing else is stored, and no cookies are set.
If your site lists what it stores in a cookie policy, add this entry.
Privacy and security#
- There's no secret on your page. The agent id is public, like the address of a chat widget. Anyone who has it can start a form guide or webchat conversation with that agent from any website. If an agent shouldn't be public, don't make it live.
- Any website can use it. The form guide doesn't check which website it's on. The Form guide channel switch is how you turn it on or off.
- Each conversation is private. Starting a conversation gives the visitor's browser a one-off pass for that conversation only. The live connection that brings the agent's replies only works with that pass, and only for that one conversation.
- Rate limits. Subcontext limits how many requests one IP address can make in a short time (currently 300 in 5 minutes). Above that, requests are refused and the panel says Please slow down.
- Safe display. The agent's replies are cleaned before they're shown, so they can't run code on your page. The panels are sealed off from your page (in a "shadow root"). Your CSS doesn't change them, and theirs doesn't affect your page. Your theme values only apply inside the panels.
- What it adds to your page. Only the help icons (
<span data-formguide-icon>) and an empty holder<div>for each panel. - Quote links. The
share_tokeninapplicationContextworks like a password for that application. It's sent securely and isn't stored with the conversation.
Content security policy#
A content security policy (CSP) is a header some websites send to say which other sites the page may load from or talk to. If your site sends one, add these:
| Directive | Add | Why |
|---|---|---|
script-src |
https://js.subcontext.com |
Loads the form guide script. |
connect-src |
https://subcontext.com wss://subcontext.com |
Talks to Subcontext, and opens the live connection (WebSocket, the wss:// address) that brings the agent's replies. |
style-src |
'unsafe-inline' |
The panels create their own styles as the page runs. Without this they open unstyled. There's no nonce option. |
img-src |
any image addresses your agent's replies might include | Only needed if your agent's replies show images. |
Troubleshooting#
Open your browser's developer console first. Messages from the form guide
start with [Subcontext.FormGuide]. For more detail, add
data-debug="true" to the snippet, or debug: true to attach().
Nothing appears#
| What you see | What it means and how to fix it |
|---|---|
No [Subcontext.FormGuide] v1.2.0 line in the console |
The script didn't load. Check the src address, and your CSP's script-src. |
data-agent-id is required on <script id="formguide-embed-script">: skipping init. |
The snippet has the right id but no data-agent-id. Add your agent id. |
| The version line shows, but no warnings, no icons and no requests | The snippet is missing id="formguide-embed-script", so the script is waiting for attach(). Or the snippet has data-enabled="false" and nothing has called enable(). |
Failed to load agent: Error: Agent not available (403: Form guide is switched off for this agent) |
Switch on the agent's Form guide channel: Agents, the agent, Channels, Form guide, Enable. |
Failed to load agent: Error: Agent not available (404: Agent not available) |
The agent isn't live (it has no production version), or your subscription has lapsed. |
Failed to load agent: Error: Agent not available (404: Not found) |
No agent has that id. Copy it again from the dashboard. |
The request in the Network tab went to js.subcontext.com |
data-base-url (or baseUrl) is set to the wrong address. Remove it, or set it to https://subcontext.com. |
Failed to fetch, or a CORS error |
baseUrl is wrong, or your CSP's connect-src is blocking https://subcontext.com. (Subcontext accepts requests from any website, so this isn't a setting on our side.) |
With attach(), the same Agent not available (...) message is the error
your .catch() receives.
A field has no icon#
Check each of these:
- The field has no label the guide can find. Add a
<label for="...">, ordata-formguide-field-label="Your question". - It's an input of type
hidden,submit,button,reset,imageorfile. These never get icons. - It's been left out by
data-formguide="skip",excludeorfieldRules. - With
attach(), it's outside thecontainer. - It's a question made of buttons without
data-formguide-fieldon the element around them.
Problems with the JSON attributes#
| Console message | Fix |
|---|---|
data-theme is not valid JSON: ignoring. |
Fix the JSON. Use single quotes around the attribute and double quotes inside it. |
data-strings is not valid JSON: ignoring. |
The same. |
data-field-rules is not valid JSON: ignoring. |
The same. |
data-field-rules needs { "mode": "blocklist" or "allowlist", "entries": [{ "type", "pattern" }] }: ignoring. |
The JSON is valid but the shape is wrong. mode must be blocklist or allowlist, and each entry needs a type of css_selector or field_name and a text pattern. |
Problems inside the panel#
| What the panel shows | What it means and how to fix it |
|---|---|
| Could not start conversation | The conversation couldn't be started. The console says why, in a message starting could not start a conversation: 403: Form guide is switched off for this agent (switch the channel on), 422: Agent not available (the agent stopped being live), 429 (too many requests, wait a moment), or a network problem. |
| WebSocket connection timeout (after 10 seconds) | The live connection that brings replies couldn't open. Check your CSP's connect-src includes wss://subcontext.com, and that no firewall or proxy on your network blocks WebSockets. |
| Could not load field explanation. | The agent couldn't write its opening explanation this time. Try again. If it keeps happening, contact Subcontext. |
| Could not extract a value from this conversation. | The agent couldn't work out a value. The visitor can try again, or fill in the field themselves. |
| We couldn't fill this in automatically: the suggested answer was: ... | The agent's answer didn't fit the field (no matching option, a date it couldn't read, no number). Nothing was written, and formguide:generated wasn't sent. |
| The Done button stays greyed out | It becomes active once the visitor has sent a message and the agent has replied. |
| Please slow down. | Too many requests from this IP address in a short time. |
| Message blocked. | The message broke one of the agent's content rules. |
| This conversation has been escalated for review. | The agent has handed the conversation to a person. |
| The panels look plain and unstyled | Your CSP blocks inline styles. Add style-src 'unsafe-inline'. |
If you're still stuck, email hello@subcontext.com with the page address and what the console shows.