Skip to main content
All CollectionsBecome a ProContent
Live Embeds
Live Embeds
Updated over 4 months ago

Embeddable Content

Enhance your Stories with dynamic, interactive content through Live Embeds. ScreenSpace allows you to seamlessly integrate a variety of live content types, making your Stories more engaging and informative. Here’s what you can embed:

Videos

Embed videos from popular platforms like YouTube, Vimeo, and Wistia. Add depth to your Stories with live-streamed or on-demand video content that keeps your audience engaged.

Supported Video Platforms

YouTube: Video testimonials, brand videos

Vimeo: High-quality brand films, promotional videos

Loom: Product walkthroughs, video tutorials

Vidyard: Sales demos, personalized video messages

Wistia: Marketing videos, educational content

Sequel: Interactive webinars, virtual events

Demo Environments and Prototypes

Bring your designs and prototypes to life by embedding content from tools like Figma and Framer or an ungated demo environment. Share live, interactive previews of your product directly within your Stories.

Supported Prototype Platforms

Figma: Collaborative design prototypes, UI mockups

Sketch: Design assets, wireframes

Custom Sandboxes: Any sandbox that exists on your approved embed domain is automatically supported

Using Figma

Carefully follow these steps to embed your Figma prototype inside a Story:

1. Grab the Embed Code

  1. Navigate to Your Figma Project

  2. Click Share Prototype

  3. Click Get Embed Code

  4. Copy everything inside the src

  5. Paste that URL inside your browser

  6. Copy the new URL generated inside your browser

  7. Paste as a Live Embed inside your ScreenSpace Scene

2. Remove the Figma UI
Append the URL with the following parameters: &scale-to-width=&chrome=0&hide-ui=1&embed_host=share&chrome=DOCUMENTATION
​
​3. Verify Link Structure

Your final link should follow this format: https://www.figma.com/proto/FILE_ID/FILE_NAME?embed_host=share&kind=proto&node-id=NODE_ID&page-id=PAGE_ID&starting-point-node-id=STARTING_POINT_NODE_ID&t=TIMESTAMP&scale-to-width=&chrome=0&hide-ui=1&embed_host=share&chrome=DOCUMENTATION

4. Change the Background Color

  1. Navigate to the Figma Editor

  2. Select the Prototype tab in the Right Panel

  3. Change Background Color to match your Story's background to blend it seamlessly

Collaboration Tools

Integrate collaboration tools such as digital deal rooms from Miro, Dock, and Fluint. Facilitate real-time collaboration and keep your audience engaged with interactive, shared workspaces.

Supported Collaboration Tools

Miro: Interactive brainstorming sessions, visual project planning

Dock: Client collaboration spaces, onboarding documents

Fluint: Seamless team communication, document sharing

Flowla: Interactive sales documents, buyer journey tracking

Productivity & Documents

Embed live documents and worksheets from platforms like Google Docs, Monday, and Miro. Share real-time updates and collaborate with your audience directly within your Stories.

Supported Document Platforms

PDFs: Reports, brochures, ebooks

Google Sheets: Data charts, collaborative spreadsheets

Google Docs: Embedded documents, collaborative writing

Notion: Project documentation, team wikis

Airtable: Data management, interactive databases

Asana: Project tracking, task management

ClickUp: Project management, productivity

Monday: Work management, team collaboration

Jira: Issue tracking, agile project management

Confluence: Team collaboration, documentation

Presentation Platforms

Embed presentations from platforms like Pitch or Google Slides into ScreenSpace to make your Stories more engaging and visually appealing. It also ensures that your audience can interact with your content seamlessly and access updates in real-time.

Supported Presentation Platforms

Google Slides: Presentation decks, collaborative slideshows

Pitch: Team presentations, pitch decks

PowerPoint: Business presentations, training slides

Lead Capture Forms & Scheduling Links

Easily integrate lead capture forms and scheduling links into your Stories to gather valuable audience information and book demos. Embed forms from platforms like Typeform, Chili Piper, or HubSpot to streamline your lead generation process.

Supported CRM & Scheduling Platforms

HubSpot: CRM data, marketing analytics

Marketo: Marketing automation, lead generation

Pardot: B2B marketing automation, lead nurturing

Typeform: Interactive forms, surveys

Google Forms: Simple forms, questionnaires

Calendly: Meeting scheduling, appointment booking

Chili Piper: Meeting scheduling, sales engagement

Outreach: Sales automation, customer engagement

Vimcal: Calendar management, scheduling

HubSpot: CRM data, marketing analytics

For Growth customers with HubSpot, Salesforce, Pardot or Marketo we recommend using native forms.

How to Use Live Embeds

YouTube, Vimeo, and Wistia

Available on all plans.

  1. Enable Embedding: Allowing embedding for your video inside your video platform's settings.

  2. Copy the video URL: Grab the public URL for your video.

  3. Navigate to your Scene: Open the Scene you intend to add your live embed to. We recommend using a Media scene for videos.

  4. Paste into ScreenSpace

    1. Hero Content

      1. Replace Media: Insert the URL into your Story via the Webpage tab inside the Upload Media tool.

      2. Activate Interactivity: Use the Interactivity toggle to enable interactivity.

      3. Adjust The Design: Use the Resolution and Ratio sliders to dial in the UI scale and aspect ratio. Use the Scale under the Media Appearance tool to adjust the overall size of your video.

    2. StoryPoints

      1. Add Video Embed Block: Click the Plus button and select Embed Video

      2. Paste Link: Paste your video link inside the provided field

Other Embeddable Content

Available on Engage and Growth plans.

  1. Choose your Content: Decide what type of content you want to embed.

  2. Enable Embedding: Make sure the URL you intend to embed has permission to be embedded on story.screenspace.io and app.screenspace.io.

  3. Copy the URL: Get the URL from the source platform. Not the full iFrame code – you're looking for the original URL or src link extracted from the iFrame code.

  4. Navigate to your Scene: Open the Scene you intend to add your live embed to. We recommend using a Media Scene for interactive content – unless you are embedding a live prototype, in which a Product Scene may be more desirable.

  5. Paste into ScreenSpace: Insert the URL into your Story via the Webpage tab inside the Upload Media tool.

  6. Activate Interactivity: Use the Interactivity toggle to enable interactivity – if desired.

  7. Adjust The Design: Use the Resolution and Ratio sliders to dial in the UI scale and aspect ratio. Use the Scale under the Media Appearance tool to adjust the overall size of your media.

Taking Embeds Further

Make your Live Embeds even more powerful with advanced features that enhance personalization and interactivity. Here’s how you can take your embedded content to the next level:

Personalizing Embedded Content

Customize your embedded content by including variables inside the embed URL. This allows you to deliver personalized experiences based on user data or specific parameters. For example, you can tailor a video message or pass dynamic UTMs to an embedded form.

This feature is available to Growth plans only.

How to Personalize Embeds

  1. Create Variables: Wrap any text inside your URL with brackets {} to turn it into a variable.
    ​

    Example: https://www.myembeddedurl.com/?name={first_name}
    ​

  2. Set the Variable: You can either pre-set the variable inside your Share Link, or dynamically set the variable via your Story's UTM parameter.

Click here to learn more about variables.

User Actions

Enhance interactivity by triggering actions inside your Story based on user interactions within the embedded content. For instance, a form submission within an embedded Typeform can trigger the Story to advance to another Scene or open a URL.

How to Use User Actions (No Code)

  1. Set the Redirect URL: Have the desired action inside your embed – like a button click – redirect to https://www.screenspace.io/trigger

  2. Set the Trigger: Click Add User Actions and select Custom from the dropdown inside the Hero Media tool

  3. Define the postMessage: Enter "Trigger" inside the postMessage field.

  4. Integrate and Test: Test the interactions to ensure seamless integration and functionality.

How to Use User Actions (Advanced)

  1. Trigger postMessage: Add the following to an event inside the iFrame – like a button click – Reference:
    ​
    ​window.parent.postMessage(' [ Custom Message ] ','https://story.screenspace.io'))
    ​

  2. Set the Trigger: Click Add User Actions and select Custom from the dropdown inside the Hero Media tool

  3. Define the postMessage: Enter your postMessage's [ Custom Message ] into the ScreenSpace field.

  4. Integrate and Test: Test the interactions to ensure seamless integration and functionality.

With Live Embeds, you can create rich, interactive Stories that captivate your audience and provide real-time, valuable insights. Start embedding today and make your Stories more dynamic than ever!

Troubleshooting

Error: This webpage contains headers that restrict embedding

This is a common error for websites that have tight restrictions. To resolve, simply set the 'X-Frame-Options' header to 'null' or add "ALLOW-FROM=https://story.screenspace.io"
​
​Click here for more guidance on X-Frame-Options.

Error: Not a Valid URL

Confirm the URL is accurate and embedding permissions are enabled.
​

The embedded screen is too small

Use the Resolution slider to adjust the size of the embedded UI
​

My embed is not interactive

Confirm the Interactivity toggle is ticked on inside the Hero Media tool

The User Actions trigger isn't working

Confirm the postMessage is being sent. You can use the postMessage Debugger Chrome Extension for testing. When active, it will print any postMessages that are sent. Ensure the message matches what you entered inside ScreenSpace.

Figma prototype has black borders

Add the following to the end of your embedded URL and adjust the Resolution and Ratio sliders to fit: ...&scaling=min-zoom&scale-to-width=&chrome=0&hide-ui=1&embed_host=share&chrome=DOCUMENTATION
​

Did this answer your question?