quote-form-with-your-token.html

<!doctype html>
<!--
  The quote form, started with access tokens from your own server instead of
  a quote form key.

  Your server holds a browser API application's client id and secret and
  never shows the secret to the page. The page asks your server for a token
  (token-server.mjs, next to this page, is a small working example) and passes
  it to the quote form through getToken. The form asks again shortly before the
  token runs out, and once more if Subcontext answers 401.

  Replace YOUR_TOKEN_ENDPOINT, YOUR_PRODUCT_SLUG and YOUR_JOURNEY_SLUG with your
  own values. The comments in the script say where to find them.

  The page must be on one of the API application's allowed origins.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quote form with your own token</title>
  <style>
    body { font: 16px/1.55 system-ui, sans-serif; max-width: 760px; margin: 2rem auto; padding: 0 16px; }
    #status { color: #555; font-size: 14px; }
  </style>
</head>
<body>
  <h1>Get a quote</h1>
  <p id="status">Loading the quote form...</p>

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

  <script src="https://js.subcontext.com/quoteform-latest.js"></script>
  <script>
    // Your token endpoint, a route on your own server that returns { access_token, expires_in }.
    // On the same website as this page, a relative address like '/subcontext-token' works.
    // Running token-server.mjs on your computer, it's 'http://localhost:8081/subcontext-token'.
    const TOKEN_ENDPOINT = 'https://YOUR_TOKEN_ENDPOINT.example.com/subcontext-token'

    // Asks your server for a token. The quote form calls this when it needs one.
    function getToken() {
      return fetch(TOKEN_ENDPOINT, { cache: 'no-store' }).then((response) => {
        if (!response.ok) throw new Error('Could not get a token from your server (' + response.status + ')')
        return response.json() // { access_token, expires_in }
      })
    }

    Subcontext.Quote.init({
      container: '#quote',
      // The product and journey to quote. Any live product and journey of your organisation.
      // Their slugs are on the product's page and the journey's page in the dashboard (Products).
      productSlug: 'YOUR_PRODUCT_SLUG',
      journeySlug: 'YOUR_JOURNEY_SLUG',
      getToken: getToken,
      onLoad: () => { document.getElementById('status').textContent = 'The quote form is ready.' },
      onError: (error) => {
        document.getElementById('status').textContent = 'The quote form hit a problem: ' + error.message
        console.warn('quote form error', error.status, error.code, error.message)
      }
    })
  </script>
</body>
</html>