The Appcues Javascript SDK provides an on function that allows you to write custom code that can be fired when particular Appcues-related events occur in the browser.

Function Definition

on(eventName, callbackFn, [context])

The on function takes three parameters (one optional):

1. eventName: String

The name of the event to listen for. This can be any of our native events, including:

• flow_started
• flow_completed
• flow_skipped
• step_started
• step_completed
• step_skipped
• step_interacted
• form_submitted
• form_field_submitted
• nps_survey_started
• any other events found in our  Appcues Events Reference or Flow Events Reference
• all

Custom click-to-track events can also be sent as long as you have the Events Broadcaster feature activated on your account. When creating a listener for a specific click-to-track event, simply use the name of the event as in this code:

Appcues.on('My Custom Event', function(e) {console.log(e)})

The "all" value will register your listener function for all Appcues client-side events. For a full reference of our client-side events, please check out our Appcues Events Reference and Client-side Events Reference.

2. callbackFn: Function

The function to be called when the specified event occurs.

When registering for a specific event, this function is passed the following parameters:

• event: Object: the event object — see the Appcues Events Reference and Client-side Events Reference for a full definition of the event objects.

When registering for all events by using the "all" value, mentioned above, this function is passed the following parameters:

• eventName: String: the specific event name for this particular call (one of the values in the list above)
• event: Object: the event object — see the Appcues Events Reference and Client-side Events Reference for a full definition of the event objects.

A simple example to listen for all Appcues events and log them in the console might look like this:

Appcues.on("all", function(e, a) {
    console.log(e); // logs the event name
    console.log(a); // logs the event object
})

3. context: Object  

(optional, not commonly used): the Javascript context within which to call the callback function. This would be used to specify a this context within the callback function.

Example Usage

Let's say I want to hit a REST endpoint on one of my servers with the form field response that originates from within an Appcues flow. For simplicity, we'll assume a GET request and use the standard Fetch API.

Appcues.on("form_field_submitted", function(eventObject) {

    // We'll narrow this down to a particular step, so we're only handling
    // the submission for a particular form field.
    if (eventObject.stepId === "-L7634-Gsu4Q1HfEG-8-") {
       const responseValue = eventObject.interaction.value;
       const encodedResponseData = encodeURIComponent(responseValue);
       const url = "https://example.com/form?data=" + encodedResponseData; 
       fetch(url)
         .then(function(response) {
           if(response.ok) {
              console.log("Successfully sent a form response");
          }
          else {
              console.log("Problem sending form response", response.status);
          }
         })
         .catch(function(error) {
          console.log("Error sending form response", error);
         });
  }
});

This example is mainly to illustrate how you would register for and handle an Appcues event. The way you send this data to your server (or do whatever you'd like with the event data) is up to you! Have fun with it!