US English (US)
ES Spanish

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

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

  • Appcues Certifications & Training
  • Integration Hub
  • Contact Us
English (US)
US English (US)
ES Spanish
  • Docs home
  • Installation & Developers
  • API & Data

Working with Client-Side Appcues Events (Developer)

Learn how to use the Appcues Javascript SDK to write custom code that can be fired when particular Appcues-related events occur in the browser.

Updated at February 14th, 2025

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Home

  • Installation & Developers

    • Web Experiences

      • Mobile Experiences

        • Workflows

          • Analytics & Data

            • Account Management

              • Best Practices

                • Integrations

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

                  appcues client-side appcues.on event listener

                  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

                  Appcues Integration Hub User Onboarding Software Feature Adoption Software NPS & Surveys Announcements Insights Mobile Adoption

                  Company

                  About
                  Careers

                  Support

                  Developer Docs Contact

                  Resources

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

                  Follow us

                  Facebook icon Twitter icon grey Linkedin icon Instagram icon
                  © 2022 Appcues. All rights reserved.
                  Security Terms of Service Privacy Policy

                  Knowledge Base Software powered by Helpjuice

                  Expand