04-prefill-and-provenance.html

<!doctype html>
<!--
  Filling in what you already know, and where the visit came from.

  Customer details you hold (a signed-in visitor) go in initialCustomer.
  Answers go in initialValues, keyed by the journey's question keys; the cover
  amount (in pence) and term (in years) are __sumAssured and __term.

  The form records provenance itself. It sends the page address (with its utm_*
  and click id parameters), referrer, title, locale and time zone when it
  starts an application.

  Replace qfk_YOUR_KEY, YOUR_PRODUCT_SLUG and YOUR_JOURNEY_SLUG with your own
  values, and the example visitor with the details your website holds.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quote form: prefill and provenance</title>
</head>
<body>
  <h1>Prefill and provenance</h1>

  <p>Open this page as if from a campaign link (the parameters are recorded with the quote, so you can see where it came from):</p>
  <ul>
    <li><a href="?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=spring">From an email: utm_source=newsletter, utm_medium=email, utm_campaign=spring</a></li>
    <li><a href="?utm_source=google&amp;utm_medium=cpc&amp;gclid=TEST123&amp;cover=150000&amp;term=20">From an ad, asking for £150,000 over 20 years (term journeys)</a></li>
    <li><a href="?fresh=1">Start a new application, forgetting the one this tab was working on</a></li>
  </ul>

  <div id="quote"></div>

  <script src="https://js.subcontext.com/quoteform-latest.js"></script>
  <script>
    const params = new URLSearchParams(window.location.search)

    // Someone your site already knows. Keys are the customer fields' names;
    // the date of birth is dd/mm/yyyy, as the visitor would type it.
    const signedInVisitor = {
      first_name: 'Sam',
      last_name: 'Taylor',
      email: 'sam@example.com',
      phone_number: '07700 900123',
      dob: '14/03/1988',
      postal_code: 'SW1A 1AA'
    }

    // Answers from your own landing page, here read from ?cover= and ?term= in the address.
    // Cover is in pence, term in years. Other answers use the journey's question keys,
    // e.g. { smoker: 'no' }.
    const initialValues = {}
    if (params.get('cover')) initialValues.__sumAssured = Number(params.get('cover')) * 100
    if (params.get('term')) initialValues.__term = Number(params.get('term'))

    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',
      initialCustomer: signedInVisitor,
      initialValues: initialValues,
      // true: don't pick up the application this tab started earlier; begin a new one.
      fresh: params.get('fresh') === '1'
    })
  </script>
</body>
</html>