Appcues Compatibility

This article covers what is needed for using Appcues effectively, as well as common conflicts Appcues can run into.

In order to use Appcues, you need three things:

1. A web application that your users can access using a web browser or a mobile application on a supported framework.
2. The ability to install a snippet of code into that application.
3. Google Chrome (for authoring). Don't worry, we support a wide range of browsers for your end users (see more below).

Most applications will fit these requirements, but keep reading if you have additional questions or concerns.

Network Connectivity

Your application must be accessible over the internet by a URL. If you're not sure, you can use isUp.me to test your site out.

Browser Support

Creating Appcues flows:

Google Chrome is the only browser we support for authoring (or creating) your Appcues content. To create your flows, you'll need to use the  Appcues Chrome Extension, which will allow you to create flows directly on top of your application.

If you already have the Chrome extension and are ready to get started building flows, check out some of our other helpful documentation.

Viewing Appcues flows:

Our Javascript SDK is designed to cover every modern browser, as well as the more popular legacy browsers.

• Most versions of Chrome, Safari, Firefox and Edge
• Internet Explorer 11

Special exceptions:

• Checklists and slideout backdrops are not supported on IE11
• Hard and Soft Spotlight are not supported in both Safari and IE11
• Pin experiences are not supported on IE11

Mobile Support

You can find all relevant information about our requirements to use Appcues on mobile apps in our documentation: Mobile SDK.

Current mobile application framework compatibility includes:

• Native iOS
• Native Android
• React Native
• Flutter
• Ionic

Special Limitations

In addition to the above, Appcues does not work particularly well on web applications:

• that are composed of many iframes. Not sure what an iframe is? Learn more here!
• using SVG elements. This affects tooltip and hotspot placement, as Appcues cannot attach either one of these step patterns to SVG elements or any elements nested inside those SVG elements. This can also affect Click-to-track events that track clicks on elements that overlap with SVGs.
• that rely on elements in a "shadow dom". This limits features that target specific elements like tooltips, hotspots, pins and CTT, but not modals or slideouts. One common example of a technology that uses a shadow dom is Salesforce's Lightning Web Components.
• that use Turbolinks or its successor, Turbo, for navigation.
• where the URL does not change as the user navigates
• built on Magento platform or built using Polymer or use prototype.js
• is a progressive webapp or desktop application
• that have the CSS zoom property applied. This is a non-standard CSS rule, and Appcues is unable to detect elements using this rule.
  that use Material UI (MUI) Select
  • Instead, enable native prop select. Otherwise, the Material UI component won’t let the click event access and work with other libraries. However, the same behavior doesn’t apply for Select’s items, so events will work on items as expected even without the native prop enabled, they just won’t work on the Select’s wrapper.
• When you’re trying to build a flow or event on a dialog that uses  Focus trap APIs, inputs in the builder can’t be focused, making the builder unusable. This is due to the API’s aggressive focus handling, which is considered an accessibility feature. Note that setting those configs affects accessibility on your site (not Appcues content) since focus will no longer be trapped within the dialog in question
  • for Material-UI’s unstable TrapFocus API, it could be overridden on your site by setting disableEnforceFocus to true.
  • for MS Fabric’s (now also named as Fluent-UI) Accessible Popup props, it could be overridden on your site by setting isClickableOutsideFocusTrap to true and forceFocusInsideTrap to false.
• Placing Inline Pins within a target element or a parent container having the CSS property of overflow:hidden.
  • The CSS property of overflow:hidden sets any overflow of that container to be clipped. This affects the inline pin because it’s nested within that container.
  • To avoid this place the Pin outside the container that uses this property OR use the Overlayed embedding option.