02-programmatic.html

<!doctype html>
<!--
  Starting the quote form from your own code with Subcontext.Quote.init(),
  with the main options and the methods on the widget it returns. Use this
  when the form is drawn after the page loads, or when your page needs to
  control it.

  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: from your own code</title>
</head>
<body>
  <h1>From your own code</h1>
  <p>
    <code>Subcontext.Quote.init()</code> with the main options, and the methods on the widget it returns.
  </p>

  <p>
    <button type="button" id="disable">Hide (disable)</button>
    <button type="button" id="enable">Show (enable)</button>
    <button type="button" id="restart">Start again</button>
    <button type="button" id="destroy">Remove</button>
    <button type="button" id="start">Start a new widget</button>
  </p>
  <p>Script version: <code id="version"></code></p>

  <div id="quote"></div>
  <!-- The "Start a new application" link is drawn here instead of under the form. -->
  <div id="quote-footer"></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.
    function log(text) {
      const item = document.createElement('li')
      item.textContent = new Date().toLocaleTimeString() + '  ' + text
      document.getElementById('log').prepend(item)
    }

    let widget = null

    function startQuoteForm() {
      widget = 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.
        // They must be the quote form's own, or saving the first page is refused.
        productSlug: 'YOUR_PRODUCT_SLUG',
        journeySlug: 'YOUR_JOURNEY_SLUG',
        // Optional: another of the journey's presentations. Leave it out for the usual one.
        // presentationSlug: 'YOUR_PRESENTATION_SLUG',
        autofocus: true,                    // put the cursor in the first field once drawn
        footerContainer: '#quote-footer',
        onLoad: () => log('onLoad'),
        onError: (error) => log('onError: ' + error.code + ' ' + error.message)
      })
    }

    document.getElementById('version').textContent = Subcontext.Quote.version
    startQuoteForm()

    // Hides the form and closes its live connection; answers are kept.
    document.getElementById('disable').addEventListener('click', () => widget && widget.disable())
    // Shows it again where it left off.
    document.getElementById('enable').addEventListener('click', () => widget && widget.enable())
    // Forgets the application in progress and goes back to the first page.
    document.getElementById('restart').addEventListener('click', () => widget && widget.restartApplication())
    // Empties the container and closes the connection.
    document.getElementById('destroy').addEventListener('click', () => {
      if (widget) widget.destroy()
      widget = null
    })
    document.getElementById('start').addEventListener('click', () => {
      if (widget) widget.destroy()
      startQuoteForm()
    })
  </script>
</body>
</html>