Initialize the Nav Emdedded CTA Widget

The Nav CTA widget is built as a JavaScript module that can be dynamically loaded onto your site. It's agnostic of any JavaScript framework so you can integrate the widget with your company's framework of choice.

Here's an example for how to initialize the widget using vanilla JavaScript:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="nav-cta-container">Loading...</div>

    <script type="text/javascript">
      /**
       * The element you want to render the Nav CTA widget into
       */
      const element = document.getElementById('nav-cta-container')

      /**
       * As described in the previous section "Requesting a Nav auth token"
       */
      async function getAuthToken() {
        const res = await fetch('/your-auth-token-url')
        const json = await res.json()
        return json.authToken
      }

      const env = 'sandbox' // OR 'production'

      /**
       * The contentSpace and partner should be provided to you by your Nav account rep
       */
      const contentSpace = 'your_content_space'
      const partner = 'yourpartnerdomain'

      import('https://unpkg.com/@navinc/cta-widget@1?module').then((module) => {
        const NavCtaWidget = module.default

        const NavCtaWidgetInstance = NavCtaWidget({
          element,
          getAuthToken,
          env,
          contentSpace,
          partner,
        })

        /**
         * Subscribe to the `cta` event which will be called once the widget is initialized (`.init()` below)
         * and CTA data for you user is ready
         */
        NavCtaWidgetInstance.on('cta', ({ cta }) => {
          if (element)
            element.innerHTML = `
            <img
                class="Cta-logo"
                src="https://assets.nav.com/design-assets/logos/Nav-Logo-110x60.png"
                alt="Logo of Nav Inc."
            />
            <div class="Cta-body-wrapper">
                <img class="Cta-image" src="${cta.imageURL}" alt="${cta.imageAltText}" />
                <h2 class="Cta-title">${cta.title}</h2>
                <p class="Cta-body">${cta.body}</p>
            </div>
            ${
              cta.additionalDetails
                ? `
            <div class="Cta-details">
                <div><span class="Cta-details-header">Amount:</span><br/><span>${cta.additionalDetails.fundingAmount}</span></div>
                <div><span class="Cta-details-header">Cost:</span><br/><span>${cta.additionalDetails.cost}</span></div>
                <div><span class="Cta-details-header">Speed:</span><br/><span>${cta.additionalDetails.fundingSpeed}</span></div>
            </div>
            `
                : ''
            }
            ${/* MAKE SURE TO ADD THE `data-nav-cta-button` ATTRIBUTE ON THE BUTTON WHICH RENDERS THE CTA LINKTEXT */}
            ${/* THIS ALLOWS THE WIDGET TO PROPERLY INTERCEPT CLICKS TO PRESENT YOUR USERS WITH THE CORRECT OPTIONS */}
            <button class="Cta-button" data-nav-cta-button>${cta.linkText}</button>
            `
        })

        NavCtaWidgetInstance.init()
      })
    </script>
  </body>
</html>

To see an example of how to integrate the Nav CTA widget using React, checkout our demo site integration on GitHub.

References

JavaScript module that can be dynamically loaded

Initialize the Nav Emdedded CTA Widget

References​

References