05-events.html

<!doctype html>
<!--
  Following the visitor through the journey: every callback the quote form
  calls, written to a log on the page (hook your analytics or page effects
  onto them instead). The form starts switched off (enabled: false), so
  nothing loads until the visitor presses "Get a quote".

  Replace qfk_YOUR_KEY, YOUR_PRODUCT_SLUG and YOUR_JOURNEY_SLUG with your own
  values (the comments in the script say where to find them).
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quote form: events</title>
</head>
<body>
  <h1>Events</h1>

  <p><button type="button" id="get-a-quote">Get a quote</button></p>
  <div id="quote"></div>

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

  <script src="https://js.subcontext.com/quoteform-latest.js"></script>
  <script>
    // Adds a line to the log above. On your website, send these to your analytics instead.
    function log(label, detail) {
      const item = document.createElement('li')
      item.textContent = new Date().toLocaleTimeString() + '  ' + label + (detail === undefined ? '' : '  ' + JSON.stringify(detail))
      document.getElementById('log').prepend(item)
    }

    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',

      // Check the options now; draw nothing (and call nothing) until enable().
      enabled: false,

      // The first page (or a quote opened from a ?quote_id= link) has been drawn.
      onLoad: () => log('onLoad'),

      // The visitor finished a page and moved on. stageType is the page they left:
      // customer, soft-identity, cover, questions, quote-checkpoint, interstitial, ...
      onStageComplete: (stageType, data) =>
        log('onStageComplete', { stageType: stageType, stagePosition: data.stagePosition, town: data.town }),

      // A price was given. Amounts are in pence.
      onQuote: (quote) => log('onQuote', {
        id: quote.id,
        reference: quote.reference,
        monthly: quote.total_premium_monthly_pence,
        currency: quote.currency_code
      }),

      // Underwriting declined or postponed it, or referred it to an underwriter.
      onDecline: (executions) => log('onDecline', executions.map((e) => e.decline_reasons)),
      onReferred: (executions) => log('onReferred', executions.map((e) => e.referral_reasons)),

      // Paid for and in place.
      onBound: (policy) => log('onBound', {
        policy_number: policy.policy_number,
        commencement_date: policy.commencement_date
      }),

      // "Start a new application" finished clearing the form.
      onNewApplication: () => log('onNewApplication'),

      // Anything the form couldn't recover from. Errors from Subcontext carry status and code.
      onError: (error) => log('onError', { status: error.status, code: error.code, message: error.message })
    })

    document.getElementById('get-a-quote').addEventListener('click', () => {
      // The global methods drive the most recent init()'s widget.
      Subcontext.Quote.enable()
      log('enable()')
    })

    // Not a callback. The webchat sends this when its assistant starts an application,
    // and the quote form takes it over. Your page can listen for it too.
    window.addEventListener('subcontext:application-ready', (event) =>
      log('subcontext:application-ready', { id: event.detail.id }))
  </script>
</body>
</html>