Lifecycle Events API

Getting Started

To use the AskAva Lifecycle Events API, you must first have loaded the AskAva API. The Lifecycle Events API is "global", so it can be used with either the bootstrap or the embed script on your page. Directions on how to load these scripts would have come with the instructions on loading a CTA or an embedded form.

Note: It doesn't matter if either of these scripts are loaded more than once

---

Lifecycle Events

A variety of events will be triggered throughout the lifecycle of the app. You may attach "event listeners" to these via the Lifecycle Events API, so that you can fire your own actions when an event occurs.

The available events are:

• widgetOpened: The consumer opened the modal (engaged with a CTA), or an embedded form loaded on the page

• widgetClosed: The consumer closed the modal (does not fire for embedded forms)

• userEngaged: The consumer interacted with the form (changed inputs)

• partialLeadSubmit: The consumer completed a portion of the app and their existing information was saved

• creditToolSubmit: The consumer submitted their PII in order to retrieve their credit score

• creditAppSubmit: The consumer filled out and submitted the additional information for a "Credit App"

• tradeToolSubmit: The consumer submitted their PII & Vehicle Information in order to retrieve a KBB trade-in value for their vehicle

• creditReportReceived: The consumer successfully received their credit report

Attaching Event Listeners

You will need to create a function that will utilize the Lifecycle Events API to attach event listeners to the events listed above. Attaching the event listeners is done with the askAva.events() method on the AskAva API.

You may create this function within a different <script> tag on your page:

<script>
  function registerEvents() {
    askAva.events({
      widgetOpened: () => {
        console.log("Widget Opened");
      },
      widgetClosed: () => {
        console.log("Widget Closed");
      },
      userEngaged: () => {
          console.log("User engaged");
      },

      creditToolSubmit: () => {
        console.log("Credit Tool Submitted");
      },
      tradeToolSubmit: () => {
        console.log("Trade Tool Submitted");
      },
      creditAppSubmit: () => {
        console.log("Credit App Submitted");
      },

      partialLeadSubmit: () => {
        console.log("Partial Credit Lead Submitted");
      },

      creditReportReceived: () => {
        console.log("Credit Report Received");
      },
    })
  }
</script>

Defining OnLoad Function

The AskAva API must have been successfully loaded before Lifecycle Event listeners can be attached. To ensure it is available, you can attach an onload function using one of three different methods:

The global askAva object

<script>
  window.askAva = (
     window.askAva || {}
  );
  window.askAva.onload = registerEvents;
</script>
<script
  src="https://assets.askava.ai/v2/api.js?widgetId=<your-widget-id>"
  type="application/javascript"
  async
  defer
></script>

onload query parameter

When the api script is added with a <script> tag, you can use the onload query parameter to register an onload function:

<script
  src="https://assets.askava.ai/v2/api.js?widgetId=<your-widget-id>&onload=registerEvents"
  type="application/javascript"
  async
  defer
></script>

avaOnload Attribute

The AskAva API script (api.js) will look for a custom attribute on the loading <script> tag. This can be used if that loading <script> tag is inserted on the page dynamically:

<script>
  (function() {
    const sc = document.createElement('script');
    sc.type = "application/javascript";
    sc.src = "https://assets.askava.ai/v2/api.js?widgetId=<your-widget-id>";

    // This attaches the function reference created earlier
    sc.avaOnload = registerEvents;
    document.head.appendChild(sc);
  })()
</script>

Complete Examples

Including the AskAva API statically

<script>
  function registerEvents() {
    askAva.events({
      widgetOpened: () => {
        console.log("Widget Opened");
      },
      widgetClosed: () => {
        console.log("Widget Closed");
      },
      creditToolSubmit: () => {
        console.log("Credit Tool Submitted");
      },
      tradeToolSubmit: () => {
        console.log("Trade Tool Submitted");
      },
      creditReportReceived: () => {
        console.log("Credit Report Received");
      },
      creditAppSubmit: () => {
        console.log("Credit App Submitted");
      },
      partialLeadSubmit: () => {
        console.log("Partial Credit Lead Submitted");
      },      
    })
  }
</script>
<script
  src="https://assets.askava.ai/v1/bootstrap.js?widgetId=<your-widget-id>&onload=registerEvents"
  type="application/javascript"
  async
  defer
></script>

Including the AskAva API dynamically

<script>
  (function() {
    function registerEvents() {
      askAva.events({
        widgetOpened: () => {
          console.log("Widget Opened");
        },
        widgetClosed: () => {
          console.log("Widget Closed");
        },
        creditToolSubmit: () => {
          console.log("Credit Tool Submitted");
        },
        tradeToolSubmit: () => {
          console.log("Trade Tool Submitted");
        },
        creditReportReceived: () => {
          console.log("Credit Report Received");
        },
        creditAppSubmit: () => {
          console.log("Credit App Submitted");
        },
        partialLeadSubmit: () => {
          console.log("Partial Credit Lead Submitted");
        },        
      })
    }

    window.askAva = (window.askAva || {});
    window.askAva.onload = registerEvents;

    const sc = document.createElement('script');
    sc.type = "application/javascript";
    sc.src = "https://assets.askava.ai/v2/api.js?widgetId=<your-widget-id>";
    document.head.appendChild(sc);
  })()
</script>