Quote form options

Every option of Subcontext.Quote.init(), from starting values and the look to callbacks and the form's wording.

All of these are options of Subcontext.Quote.init(options).

The ones you must give#

Option	Type	What it does
`container`	CSS selector or element	Where to draw the form.
`productSlug`	string	The product to quote.
`journeySlug`	string	The product's journey.
`key`	string	The quote form's key (`qfk_...`). Give this or `getToken`.
`getToken`	function returning a promise	Your own token source (see Your own token endpoint). It may resolve to the token as a string (treated as valid for an hour) or to `{ access_token, expires_in }` (`expires_in` in seconds, default 3600). If you give both `key` and `getToken`, `getToken` wins.

Connection#

Option	Type	Default	What it does
`apiBase`	string	`https://subcontext.com`	The Subcontext address. You can leave it out.
`baseUrl`	string	none	Another name for the same thing, shared by all Subcontext embeds. Used when `apiBase` isn't given. It is also passed on to the webchat and form guide if you use them.
`presentationSlug`	string or `null`	the journey's default	Another presentation of the journey.

Starting values#

Option	Type	Default	What it does
`initialValues`	object	`{}`	Answers to start with, keyed by the journey's question keys. Two special keys: `__sumAssured` (the cover amount, in pence) and `__term` (in years).
`initialCustomer`	object	`{}`	Details about the visitor you already know: `title`, `first_name`, `last_name`, `email`, `phone_number`, `dob` (as `dd/mm/yyyy`), `postal_code`.
`defaultTermYears`	number	none	Pre-selects the term slider (unless `initialValues.__term` is set). Without it, the slider says "Choose a term" and the visitor picks.
`defaultSumAssured`	number, in pence	none	Pre-selects the cover amount (unless `initialValues.__sumAssured` is set). `25000000` is £250,000. Without it, the visitor chooses.
`fresh`	boolean	`false`	Start a new application instead of picking up the one this browser tab was working on.
`chatContext`	object	none	Extra information passed to the webchat, if you use it.
`rememberClickIds`	boolean	Google Consent Mode	Whether ad click ids from the page a visitor lands on may be kept in your website's browser storage, so this form still sends them. `false` also deletes anything kept. The `webchat` and `formGuide` the form opens get the same setting. See Ad clicks across pages.

Look and layout#

Option	Type	Default	What it does
`theme`	object, or `'light'` or `'dark'`	none	The theme shared by all Subcontext embeds: `{ primaryColor, accentColor, backgroundColor, fontFamily, fontSize, mode }`. `primaryColor`, `accentColor` and `fontFamily` win over the separate options below. `backgroundColor` colours the form's card. `mode: 'dark'` gives the form light text on a dark card (`#1f1d1a`, or your `backgroundColor`). `fontSize` is ignored. The `webchat` and `formGuide` the form opens get the same theme. See Theming the embeds.
`primaryColor`	string	`#2f93f0`	Buttons, focus rings, sliders, progress and highlights.
`accentColor`	string	`#1f7ad6`	The hover and pressed shade, and the price.
`fontFamily`	string	`"Plus Jakarta Sans", system-ui, ...`	The form's font. The form doesn't load fonts, so load them on your page.
`displayFont`	string	`"Bricolage Grotesque", "Plus Jakarta Sans", ...`	The font for big headings (question headlines and the price).
`showHeader`	boolean	`true`	Show the product name and journey line at the top.
`showProgress`	boolean	`true`	Show "Step X of Y" and the progress dots. If both this and `showHeader` are `false`, the form drops its card and uses a minimal layout with a back button.
`steps`	array of 3 strings	none	Labels for a three-step bar above the form. Step 1 is the cover page, step 2 the pages before the price, step 3 the price onwards. Works separately from `showProgress`.
`homeUrl`	string	`'/'`	Where the minimal layout's back button goes from the first page.
`homeBackLabel`	string	none	Shows the minimal layout's back button as a text link, with this label (going to `homeUrl`) on the first page and "Back" after that.
`footerContainer`	CSS selector or element	inside the form	Where to put the "Start a new application" link. A selector is looked up each time the form redraws, so the element can appear later.
`autofocus`	boolean	`false`	Put the cursor in the first field once the form appears (unless the visitor has already clicked into the form).
`categoryPickers`	boolean	`false`	Show height and weight questions as cards (group, band, then a slider) instead of one slider.
`categoryLabels`	object	none	Card titles for those pickers, by question key, then by group and band key: `{ height_cm: { groups: {...}, bands: {...} } }`.
`questionHeadings`	object	none	Headings above slider and picker questions, by question key, like `{ height_cm: 'How tall are you?' }`.
`strings`	object	English	Change any wording. See Wording.
`variant`	string	the standard look	`'branded'` draws the form as a framed window with a top bar and a side summary, styled by `brand`. Other variant names are made for particular firms; unknown names fall back to the standard look.
`brand`	object	none	For the framed look: `{ name, wordmark, wordmarkLead, palette: { ink, mark, accent, accentSoft, cta, ctaDark, ctaSoft, tint }, font, logoFont }`. All optional. Colours and fonts are checked for safe values before use.
`frameTitle`	string	the product name	The title in the framed look's top bar.
`closeable`	boolean	`false`	Shows a close button in the framed look (it has `data-sx-frame-close`). Your page decides what a click does.
`summary`	object	none	What the framed look's side panel shows: `{ coverLabel, answers, note, ask: { title, text }, boundTitle, levelLabel, levelSuffix }`. `ask` adds a button (with `data-sx-frame-ask`) for your page to handle, for example to open a chat.

The form adds one stylesheet to the page (a <style> tag with id sx-quote-widget-styles) and all its class names start with sx-, so it won't clash with yours. Each form keeps its own colours, fonts and mode, so several forms on one page can look different, one light and one dark.

Without a card (showHeader and showProgress both false), a backgroundColor or dark mode goes behind the form itself, with padding and rounded corners. Dark mode changes the standard look only: a form with a variant keeps that design's colours.

Behaviour#

Option	Type	Default	What it does
`enabled`	boolean	`true`	`false` starts the form switched off. Options are checked, but nothing is drawn or loaded until you call `enable()`.
`autoAdvance`	boolean	`false`	When the chat assistant fills in all of a page's required fields, move the form on to the next page (and submit on the last one).
`debug`	boolean	`false`	Write detailed logs to the browser console, starting `[Subcontext.Quote]`.

Callbacks#

Option	Called with	Called when
`onLoad`	nothing	The first page has appeared (or a quote opened from a `?quote_id=` link).
`onStageComplete`	`(stageType, data)`	The visitor finished a page and moved on. See Callbacks and events.
`onQuote`	`(quote)`	A price was given (by the form or by the chat assistant).
`onDecline`	`(executions)`	Underwriting declined or postponed the cover.
`onReferred`	`(executions)`	The application was referred to an underwriter.
`onBound`	`(policy)`	The policy is paid for and in place.
`onNewApplication`	nothing	"Start a new application" has finished clearing the form.
`onError`	`(error)`	Something went wrong that the form couldn't recover from.

Chat and help#

Option	Type	What it does
`agentId`	string	Your assistant's id, used by `formGuide` and `webchat` when they don't give their own.
`formGuide`	object	Adds the form guide's help to the form's fields. See Working with the webchat and form guide.
`webchat`	object	Loads the webchat next to the form, sharing the same application.

Wording#

Every piece of text in the form can be changed with strings. Pass only what you want to change; everything else keeps its default.

strings: {
  nav: { submit: 'See my price', stepOf: 'Page {0} of {1}' },
  quote: { buyCta: 'Buy now' },
  common: { restart: 'Start over' }
}

Some defaults are built from values (like "Step 2 of 5"). For those, pass a function, or a string with {0}, {1} where the values go.

Commonly changed keys:

Key	Default
`nav.back`	Back
`nav.next`	Next
`nav.submit`	Get my quote
`nav.stepOf`	Step {0} of {1}
`common.restart`	Start a new application
`common.retry`	Try again
`pages.customer`	Your details
`pages.cover`	Cover
`pages.finalQuote`	Your price
`quote.eyebrow`	This is your quote
`quote.buyCta`	Buy your policy
`quote.editCta`	Edit my answers
`payment.heading`	Payment
`dd.heading`	Bank details
`bound.heading`	Thank you for your purchase
`decision.declinedTitle`	Let's talk it through
`decision.referredTitle`	Referred to an underwriter
`handedOff.heading`	We'll take it from here

The groups are common, spinners, nav, pages, address, options, partner, cover, quote, market, handoffThanks, decision, checkpoint, dd, payment, bound, wrapUp, handedOff, validation, persist, errors and a11y (screen reader announcements). Ask Subcontext if you need the full list of keys.

Stuck, or something missing?

Get in touch and a person on the team will help.