Install the webchat

There are two ways to install. Pick one per page.

Option 1: the paste-in snippet#

This is the snippet from the dashboard (see Quick start). You set options as data-* attributes on the script tag. Every page that has the snippet gets the chat.

<script
  id="webchat-embed-script"
  src="https://js.subcontext.com/webchat-latest.js"
  data-agent-id="YOUR_AGENT_ID"
  data-base-url="https://subcontext.com"
  data-title="Ask us anything"
  data-primary-color="#1B3A6B"></script>

About the snippet:

• The chat starts by itself only when the tag has data-agent-id. Without it, the script waits for you to call init() (option 2).
• You can add async or defer to the tag. The chat waits for the page to finish loading either way.
• data-base-url is optional. It defaults to https://subcontext.com.
• Keep id="webchat-embed-script". It is one of the ways the script finds its own tag and its data-* options. Your own code can use it to find the tag too.
• webchat-latest.js always gives you the newest version. Browsers may keep a copy for up to five minutes. If you need to pin a fixed version (for example to use Subresource Integrity), ask Subcontext.

Option 2: start it from JavaScript#

Load the script without data-agent-id, then call init() with your options. Use this when:

• you need an option that has no data-* form, such as strings, brand, fontFamily, launchAnimation, quoteLink or directDebitPrefill;
• you want to start the chat later, for example after the visitor accepts your cookie banner;
• you build the options in code.

<script id="webchat-embed-script" src="https://js.subcontext.com/webchat-latest.js"></script>
<script>
  window.SubcontextWebchat.init({
    agentId: 'YOUR_AGENT_ID',
    baseUrl: 'https://subcontext.com',
    title: 'Ask us anything',
    primaryColor: '#1B3A6B',
    conversationStarters: ['How much cover do I need?', 'Can I get a quote?']
  })
</script>

If your script tag has async, wait for it to load before calling init():

const script = document.getElementById('webchat-embed-script')
const boot = () => window.SubcontextWebchat.init({ agentId: 'YOUR_AGENT_ID', baseUrl: 'https://subcontext.com' })
if (window.SubcontextWebchat) boot()
else script.addEventListener('load', boot)

One chat per page#

• Only one chat can run on a page.
• If the tag has data-agent-id, the chat is already running, and calling init(options) later does nothing except put it back on the page if it was taken off.
• To change the options of a running chat, call destroy() and then init(newOptions).

Sites built with Turbo#

If your site uses Turbo (from Hotwire) to move between pages, the chat re-attaches after each page change and keeps the same conversation. After destroy(), it stays off across page changes until you call init() again.