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

  • Getting Started

    • 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