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 

Turbolinks Support

Appcues may be installed on web platforms utilizing Turbo or Turbolinks frameworks, for implementation instructions have a look at this document.

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!
• where the URL does not change as the user navigates
• built on Magento platform or built using Polymer or use prototype.js
• that are a progressive webapp or desktop application. Find more information about this here: Testing Appcues on a Wrapped Webapp.
• that has 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 or other select dropdown menus.
  • 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.
• In some cases, Tooltips or Hotspots cannot be automatically placed on elements that contain an SVG component in the Builder. However, manual placement is possible using a unique and stable selector that is not SVG-related.