03-theming.html

<!--
  Changing the look: each attach() has its own panel style, icon and colours,
  so two forms on one page can look different. Theme values are plain CSS.

  With the paste-in snippet, the same options go in attributes instead (JSON
  in single quotes):

  <script id="formguide-embed-script" src="https://js.subcontext.com/formguide-latest.js"
    data-agent-id="YOUR_AGENT_ID"
    data-mode="inline" data-primary-color="#2f93f0" data-field-icon="cloud"
    data-theme='{"heading":"Explain \"{field}\" to me","background":"#f6fbff"}'></script>

  Replace YOUR_AGENT_ID (twice, in the script near the bottom) with your
  agent's id.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Form guide: changing the look</title>
  <style>
    section { border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
    #about-you { background: #eaf5ff; }
    #your-cover { background: #f5f3ff; }
  </style>
</head>
<body>
  <h1>Changing the look</h1>
  <p>The first form opens its help inside the page, below the question, with its own heading, a cloud icon and blue colours. The second opens small floating panels, with a lightbulb icon and purple colours.</p>

  <section id="about-you">
    <h2>About you (inline, cloud)</h2>
    <form aria-label="About you">
      <p>
        <label for="dob">Date of birth</label><br>
        <input id="dob" name="date_of_birth" type="date">
      </p>
      <p>
        <label for="height">Height in centimetres</label><br>
        <input id="height" name="height_cm" type="number" min="100" max="230">
      </p>
    </form>
  </section>

  <section id="your-cover">
    <h2>Your cover (popover, lightbulb)</h2>
    <form aria-label="Your cover">
      <p>
        <label for="cover-type">Type of cover</label><br>
        <select id="cover-type" name="cover_type">
          <option value="">Choose one</option>
          <option value="level">Level term</option>
          <option value="decreasing">Decreasing term</option>
        </select>
      </p>
      <p>
        <label for="critical">Add critical illness cover?</label><br>
        <select id="critical" name="critical_illness">
          <option value="">Choose one</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select>
      </p>
    </form>
  </section>

  <p>Icons you can choose: <code>help-circle</code> (default), <code>info</code>, <code>sparkles</code>, <code>message-circle</code>, <code>lightbulb</code>, <code>bot</code>, <code>wand</code>, <code>zap</code>, <code>ai</code>, <code>cloud</code>.</p>

  <!-- No id on this tag, so the script waits for attach(). -->
  <script src="https://js.subcontext.com/formguide-latest.js"></script>
  <script>
    window.SubcontextFormGuide.attach({
      container: document.getElementById('about-you'),
      // YOUR_AGENT_ID: your agent's id. In the Subcontext dashboard open
      // Agents, your agent, Channels, Form guide. It's in the snippet there.
      agentId:   'YOUR_AGENT_ID',
      mode:      'inline',
      fieldIcon: 'cloud',
      theme: {
        heading:          'Explain "{field}" to me',
        background:       '#f6fbff',
        border:           '1px solid #cfe6fb',
        margin:           '6px 0 20px',
        inputBackground:  '#ffffff',
        inputBorder:      '1px solid #bcdcf7',
        inputPadding:     '9px 12px',
        buttonBackground: '#2f93f0',
        buttonColor:      '#ffffff',
        primaryColor:     '#2f93f0'
      }
    }).catch(function (error) {
      console.error(error.message)
    })

    window.SubcontextFormGuide.attach({
      container: document.getElementById('your-cover'),
      // YOUR_AGENT_ID: the same agent id as above (or a different agent).
      agentId:   'YOUR_AGENT_ID',
      mode:      'popover',
      fieldIcon: 'lightbulb',
      primaryColor: '#7c3aed',
      theme: { background: '#faf5ff', border: '1px solid #ddd6fe', buttonBackground: '#7c3aed' }
    }).catch(function (error) {
      console.error(error.message)
    })
  </script>
</body>
</html>