Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.

Embedding Screens & Prototypes

When embedding prototype screens into websites or tools outside of InVision, there are two options:

  • Embed single screens into various workflow tools with our Live Embed feature.
  • Embed entire mobile prototypes into an external environment.

Currently, there is not a way to embed Studio screens or prototypes.

Embedding screens with Live Embed

Live Embed allows you to bring live screens into your existing workflows. Embed your prototype screens into tools like Slack and Jira. Any time you update your prototype in InVision, the embedded version will also update with those changes.

To use Live Embed:

  1. Sign in to your InVision account and navigate to the Projects page.
  2. Open your prototype, hover over the desired screen, and click the ••• (more) icon.
  3. Click the Live Embed icon (This image shows the Live Embed icon that users click in the InVision UI to complete step 5 of these instructions.).
  4. Click your desired service or, to embed on your own site, click Custom Embed.
  5. Click Copy.
This GIF demonstrates the steps for getting a Live Embed code for an InVision prototype.

Some services may require you to refresh the page before any changes sync to the embedded version. To see the specific requirements or steps for each service, navigate below the Copy button and click the How do I use this? link.

Embedding a full mobile prototype

You can embed an entire mobile prototype within an external environment.

There is currently no way to embed a full desktop prototype in an external environment.

To embed a mobile prototype:

  1. Sign in to your InVision account and navigate to the Projects page.
  2. Open your prototype and, in the menu bar below the prototype name, click the ••• (more) icon.
  3. In the drop-down menu, click </> Embed Prototype.
  4. Choose whether you’d like to use Embedly or the iframe embed code.
  5. To copy the embed code to your clipboard, click Copy Code.

You can now paste that embed code into your external environment.

This GIF demonstrates the steps for getting a Live Embed code for an InVision mobile protoype.

Your ability to embed code depends on the settings and permissions of your external site. InVision Support can only help generate the embed code. If you experience issues while trying to embed the prototype, contact the manager of your external site.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

Learn about InVision DSM, the design system platform for collaborative teams. Find the plan that's right for you and your team and set up your DSM organization.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo