Working with client-side Appcues events (technical)

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):

  • eventName: String: the name of the event to listen for This can be any of the following event names:
    • flow_started
    • flow_completed
    • flow_skipped
    • step_started
    • step_completed
    • step_skipped
    • step_interacted
    • form_submitted
    • form_field_submitted
    • all

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  Client-side Events Reference.

  • 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:
    • 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 Client-side Events Reference for a full definition of the event objects
  • 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.

<code>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!

Still need help? Contact Us Contact Us