Skip to content
Autocorp.ai Docs

Usage Guidelines

CTA / Modal API

The bootstrap script exposes functionality in the host site that helps to control the askAva modal.

Using this API, you can wire up your own actions that can open/load the modal, or otherwise implement the features of this framework dynamically.

These functions may be accessed using the global askAva object.

Anywhere the bootstrap script is loaded, this object should be available to use. All you have to do is execute it like it is shown here.

Replace <api> with one of the Public AskAva API members listed below.

askAva.<api>

// or

window.askAva.<api>

Public AskAva API Members

Attaching Event Listeners

These functions will allow you to add click event listeners that will be used to open the modal:

addElement: (el: HTMLElement | string) => void
removeElement: (el: HTMLElement | string) => void

Parameter: (el: HTMLElement | string)

Required: true

Description: This may be the reference to a DOM node, or a valid element selector. For example, ".some-class" or #some-id. The default is to select an element by id. If you pass "some-id", it will select #some-id.

Opening and Closing the Modal

These are fairly simple, and do exactly what they say:

openModal: (options?: OpenModalOptions) => void

Tells the modal to open. This can be called from inside a click event listener that has been attached to a CTA, from any custom button you wish

  • OpenModalOptions: object
    • product: The product to open the app to. Defaults to creditTool
    • context: Provides context metadata to the app. The shape of the context per product will differ.
closeModal: () => void

This is the same function that the modal itself calls when it needs to close.

However, if this function is not called from within the modal, the state of the current app will be saved as-is until it is reopened or the host page is reloaded.

Loading CTA elements dynamically

loadCta: (el?: HTMLElement) => void

This works together with the CTA elements that are provided by Autocorp for launching askAva.

These elements have a specific structure, and are designed in a way that this API can understand so that their resources can be fetched correctly.

If you use this function, ensure that the el you pass to the function is one of those provided to you by Autocorp, or that you received from this portal.

If you call loadCta with no arguments, it trigger the initial CTA loading logic. It will look for all CTAs that exist on the page, and load them if they haven't been already.

Dynamically loading the AskAva API

If you wish to load the askAva object dynamically, you may construct and load the <script> element manually.

This may be desired if you use a JAMStack/SPA style website.

This information is useful if you want to be notified as soon as the script has been loaded, which is especially useful if you are loading the CTA elements dynamically.

Required <script> attributes:

src="https://assets.askava.ai/<version>/bootstrap.js?widgetId=<widgetId>"
  • <version>: This should correspond to the version of the CTA you are loading.
    • Current version: v2
  • <widgetId>: This will correspond to the dealer id you have been assigned in the Autocorp Lead System
    • Autocorp staff will provide this value, or you may retrieve it from the provided code snippets above

Optional <script> attributes:

  • data-onload: This should be a text value indicating the name of a function that is available on the window object. It will be called with no parameters when the API has completed loading, and is okay to use
    • This attribute will make it easier to load this API dynamically