Interactivity Studio

How to integrate Interactivity Studio with Webflow

Interactivity Studio transforms static images into interactive experiences with clickable hotspots and content overlays. You can integrate using the Interactivity Studio app for a UI-based workflow, or embed code directly using Code Embed elements for more control.

Note: Domain whitelisting is mandatory before interactive elements function. Connect your domain in the Interactivity Studio account settings first — embedded elements won't work without this step, and no error messages will indicate the problem. Test thoroughly before production deployment.

Use the Interactivity Studio app

The Webflow Apps marketplace app provides a UI-based option for designers.

Install the app, then connect your Webflow domain in Interactivity Studio account settings. Create interactive images by uploading images and defining clickable regions. Once you've generated SmartLinks, log into Interactivity Studio through the Webflow plugin, insert your images, and publish your site.

This method includes:

• App-based integration: Access Interactivity Studio through the official Webflow app  
• Domain whitelisting requirement: Your domain must be connected for elements to function  
• SmartLink management: Each interactive image gets a unique URL  
• Publishing workflow: Interactive elements only appear after publishing, not in preview

Without domain whitelisting, embedded images won't display functionality and no error messages will indicate the problem.

Embed code directly in Webflow

Create your interactive image in Interactivity Studio and copy the embed code. In Webflow, add a Code Embed element and paste the code.

For site-wide availability, add the script to Site settings → Custom code → Footer code once, then use individual Code Embed elements for each image.

The implementation options include the following:

• Per-page embedding: Add embed code via Page settings → Custom code  
• Site-wide script with individual embeds: Install the core script once in the footer, place images with Code Embed elements  
• Component reusability: Save Code Embed elements as Webflow components for reuse  
• Character limits: 50,000 characters per custom code location

Interactivity Studio loads JavaScript and CSS files from interactivity.studio (connect.css, connect-interact.js, connect-bubbles.js) using preload directives and async loading to minimize render-blocking.

What you can build

Integrating Interactivity Studio with Webflow lets you create interactive visual experiences beyond standard image implementations.

• Product showcases with multiple hotspots: Single-image displays where users click regions to see specifications, pricing, or details — like a room setup with clickable hotspots on each furniture piece.  
• Annotated diagrams and educational content: Interactive images where clicking designated areas reveals additional information, documentation links, or contextual details.  
• Visual navigation systems: Image-based navigation where regions link to pages or trigger content displays — like an aerial property photo with clickable buildings revealing amenities and booking info.  
• Before/after comparisons: Comparative visuals where clicking specific areas reveals detailed change information, materials used, and cost breakdowns.