×

Embedding screens and 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. 

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 (live-embed-icon.png).
  4. Click your desired service or, to embed on your own site, click Custom Embed.
  5. Click Copy.

live-embed.gif

To see the specific requirements or steps for each service, navigate below the Copy button and click the How do I use this? link.

how-do-i-use-this-service.png

Note: Some services may require you to refresh the page before any changes sync to the embedded version. 

Embedding a full mobile prototype

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

Note: 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.

embed-entire-prototype.gif

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.

 

Getting Started: Working Together (
)

Embedding screens and prototypes

Prev