Using Appcues with AngularJS

Angular apps are what we call single-page apps (SPAs). They only trigger a full page load when they are first loaded. Otherwise, navigating across pages in your app doesn't trigger a page load, which means that Appcues doesn't know when the page has changed. Obviously this causes problems for content targeted by URL.

Enter the Appcues.start() call.

You can call the  Appcues.start() function to tell Appcues when you're on a new page/view. This causes Appcues to look at the current page and user properties and check if there's any content that should be shown. So ideally in an Angular app you'll call Appcues.start() any time there's a navigation event or new view.

What does this look like in Angular? Well, if you're using  the angular ui-router, then you may be tempted to use the $viewContentLoaded event, since it seems like it would fire after the state has changed and you're on a new "page" in your app. However, this event actually fires before the URL has been updated. You'll end up with Appcues checking the previous page's URL, not the one you just navigated to. One solution we've found is to make use of the $locationChangeSuccess event, which is "broadcasted after a URL was changed," according to the docs. This will ensure that the URL that Appcues checks is the correct (i.e. current) one.

To debug your Appcues.start call for single page apps, publish something using "Just Me" targeting and see if the flow shows automatically. If you need to refresh the page in order for Appcues to appear, that indicates it's in the wrong place. Let us know and we can take a look for you.

Here's an example!

// For example, in your App.js:
  angular.module('yourapp').run(function($rootScope, $window) {
   $rootScope.$on('$locationChangeSuccess', function() {
       if ($window.Appcues) {
          $window.Appcues.start();
        }
     });
   });

Still need help? Contact Us Contact Us