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
  • Docs home
  • Installation & Developers
  • Troubleshooting

Using Appcues with Turbolinks

Modifying your Appcues implementation to be compatible with applications using Turbo framework

Updated at June 26th, 2024

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.

  • Installation & Developers
    Installing Appcues Web Installing Appcues Mobile API & Data Troubleshooting Extras
  • Web Experiences
    Building Web Experiences Targeting Studio Customization & Styling Use Cases Troubleshooting FAQ
  • Mobile Experiences
    Installation & Overview Building Mobile Experiences Mobile Analytics & Integrations Troubleshooting
  • Workflows
    Building & Configuration Use Cases Workflow Analytics and Integrations
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Best Practices Use Cases Pro Tips Product-led Growth
  • Integrations
    Integration Documents Use Cases Extras
  • System Status
    System Status & Incidents
+ More

Table of Contents

Appcues + Turbolinks Implementation Adjusting Appcues script settings Create Appcues permanent container Create an Appcues page callback Using a newer Turbolinks library?

Appcues + Turbolinks Implementation

With SDK version 4.53.0 and later Appcues now has a path forward for web applications running Turbolinks frameworks. This document will contain the steps needed in order to properly implement Appcues with this framework.

Unsure what version your Appcues SDK is on?

Open your browser's console and run Appcues.settings() to find out!

 

Adjusting Appcues script settings

Including the customContainer property in the window.AppcuesSettings object will allow you to specify where on your web application Appcues content will load. Subsequently, this allows you to establish a permanent container that Turbolinks will ignore so your Appcues experiences will not be interrupted.

<script>
  window.AppcuesSettings = {
    customContainer: '.appcues-wrapper'
  };
</script>
<script src="//fast.appcues.com/ACCOUNT_ID.js"></script>

Create Appcues permanent container

In your web application, you will need to create a permanent home for where your Appcues content container will live.  In our example, we use a div at the end of the application page body.

<div data-turbolinks-permanent>
  <div class='appcues-wrapper'></div>
</div>

Create an Appcues page callback

You will want to create a callback that's initialized after Appcues identification to trigger the Appcues.page call on every turbolinks load call if you're not looking at a cached "preview" of the page:

document.addEventListener("turbolinks:load", function (e) {
    if (!document.documentElement.hasAttribute("data-turbolinks-preview")) {
      window.Appcues.page();
    }
});

Using a newer Turbolinks library?

A similar implementation process applies to the latest version of Turbo, just replace "turbolinks" with "turbo" in the property and event names.

<div data-turbo-permanent>
  <div class='appcues-wrapper'></div>
</div>
document.addEventListener("turbo:load", function (e) {
    if (!document.documentElement.hasAttribute("data-turbo-preview")) {
      window.Appcues.page();
    }
});
 
turbolinks appcues

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Using Appcues with iFrames
  • Installation Testing / Debugging
  • Testing Appcues on a Wrapped Webapp
  • Troubleshooting the Chrome Extension & Builder
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