Quote form

The quote form puts a full insurance quote on a page of your own website. Your visitor answers the product's questions, sees a price and, if the product allows it, pays and has their policy put in place, all without leaving your site.

It is a single script. It draws the form inside an element you choose, so it sits in your page like any other content.

Use it when visitors should get a price (and usually buy) on your site. If you only want contact details, use the lead form instead. If you want a chat, use the webchat, which can also work alongside the quote form.

• Script: https://js.subcontext.com/quoteform-latest.js
• Subcontext address (for the API and the live connection): https://subcontext.com

Quick start#

1. In the Subcontext dashboard, go to CRM, Campaigns, open a campaign and choose the Lead capture tab.
2. Under "Quotes on your website", press New quote form, pick the product and press Make the quote form.
3. On the quote form's page, add your website under Websites that may use it (for example https://www.example.com) and press Save websites.
4. Copy the code under The code to paste ("Paste where it goes") and paste it into your page where the quote should appear. It looks like this:

<div data-subcontext-quote data-key="qfk_YOUR_KEY" data-product="YOUR_PRODUCT_SLUG" data-journey="YOUR_JOURNEY_SLUG"></div>
<script src="https://js.subcontext.com/quoteform-latest.js" defer></script>

Open your page and the form appears. If it doesn't, see Troubleshooting.

Two ways to start it#

The form needs a short-lived access token (a pass that lets it talk to Subcontext for a while). It can get one in two ways.

Most websites should use a key. Use your own server when one page needs to offer several products, or when you already have a backend that talks to the Subcontext API.

A few words used below:

• Product: the insurance product being quoted. Its slug is its short name in addresses and code, like term-life.
• Journey: the product's set of questions and pages. It has a slug too.
• Presentation: another way of showing the same journey (a different page order or layout). Most journeys only have a default one.
• Origin: the scheme, host and port of a website, like https://www.example.com, without a path.

Set up in the dashboard first#

If you use a key#

1. A live product. The quote form can only offer a product that is live, with a live journey. If the dashboard says there is no live product to quote yet, publish one under Products first. If you're unsure whether a journey is live, ask Subcontext.
2. A campaign. Go to CRM, Campaigns and open (or create) one. Everyone who starts a quote joins this campaign as a lead.
3. A quote form on it. On the campaign's Lead capture tab, find "Quotes on your website" and press New quote form. Pick what it quotes, give it a name and press Make the quote form. Owners and managers can do this. The section only appears when your organisation has something it can quote.
4. Your websites. On the quote form's page, fill in Websites that may use it, one per line, and press Save websites. Until you add at least one, the form won't work anywhere (the page shows a warning).
5. Turned on. A new quote form is on. Turn off stops every website using it at once; Turn on brings it back.
6. An active account. If your organisation's subscription has lapsed, the form can't start. Ask Subcontext if you're not sure.

The quote form's page also shows:

• The code to paste, in two tabs: "Paste where it goes" (the snippet) and "From your own code" (a Subcontext.Quote.init() version).
• Results: how many people saw it, started a quote, were quoted and bought.
• Key and New key. A new key stops the old one at once, so update your website straight after.

If you use your own server#

1. A live product and journey of your organisation, as above.
2. An API application. In the dashboard, go to Integrations, API applications and create a new one (owners only). Tick the read and write scopes, and add your website under Allowed origins. Copy the Client ID and Client secret. The secret is shown once; keep it on your server. An API application with no allowed origins can only be used from servers. Browsers are refused. One with allowed origins can only have read and write, which is all the form needs.
3. A token endpoint on your server. It asks Subcontext for a token and passes it to your page. See Your own token endpoint.

How allowed websites are checked#

• Each entry is an exact origin. The scheme, host and port must all match. https://example.com and https://www.example.com are different, so list both if your page is on both.
• You can paste a full page address. It is cut down to the origin. Entries are lower-cased, and a default port is dropped (https://example.com:443 becomes https://example.com). Anything that isn't http(s)://host[:port] is rejected.
• With a key, the website is checked when the form asks for a token and again on every request after that.
• With your own server, every request is checked against the API application's allowed origins.

Example pages#

The example pages are complete web pages that show the quote form in use, from the simplest install up. You can read, copy or download each one.

In this section

• Install the quote form Add the quote form with the paste-in snippet, start it from your own code, or give it tokens from your own server.
• Quote form options Every option of Subcontext.Quote.init(), from starting values and the look to callbacks and the form's wording.
• JavaScript API and events The quote form's methods, its callbacks, prefill, provenance and consent, and how it works with the webchat and form guide.
• Security and troubleshooting What is public and what is secret, the content security policy to allow, and how to fix the quote form's errors.
• Quote form examples Complete example pages to copy, from the paste-in snippet to a quote form backed by your own token server.