Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Installation & Developers
  • API & Data

Working with Client-Side Appcues Events (Developer)

Updated at November 26th, 2022

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Function Definition Example Usage

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 Client-side 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!

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Events Overview
  • Appcues Installation Overview
  • HTTP API (Developer)
  • FAQ for Developers
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand