The objective of this document is to provide guidance for testing Appcues on wrapped web applications, such as a Chromium or Electron-based desktop application.
Wrapped web applications are an edge case for Appcues and require extensive technical compatibility testing pre-purchase to confirm viability and uncover any potential challenges.
Here are our recommended steps for technical compatibility testing:

Installation

Appcues can be installed in your Chromium or Electron application via the same method as standard web applications.
Start by adding the javascript snippet available in your account: https://studio.appcues.com/settings/installation/guide/overview

The snippet should include the following:

• Core script: <script src="//fast.appcues.com/{{youraccountID}}.js"></script>
• An identify call with the unique user ID you associate to each end user
• A page call to tell Appcues when to reinitialize if your application does not reload when moving to a new view, route or page
• At least one user profile attribute and one event (client side if you’d like to use event triggering) to test targeting

Learn more about which user properties & events to send here.

Building

A key requirement of building Appcues content on top of any application is the use of our Chrome extension builder. To build on top of your Chromium or Electron application, you’ll need to open the app in a Chrome window, rather than building from the Desktop view.

We recommend building a modal followed by a tooltip to ensure Appcues will be able to find the CSS selectors used for tooltips when loaded within the wrapped web app version.

Testing

Once you’ve built a combination of the patterns above, it’s important to publish “live” and test a few key scenarios:

• Targeting content to show to specific users. We want to confirm that Appcues will be able to identify user profile attributes and events and only show content to users who are qualified to see a flow based on this information.
• Triggering content the moment an event occurs. Assuming you want to be able to leverage this functionality, rather than only collecting new data on a page load, testing this will tell us if Appcues is able to listen for events from your Chromium or Electron application in real time.
• Targeting content based on pages by targeting a flow that begins with a modal to a specific URL. If it appears on the correct page, test to see if it also shows up on any other pages. We’ve seen that some wrapped web apps have URLs loading behind the scenes for each page, so the content can still be targeted to specific URLs even though they are not visible to the end user. We want to test to find out if this is the case. If not, you’ll need to begin each flow with a tooltip or hotspot so that it will only show if a specific selector is visible to prevent flows from showing up on the wrong pages.
• Certain webview wrappers may have a stricter whitelist implementation that could impact visibility for Appcues content displayed to end users. If you are noticing certain environments (like a react-native-webview) fail to display flow content please update your originWhitelist to include the about: scheme like below:

  • originWhitelist={['http://', 'https://', 'about:']}

  • This problem occurs because some flow patterns utilize an iframe whose “address” is about:blank and may block our content if not explicitly allowed.