one-theme.html

<!doctype html>
<!--
  One theme for every embed: a single theme object, passed to the webchat, a
  quote form, a form guide on an enquiry form and a lead form, so they share
  your colours, font and text size. Change mode to 'dark' to see them all go
  dark together.

  Replace YOUR_AGENT_ID, qfk_YOUR_KEY, YOUR_PRODUCT_SLUG, YOUR_JOURNEY_SLUG and
  lfk_YOUR_KEY with your own values (the comments below say where to find
  each), and the colours and font with your own.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>One theme for every embed</title>
  <!-- Your website's font. The embeds use whatever fonts the page has loaded. -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap">
  <style>
    body { font-family: Figtree, system-ui, sans-serif; max-width: 48rem; margin: 2rem auto; padding: 0 1rem; }
    label { display: block; margin: 1rem 0 .25rem; }
  </style>
</head>
<body>
  <h1>One theme for every embed</h1>

  <h2>Get a quote</h2>
  <div id="quote"></div>

  <h2>Ask us a question</h2>
  <form id="enquiry">
    <label for="cover">How much cover do you need?</label>
    <input id="cover" name="cover_amount" type="number">
    <label for="term">For how many years?</label>
    <input id="term" name="term_years" type="number">
  </form>

  <h2>Ask for a call back</h2>
  <div id="callback"></div>

  <!-- None of these tags carry their own settings, so each embed waits for the code below. -->
  <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',      // your main brand colour
      accentColor: '#E07A5F',       // buttons and highlights
      backgroundColor: '#FFFDF8',   // behind the chat, the quote form, the help panel and the lead form
      fontFamily: 'Figtree, system-ui, sans-serif',
      fontSize: 15,                 // pixels
      mode: 'light'                 // or 'dark'
    }

    // Your agent's id. In the dashboard, go to Agents and open your agent.
    // The id is in the address bar.
    const agentId = 'YOUR_AGENT_ID'

    SubcontextWebchat.init({ agentId, theme })

    Subcontext.Quote.init({
      container: '#quote',
      // The quote form's key (starts qfk_) is the data-key in "The code to paste" on the
      // quote form's page in the dashboard (CRM, Campaigns, open the campaign, Lead capture tab).
      key: 'qfk_YOUR_KEY',
      // The product and journey are the data-product and data-journey in the same code.
      productSlug: 'YOUR_PRODUCT_SLUG',
      journeySlug: 'YOUR_JOURNEY_SLUG',
      theme
    })

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

    Subcontext.leadform.init({
      // The lead form's key (starts lfk_). Find it in Subcontext on the lead form's Install tab.
      key: 'lfk_YOUR_KEY',
      target: '#callback',
      theme
    })
  </script>
</body>
</html>