Theming the embeds

Every Subcontext embed that draws on your page takes the same theme object. Write your brand colours and font once and pass the same object to each embed, and they match each other and your website. WebMCP draws nothing on the page, so it has no theme.

The theme object#

const theme = {
  primaryColor: '#0F3D3E',
  accentColor: '#E07A5F',
  backgroundColor: '#FFFDF8',
  fontFamily: "Figtree, system-ui, sans-serif",
  fontSize: 15,
  mode: 'light'
}

Every key is optional.

Colours can be written any way CSS allows: hex (#0F3D3E or #0f3), rgb(), hsl() or a colour name. Where an embed needs a lighter shade (a focus outline or a soft shadow), it mixes one from your colour.

theme: 'dark' is short for theme: { mode: 'dark' }, and 'light' likewise. Keys an embed doesn't know are ignored, and so is a key with the wrong type (a fontSize that isn't a positive number, or a mode that isn't 'light' or 'dark').

In a script tag or element, data-theme takes the same object written as JSON, or light or dark, on the form guide, lead form and Nurture:

data-theme='{"primaryColor":"#0F3D3E","fontFamily":"Figtree, sans-serif","mode":"dark"}'

The webchat's data-theme takes only light or dark, and the quote form's theme is JavaScript only.

Main colour and accent#

primaryColor is your main brand colour and accentColor is for buttons and highlights. Each embed with buttons, focus outlines, selected options or links colours them with accentColor, and with primaryColor when there's no accentColor. primaryColor also colours each embed's main branded part, such as the webchat's header or the lead form's headings. In dark mode the lead form's and Nurture's headings stay in the light text instead (see Dark mode).

The quote form is the one exception. Its buttons, sliders and progress use primaryColor, and accentColor is their hover shade and the price.

What each embed does with it#

Where a cell names accentColor, the embed uses primaryColor there when there's no accentColor (see Main colour and accent).

The quote form can open the webchat and the form guide for you, through its webchat and formGuide options. They get the quote form's theme, so one theme on the quote form styles all three. Anything you set in webchat or formGuide wins over what they get from the quote form: a key in their own theme, or a separate option of the same name such as webchat.primaryColor.

Subcontext.Quote.init({
  container: '#quote',
  key: 'qfk_YOUR_KEY',
  productSlug: 'YOUR_PRODUCT_SLUG',
  journeySlug: 'YOUR_JOURNEY_SLUG',
  theme: { primaryColor: '#0F3D3E', accentColor: '#E07A5F', mode: 'dark' },
  webchat: { src: 'https://js.subcontext.com/webchat-latest.js', supported: true },
  formGuide: { theme: { mode: 'light' } }
})

Here the chat is dark like the form, and the form guide's panel stays light.

Which setting wins#

Each embed follows the same order, from strongest to weakest:

1. The embed's own keys, such as the form guide's background or the lead form's accent (see Each embed's own keys).
2. The keys in theme.
3. The separate options with the same name, such as primaryColor or data-primary-color outside the theme.
4. The embed's defaults.

So a theme with backgroundColor: '#FFFDF8' and background: '#F6FBFF' gives the form guide's panel #F6FBFF, and the other embeds #FFFDF8.

The lead form has two more layers. What you set on your page (in init() or on the form's element) wins over the design on the campaign page, and your own CSS wins over all of it (see its styling).

Dark mode#

mode: 'dark' switches each embed to light text on a dark background. The dark background is #1f1d1a, unless you give a backgroundColor.

• Webchat: the panel, messages and typing box turn dark.
• Form guide: the panel, messages, typing box and buttons turn dark. Panel keys you set (such as background or inputBorder) stay as you set them.
• Lead form: the text turns light and the form gets a dark background with padding. The headings stay in the light text rather than primaryColor, since a dark brand colour is hard to read there. To colour them anyway, set --sclf-heading in your own CSS (see its styling). With mode: 'light' the text is dark, for a light form on a dark page. Without a mode, the form takes your page's text colour.
• Nurture: the pop-up or docked panel turns dark, and its headings stay in the light text rather than primaryColor. Without a primaryColor or accentColor, its buttons turn light with dark text.
• Quote form: the card, text, fields, options and buttons turn dark, and focus outlines get stronger. Without a card (showHeader and showProgress both false), the dark background goes behind the form itself. A form with a variant keeps that design's colours. Each form on the page has its own mode, so one can be dark and another light.

Dark mode doesn't follow the visitor's device setting by itself. To follow it, pick the mode before you start the embeds:

const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
const theme = { primaryColor: '#0F3D3E', mode: dark ? 'dark' : 'light' }

Fonts#

The embeds don't load fonts. Load your font on the page as you normally would, with a <link> to a font service or your own @font-face rules, and name it in fontFamily. The embeds can use any font your page has loaded. End the list with a font every device has, such as system-ui, sans-serif, for the moment before your font arrives.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap">

If your website has a content security policy, it must allow the font's stylesheet and files as well as Subcontext. For Google Fonts, add:

• style-src https://fonts.googleapis.com
• font-src https://fonts.gstatic.com

For fonts on your own website, font-src 'self' is enough. The rest of what each embed needs is in its troubleshooting guide, and in If your website has a content security policy.

Each embed's own keys and CSS hooks#

The shared keys cover colours, font, text size and mode. Each embed has more settings of its own:

• Webchat: position, title, and a framed design with its own palette (variant: 'branded' and brand). See Webchat options.
• Quote form: displayFont for the big headings, and a framed design (variant: 'branded' and brand). See Look and layout.
• Form guide: the panel keys heading, background, border, margin, inputBackground, inputBorder, inputPadding, buttonBackground and buttonColor, which go in the same theme object. See Form guide theme.
• Lead form: accent, radius, layout and font in the same theme object, CSS custom properties (--sclf-accent, --sclf-bg and more) and classes for your own CSS. See Lead form styling.
• Nurture: buttonColor and buttonTextColor, as separate options or in the same theme object. See Nurture layout and look.

One theme for every embed#

Define the theme once and pass it to each embed's init(). This page has the webchat, a quote form, a form guide on an enquiry form and a lead form, all in the same colours and font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap">

<div id="quote"></div>
<form id="enquiry">...</form>
<div id="callback"></div>

<script src="https://js.subcontext.com/webchat-latest.js"></script>
<script src="https://js.subcontext.com/quoteform-latest.js"></script>
<script src="https://js.subcontext.com/formguide-latest.js"></script>
<script src="https://js.subcontext.com/leadform-latest.js"></script>
<script>
  const theme = {
    primaryColor: '#0F3D3E',
    accentColor: '#E07A5F',
    backgroundColor: '#FFFDF8',
    fontFamily: 'Figtree, system-ui, sans-serif',
    fontSize: 15,
    mode: 'light'
  }

  SubcontextWebchat.init({ agentId: 'YOUR_AGENT_ID', theme })

  Subcontext.Quote.init({
    container: '#quote',
    key: 'qfk_YOUR_KEY',
    productSlug: 'YOUR_PRODUCT_SLUG',
    journeySlug: 'YOUR_JOURNEY_SLUG',
    theme
  })

  SubcontextFormGuide.attach({ container: document.getElementById('enquiry'), agentId: 'YOUR_AGENT_ID', theme })

  Subcontext.leadform.init({ key: 'lfk_YOUR_KEY', target: '#callback', theme })
</script>

Nurture runs inside your portal or CRM rather than your website. Pass it the same object:

SubcontextNurture.init({ integrationKey: 'YOUR_WIDGET_KEY', firmId: 'YOUR_FIRM_ID', theme })

The complete page, with comments saying where to find each value:

• one-theme.html

  One theme object passed to the webchat, a quote form, a form guide and a lead form, so they all share your colours and font.

  View and copy Download