05-portal-record-swap.html

<!doctype html>
<!--
  Switching client: a single-page portal with the widget docked in a side
  panel, open from the start. Picking a client calls setConsumer(), which
  drops anything in progress and starts the form again for the new client,
  with their call note and background, without reloading the page.

  Replace YOUR_WIDGET_KEY, YOUR_FIRM_ID and SIGNED_PASS_FROM_YOUR_SERVER. The
  client records are made up. In your portal they come from your own data.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Nurture: switching client</title>
  <style>
    .portal { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 900px) { .portal { grid-template-columns: 200px 1fr 420px; } }
    #records { list-style: none; margin: 0; padding: 0; }
    #records button[aria-current="true"] { font-weight: bold; }
    #nurture-panel { height: 640px; }
  </style>
</head>
<body>
  <h1>Switching client</h1>

  <div class="portal">
    <ul id="records"></ul>
    <section>
      <h2 id="record-name"></h2>
      <p id="record-note"></p>
    </section>
    <aside id="nurture-panel" aria-label="Nurture with AI"></aside>
  </div>

  <script id="nurture-embed-script" src="https://js.subcontext.com/nurture-latest.js"></script>
  <script>
    // The portal's client records, each with a client, and maybe a call note
    // and background. Test messages are sent for real. Put your own email
    // address in place of you@your-firm.example.
    var records = [
      {
        consumer: { firstName: 'Jane', lastName: 'Example', email: 'you@your-firm.example', phone: '07700 900841', externalId: 'CLIENT-1' },
        draftNote: 'Happy with the £250k level term quote; wants to talk it through with her partner first.',
        subcontext: { previousQuotes: [{ provider: 'Northbank Life', cover: 250000, termYears: 25, monthlyPremium: 18.42 }] }
      },
      {
        consumer: { firstName: 'John', lastName: 'Sample', email: 'you@your-firm.example', externalId: 'CLIENT-2' },
        draftNote: null, // no note: the form shows the reason and outcome menus
        subcontext: { existingCover: 'Decreasing term with another provider, ends 2031' }
      },
      {
        consumer: { firstName: 'Mei', lastName: 'Placeholder', externalId: 'CLIENT-3' }, // no contact details: the form asks
        draftNote: 'Self-employed, asked about income protection. Sending options over.',
        subcontext: null
      }
    ]

    function show(index) {
      var record = records[index]
      document.querySelectorAll('#records button').forEach(function (button, i) {
        button.setAttribute('aria-current', String(i === index))
      })
      document.getElementById('record-name').textContent = record.consumer.firstName + ' ' + record.consumer.lastName
      document.getElementById('record-note').textContent = 'Call note: ' + (record.draftNote || 'none')
    }

    records.forEach(function (record, index) {
      var button = document.createElement('button')
      button.textContent = record.consumer.firstName + ' ' + record.consumer.lastName
      button.addEventListener('click', function () {
        show(index)
        // Always pass the whole client. Any field you leave out is cleared.
        // undefined keeps the same adviser. In the extras, null clears a value.
        SubcontextNurture.setConsumer(record.consumer, undefined, {
          draftNote: record.draftNote,
          subcontext: record.subcontext
        })
      })
      var item = document.createElement('li')
      item.append(button)
      document.getElementById('records').append(item)
    })

    show(0)
    SubcontextNurture.init({
      // 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' },
      consumer: records[0].consumer,
      draftNote: records[0].draftNote,
      subcontext: records[0].subcontext,
      mode: 'docked',
      container: '#nurture-panel'
    })
  </script>
</body>
</html>