02-programmatic.html

<!doctype html>
<!--
  Starting from JavaScript: the script tag has no key, so the widget waits
  until the page calls SubcontextNurture.init(). Each button below calls one
  method, and the log shows what it returned plus the widget's events as
  they happen. Pressing init() again restarts the widget with the options
  (try it with the box unticked).

  Replace YOUR_WIDGET_KEY, YOUR_FIRM_ID and SIGNED_PASS_FROM_YOUR_SERVER, and
  the adviser and client details.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Nurture: start from JavaScript</title>
</head>
<body>
  <h1>Starting from JavaScript</h1>

  <p>
    <label><input type="checkbox" id="dormant" checked> Start hidden (<code>enabled: false</code>), then call <code>enable()</code> to show it</label>
  </p>
  <p>
    <button data-call="init">init()</button>
    <button data-call="enable">enable()</button>
    <button data-call="open">open()</button>
    <button data-call="close">close()</button>
    <button data-call="disable">disable()</button>
    <button data-call="destroy">destroy()</button>
    <button data-call="version">version</button>
  </p>

  <p>The widget's button appears here once it is showing:</p>
  <div id="nurture-slot"></div>
  <p>This client has no mobile number, so the form asks for one if the firm can send by SMS or WhatsApp.</p>

  <h2>Log</h2>
  <ul id="log"></ul>

  <!-- No data-integration-key on the tag, so the script loads and waits for init(). -->
  <script id="nurture-embed-script" src="https://js.subcontext.com/nurture-latest.js"></script>
  <script>
    function log(label, detail) {
      var item = document.createElement('li')
      item.textContent = label + (detail === undefined ? '' : '  ' + JSON.stringify(detail))
      document.getElementById('log').prepend(item)
    }

    // Every event the widget fires. You can pass onReady, onDrafted, onSent,
    // onRefused and onError to init() instead.
    ;['ready', 'drafted', 'sent', 'refused', 'error'].forEach(function (name) {
      window.addEventListener('subcontext:nurture:' + name, function (event) { log('event ' + name, event.detail) })
    })

    function start() {
      return 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', email: 'sam@your-firm.example' },
        consumer: {
          firstName: 'Jane',
          lastName: 'Example',
          // Test messages are sent for real. Put your own address here.
          email: 'you@your-firm.example',
          externalId: 'CLIENT-123'
        },
        container: '#nurture-slot', // an inline button here instead of a floating one
        enabled: !document.getElementById('dormant').checked,
        debug: true // more detail in the browser console
      })
    }

    var calls = {
      init: start,
      enable: function () { return SubcontextNurture.enable() },
      open: function () { return SubcontextNurture.open() },
      close: function () { return SubcontextNurture.close() },
      disable: function () { return SubcontextNurture.disable() },
      destroy: function () { return SubcontextNurture.destroy() },
      version: function () { return SubcontextNurture.version }
    }

    document.querySelectorAll('[data-call]').forEach(function (button) {
      button.addEventListener('click', function () {
        var name = button.dataset.call
        log(name === 'version' ? 'version' : name + '()', calls[name]())
      })
    })
  </script>
</body>
</html>