Adding the script
Add these two tags to the<head> of your application layout:
YOUR_WORKSPACE_ID with your workspace ID. You can copy the exact snippet with your ID pre-filled from Workspace Settings > Domains in the Userplane dashboard.
Place the tags as early as possible in <head>. The Userplane script can only capture console logs and network requests that occur after it initializes — placing it early gives you the most complete recording context.
Rails’
javascript_include_tag helper accepts full URLs (<%= javascript_include_tag "https://cdn.userplane.io/embed/script.js" %>), but a plain <script> tag is clearer for external CDN resources and avoids the asset pipeline.Page-specific loading
To load Userplane only on certain pages, use thecontent_for / yield pattern:
Turbo compatibility
Rails 7+ includes Turbo by default, which performs partial page replacements instead of full reloads. The Userplane CDN script placed in<head> loads on the initial page visit and persists across Turbo navigations — no special configuration is needed.
If you initialize custom JavaScript alongside Userplane, listen for turbo:load rather than DOMContentLoaded:
URL parameters
When a customer opens a recording link, Userplane appendsuserplane-token and userplane-action to the URL. If your Rails app redirects unauthenticated users (e.g. via Devise), carry the userplane- prefixed parameters through the redirect:
Sensitive data
Adddata-userplane-blur to any element you want blurred in recordings. See Sensitive Data Redaction for the full reference.
Content Security Policy
If your Rails app uses the built-in CSP DSL, add the Userplane CDN domain:Example app
A complete Ruby on Rails example is available at github.com/wizenheimer/userplane-sdk-examples/tree/main/examples/rails.
| Variable | Description |
|---|---|
USERPLANE_WORKSPACE_ID | Your Userplane workspace ID |
Related articles
- Installation — CDN script placement, CSP, iframes, and browser support.
- Domain Verification Guide — verify domain ownership after installing the script.
- Sensitive Data Redaction — blur sensitive content in recordings.
- Web SDK — programmatic SDK for apps with a build step.