Contents x
    Embedding screens & prototypes
    • 28 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Embedding screens & prototypes

    • Updated on 28 Feb 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    This article provides answers for InVision V6

    To confirm your version, check the upper right corner of your dashboard. On V7? Check out this article instead.

    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 Documents 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.
    Embed.gif
    Note: 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.

    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 Documents 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_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.

    Was this article helpful?
    What's Next