03-branding.html

<!doctype html>
<!--
  Branding: your portal's colours, your own button text, which corner the
  button floats in, a button in your own toolbar, the shared theme object
  (colours, font and dark mode, as the other Subcontext embeds take it), and
  the widget's wording in your portal's voice. Picking a theme calls init() again with the new
  options, which restarts the widget with them.

  Replace YOUR_WIDGET_KEY, YOUR_FIRM_ID and SIGNED_PASS_FROM_YOUR_SERVER, and
  the adviser and client details. The colours and wording are yours to
  change. On the tag the same look is data-container, data-button-label,
  data-primary-color, data-button-color, data-button-text-color and
  data-position, and the theme object is data-theme written as JSON; the
  wording (strings) needs JavaScript.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Nurture: branding</title>
  <style>
    .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid #e5e7eb; border-radius: 8px; margin: 1rem 0; }
  </style>
</head>
<body>
  <h1>Branding</h1>

  <p>
    <label>Theme
      <select id="theme">
        <option value="teal">Teal, button in the toolbar, custom text</option>
        <option value="plum">Plum on gold, floating bottom-left</option>
        <option value="dark">The shared theme object, in dark mode</option>
        <option value="default">Subcontext defaults, floating bottom-right</option>
      </select>
    </label>
  </p>

  <div class="toolbar">
    <strong>Jane Example</strong>
    <span id="nurture-slot"></span>
  </div>

  <script id="nurture-embed-script" src="https://js.subcontext.com/nurture-latest.js"></script>
  <script>
    var themes = {
      teal: {
        container: '#nurture-slot', // the button sits in the toolbar above
        buttonLabel: 'Follow up with AI',
        primaryColor: '#0F766E',
        buttonColor: '#0F766E',
        buttonTextColor: '#FFFFFF',
        strings: {
          modalTitle: 'Follow up with {name}',
          summaryLabel: 'What did you talk about?',
          generate: 'Write the message',
          sentTitle: 'Follow-up started'
        }
      },
      plum: {
        position: 'bottom-left',
        buttonLabel: 'AI follow-up',
        primaryColor: '#5B2A86',
        buttonColor: '#F2C14E',
        buttonTextColor: '#2B1340'
      },
      dark: {
        container: '#nurture-slot',
        // The theme object every Subcontext embed takes. accentColor colours the
        // buttons and highlights, primaryColor the headings. Your page must
        // already load the font. The widget's own buttonColor and
        // buttonTextColor still win over it.
        theme: {
          primaryColor: '#9FD8CB',
          accentColor: '#E07A5F',
          backgroundColor: '#1F2A2B',
          fontFamily: 'Georgia, serif',
          fontSize: 15,
          mode: 'dark'
        }
      },
      default: {}
    }

    function start(theme) {
      SubcontextNurture.init(Object.assign({
        // Your widget key (starts nwk_), provided by Subcontext.
        integrationKey: 'YOUR_WIDGET_KEY',
        // A firm id Subcontext has set up for you.
        firmId: 'YOUR_FIRM_ID',
        // A pass your server creates for this firm and adviser with the signing
        // key Subcontext provides (see
        // https://subcontext.com/developers/embeds/nurture/signed-identity).
        identityToken: 'SIGNED_PASS_FROM_YOUR_SERVER',
        advisor: { name: 'Sam Example', externalId: 'ADVISER-7' },
        // Test messages are sent for real. Put your own email address here.
        consumer: { firstName: 'Jane', lastName: 'Example', email: 'you@your-firm.example' }
      }, themes[theme]))
    }

    var select = document.getElementById('theme')
    select.addEventListener('change', function () { start(select.value) })
    start(select.value)
  </script>
</body>
</html>