07-with-webchat.html

<!doctype html>
<!--
  The quote form with the webchat beside it. The form loads the chat itself
  (the webchat option), and the two share one application: whichever starts
  the quote, the other picks it up.

  Things to try:
  - Start the quote in the form, then ask the chat a question about it. The
    agent already knows the product and the page you're on.
  - Start in the chat instead ("I'd like a quote"). When the agent starts the
    application, the form takes it over, and the answers the agent records
    appear in the form's fields.

  Replace qfk_YOUR_KEY, YOUR_PRODUCT_SLUG, YOUR_JOURNEY_SLUG and YOUR_AGENT_ID
  with your own values (the comments in the script say where to find them).
  The agent's Web channel must be switched on, or the chat stays hidden.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quote form with the webchat</title>
</head>
<body>
  <h1>Get a quote, or ask us</h1>

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

  <h2>What happened</h2>
  <ol id="log"></ol>

  <script src="https://js.subcontext.com/quoteform-latest.js"></script>
  <script>
    // Adds a line to the list above, to show the form and the chat working together.
    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)
    }

    // The chat started an application, and the form is taking it over.
    window.addEventListener('subcontext:application-ready', (event) => {
      log('the chat started an application', { id: event.detail.id })
    })

    // One theme for both: the form passes it on to the chat it opens.
    const theme = {
      primaryColor: '#0F3D3E',
      accentColor: '#E07A5F',
      fontFamily: "Georgia, serif"
    }

    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',
      theme,
      // Passed to the chat conversation, so the agent knows where the visitor came from.
      chatContext: { page: 'Life cover landing page', campaign: 'spring-newsletter' },
      webchat: {
        src: 'https://js.subcontext.com/webchat-latest.js',
        supported: true,
        // Your agent's id: in the dashboard, go to Agents and open the agent. The id is in the
        // address bar, and in the snippet under Channels, Web, Configure.
        agentId: 'YOUR_AGENT_ID',
        title: 'Questions about your quote?',
        defaultOpen: false
      },
      onStageComplete: (stageType) => log('page finished', { stageType }),
      onQuote: (quote) => log('quoted', { reference: quote.reference, monthly_pence: quote.total_premium_monthly_pence }),
      onError: (error) => log('error', { message: error.message })
    })
  </script>
</body>
</html>