Skip to main content
All CollectionsBecome a ProShare
Embed Links
Embed Links
Updated over 2 months ago

Embed Links allow you to integrate your Stories directly into your website, apps, blogs, and more, creating a seamless and interactive experience for your audience. Perfect for onboarding, marketing, and educational content, Embed Links ensure your Stories are always accessible where your audience needs them most.

The best part? Once you embed your Story, you won’t have to touch it again, simply update the design and your embed will be updated automatically.

How to Embed your Story

Embedding your Story with ScreenSpace is quick and easy — follow this guide to get started.

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Toolbar on the right.

  3. Generate Primary Embed Link: If your Story has not yet been published, click the Publish Story button to generate your Primary Embed Link.

  4. Set your Domain: Enter the domain you wish to embed your Stories on. Each workspace is limited to one production and one staging domain.

  5. Personalize (Optional): Personalize the embed with specific lead info or adjust the starting point to embed a specific point in your Story.

  6. Customize the Design (Optional): Adjust the design options to dial in the look of your Story to seamlessly blend with your website. Learn more here.

  7. Embed Your Story: Click Copy Link to copy your embed code to the clipboard and paste it inside an Embed, Code, or HTML element. Typically labeled with a icon.

The Primary Embed Link is the default Embed Link for your Story and cannot be changed. Although it's the fastest way to embed your Story, we recommend creating unique Embed Links for each use-case so you can control access and segment analytics. Available on the Growth Plan.

How to Create a Custom Embed Link

Creating an Embed Link is easy and allows you to personalize the content, segment analytics, and control access. Follow this guide to generate and customize your unique Embed Link.

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Generate Embed Link: Click the Plus button in the sidebar to generate a unique link. Note: Your Story must be Published before you can create an Embed Link.

  4. Give it a Name: Give your Embed Link a name to help identify it in your analytics

  5. Personalize (Optional): Personalize the embed with specific lead info or adjust the starting point to embed a specific point in your Story.

  6. Customize the Design (Optional): Adjust the design options to dial in the look of your Story to seamlessly blend with your website. Learn more here.

  7. Embed Your Story: Click Copy Link to copy your embed code to the clipboard and paste it inside your web builder's Embed, Code, or HTML element. Typically labeled with a icon.

Enabling an Animated Start Screen

Overlay an animated button over your embedded Story to grab visitor’s attention, indicate interactivity, and provide guidance on how your audience should engage with your Story.

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Select Your Embed Link: Click the desired Embed Link in the sidebar.

  4. Enable the Start Screen: Open the Start Screen tab and click the Toggle.

  5. Adjust the Design: Adjust the text, colors and border radius to help your Button blend with your website UI.

  6. Save the Settings: Click Save Changes to save your settings.

Top Performing CTAs:

These CTAs are recommended for Stories that include a product tour. For other Story types, consider a CTA like "Interactive Case-Study" or "Interactive Roadmap" to indicate the experience is interactive.

  1. Take a tour

  2. Start a tour

  3. Product tour

  4. Try a demo

  5. See it in action

  6. Explore product

  7. See product

Customizing the Embed Settings

Tailor the appearance of your embedded Stories to blend seamlessly into your website. You can change the story alignment, font size, zoom, soften edges, and make the background transparent for a perfect fit.

Using Embed Link Settings (Live Embed)

The easiest way to customize your embeds is through the Embed Link settings. These settings are baked directly into the link itself, so you can make changes on the fly and all of your embeds will reflect the design changes automatically – no need to copy and paste your code every time. Here’s how to do it:

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Select Your Embed Link: Click the desired Embed Link in the sidebar.

  4. Customize the Options: Open the Options section and dial in the settings:

    • Story Alignment. Justify your Story to the left, right, or center to help position it around other text or content on your website.

    • Font Size. Slide the size to the right to respectively increase font size through out your Story. This does not affect Title Scenes or Title Objects which can be adjusted from inside the Visual Designer.

    • Zoom/Scale. This slider allows you to increase the overall size of your Story within the embed window. Ideal when embedding inside a small container.

    • Soften Edges. When zoomed in on a StoryPoint, other content may slide out of the embed window. Turn Soften Edges on to blur the edge and provide a more immersive experience.

    • Transparent BG. Turn this on to remove the Story background and allow your website's background to bleed through. Ideal for website with gradients or patterns.

  5. Save the Settings: Click Save Changes to save your embed settings.

Using Source Code Parameters (Static Embed)

src="https://story.screenspace.io/screenspace/c6c7a
​?camera_align=center&font_size=2&zoom=6&soften_edges=0&bg_alpha=1"


For more advanced customization, you can dynamically set the embed settings via the embed source code's parameters. This method offers greater flexibility and control on at the website level, however requires modifying the HTML code to make changes. Note: this will override any Embed Link settings using the process above.

Simply append the src URL with the following desired parameters:

  • Story Alignment: Add camera_align= with the parameters left right or center to change the alignment

  • Font Size: You can adjust the size of text using the font_size parameter followed by a number from 1-7

  • Zoom: Add zoom= with any number between 1-7 to dial in the overall size of your Story

  • Soften Edges: Add soften_edges=1 to the URL in your embed code to soften the edge of the frame when zooming in on StoryPoints

  • Transparent BG: Add bg_alpha=1 to remove the Story background and allow your website's background to bleed through.

By customizing the embed settings, you ensure your Story looks and feels like a natural part of your website, enhancing user experience and engagement.

Custom Embedding Options

ScreenSpace offers various embedding options to fit your specific needs. Here are detailed instructions and sample code for embedding your Story in different ways:

Inline

Embed your Story directly within the content of your webpage for a seamless user experience.

Instructions

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Select Your Embed Link: Click the desired Embed Link in the sidebar.

  4. Embed Your Story: Click Copy Link to copy your embed code to the clipboard and paste it inside an Embed, Code, or HTML element. Typically labeled with a icon.

  5. Customize the Link: In addition to the Design Settings options mentioned above, you can edit the following parameters to dial it in:

    • Height: Change height to adjust the overall size of your Story. We typically recommend 800px for the best size on desktop when width="100%". Be sure to adjust for mobile as well if you set a fixed height.

    • Border Radius: Adjust the border-radius size to match the design of your website

Code

<iframe src="{{YOUR EMBED URL}}" width="100%" height="100%" allow="clipboard-write" scrolling="no" style="min-height:400px;border:none;border-radius:10px;background:#ffffff"></iframe>

Full Screen

Create an immersive full-screen experience by embedding your Story to occupy the entire browser window.

Instructions

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Copy the Embed URL: Copy the src URL inside the provided Embed Link. Example: https://story.screenspace.io/screenspace/e_cf9e3369

  4. Customize The Embed Code: Replace {{YOUR EMBED URL}} with your src URL in the provided code below.

  5. Embed Your Story: Copy and paste the modified code below inside your web builder's Embed, Code, or HTML element. Typically labeled with a icon.

Code

<iframe src="{{YOUR EMBED URL}}" style="position:fixed; top:0; left:0; width:100%; height:100%; border:none; z-index:9999;" allowfullscreen></iframe>

Popup

Embed your Story behind a button that opens it in a pop-up window when clicked.

Instructions

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Copy the Embed URL: Copy the src URL inside the provided Embed Link. Example: https://story.screenspace.io/screenspace/e_cf9e3369

  4. Replace the Source: Change {{YOUR EMBED URL}} with your src URL in the provided code below.

  5. Customize Button Design: Modify the following button style properties to match your website’s design.

    • Button Color: background-color

    • Button Text Color: color

    • Button Border: border

    • Button Border Radius: border-radius

    • Button Padding: padding

    • Button Text: "Take a Tour"

  6. Embed Your Story: Copy and paste the modified code below inside your web builder's Embed, Code, or HTML element. Typically labeled with a icon.

Code

<button onclick="openModal()" style="background-color:#2C2D3F; color:white; border:none; border-radius:20px; padding:10px 20px; cursor:pointer;">Take a Tour</button>

<div id="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); backdrop-filter: blur(0); transition:backdrop-filter 0.5s; z-index:9999;">

<div style="width:90%; height:90%; margin:5% auto; background-color:#ffffff; border-radius:10px; position:relative;">

<iframe src="{{YOUR EMBED URL}}" width="100%" height="100%" allow="clipboard-write" scrolling="no" style="min-height:400px; border:none; border-radius:10px;"></iframe>

<div onclick="closeModal()" style="position:absolute; top:10px; right:10px; width:15px; height:15px; color:#000; text-align:center; line-height:15px; cursor:pointer; font-size:16px;">

<svg width="15" height="15" viewBox="0 0 30 30">

<line x1="5" y1="5" x2="25" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

<line x1="25" y1="5" x2="5" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

</svg>

</div>

</div>

</div>

<script>

function openModal() {

document.getElementById('modal').style.backdropFilter = 'blur(5px)';

setTimeout(function() {

document.getElementById('modal').style.display = 'block';

}, 500);

}

function closeModal() {

document.getElementById('modal').style.display = 'none';

document.getElementById('modal').style.backdropFilter = 'blur(0)';

}

</script>

Slider

Embed your Story behind a button that opens it in a sliding pop-up window from the side of the screen.

Instructions

  1. Navigate to Your Story: Open the Story you want to share.

  2. Launch the Share Modal: Click Share in the Tool Bar on the right.

  3. Copy the Embed URL: Copy the src URL inside the provided Embed Link. Example: https://story.screenspace.io/screenspace/e_cf9e3369

  4. Replace the Source: Change {{YOUR EMBED URL}} with your src URL in the provided code below.

  5. Customize Tab Design: Modify the following button style properties to match your website’s design.

    1. Tab Color: background-color

    2. Tab Text Color: color

    3. Tab Text: "Take a Tour"

  6. Embed Your Story: Copy and paste the modified code below inside your web builder's Embed, Code, or HTML element. Typically labeled with a icon.

Code (Right)

<div onclick="openSlideIn()" style="position:fixed; top:50%; right:0; width:150px; height:50px; background-color:#2C2D3F; color:white; text-align:center; line-height:45px; cursor:pointer; z-index:9999; transform:rotate(-90deg) translateY(-80%); transform-origin:top right; font-family:sans-serif; border-radius:5px;">Take a Tour</div>

<div id="slideInModal" style="position:fixed; top:0; right:-100%; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); backdrop-filter: blur(0); transition:right 0.5s, backdrop-filter 0.5s; z-index:9998;">

<div style="width:100%; height:100%; margin:auto; background-color:#ffffff; position:relative;">

<iframe src="{{YOUR EMBED URL}}" width="100%" height="100%" allow="clipboard-write" scrolling="no" style="min-height:400px; border:none; border-radius:10px;"></iframe>

<div onclick="closeSlideIn()" style="position:absolute; top:10px; right:10px; width:15px; height:15px; color:#000; text-align:center; line-height:15px; cursor:pointer; font-size:16px;">

<svg width="15" height="15" viewBox="0 0 30 30">

<line x1="5" y1="5" x2="25" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

<line x1="25" y1="5" x2="5" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

</svg>

</div>

</div>

</div>

<script>

function openSlideIn() {

document.getElementById('slideInModal').style.right = '0';

document.getElementById('slideInModal').style.backdropFilter = 'blur(5px)';

}

function closeSlideIn() {

document.getElementById('slideInModal').style.right = '-100%';

document.getElementById('slideInModal').style.backdropFilter = 'blur(0)';

}

</script>

Code (Left)

<div onclick="openSlideIn()" style="position:fixed; top:50%; right:0; width:150px; height:50px; background-color:#2C2D3F; color:white; text-align:center; line-height:45px; cursor:pointer; z-index:9999; transform:rotate(-90deg) translateY(-80%); transform-origin:top right; font-family:sans-serif; border-radius:5px;">Take a Tour</div>

<div id="slideInModal" style="position:fixed; top:0; right:-100%; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.4); backdrop-filter: blur(0); transition:right 0.5s, backdrop-filter 0.5s; z-index:9998;">

<div style="width:100%; height:100%; margin:auto; background-color:#ffffff; position:relative;">

<iframe src="{{YOUR EMBED URL}}" width="100%" height="100%" allow="clipboard-write" scrolling="no" style="min-height:400px; border:none; border-radius:10px;"></iframe>

<div onclick="closeSlideIn()" style="position:absolute; top:10px; right:10px; width:15px; height:15px; color:#000; text-align:center; line-height:15px; cursor:pointer; font-size:16px;">

<svg width="15" height="15" viewBox="0 0 30 30">

<line x1="5" y1="5" x2="25" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

<line x1="25" y1="5" x2="5" y2="25" stroke="black" stroke-width="3" stroke-linecap="round"/>

</svg>

</div>

</div>

</div>

<script>

function openSlideIn() {

document.getElementById('slideInModal').style.right = '0';

document.getElementById('slideInModal').style.backdropFilter = 'blur(5px)';

}

function closeSlideIn() {

document.getElementById('slideInModal').style.right = '-100%';

document.getElementById('slideInModal').style.backdropFilter = 'blur(0)';

}

</script>

You can test these embedding options on your own website or use a free HTML testing site like JSFiddle to see how they work. Simply copy and paste the modified code snippets into the HTML section to try them out.

Best Practices for Embedding

  • Placement on Website: Embed your Stories in a prominent place on your website to drive the most engagement.
    ​

  • Maximize Size: Increase the real estate of your Story as much as possible to improve legibility and engagement. We recommend 100% page width and at least 700px height. Then use the Font Size and Zoom settings to dial it in.
    ​

  • Integrate Your Story: If embedding inline, we recommend either:
    ​

    • Make it Blend: Match the website's background color or turn on background transparency to seamlessly blend your Story in with other content.
      ​

    • Make it Pop: Contrast your website's background with an accent color that makes your Story stand out. In this case, we recommend rounding the corners to give it a polished feel. Example: add border-radius: 10px to the style parameters of the iframe.

Popular Use-Cases

Embed Links offer a variety of ways to engage your audience directly within your existing platforms. Here are some popular use-cases to maximize the impact of your Stories.

Marketing Sites

Integrate interactive Stories into your marketing site to enhance user engagement and provide a rich, immersive experience that drives conversions.

In-App Onboarding

Embed Stories within your app to guide new users through onboarding processes, ensuring they understand and utilize your product effectively.

Blogs

Add value to your blog posts by embedding relevant Stories, providing readers with additional context and interactive content to deepen their understanding.

Help Centers

Enhance your help center articles with embedded Stories, offering step-by-step guides and tutorials in a visually engaging format that improves user support.

Digital Deal Room

Embed your Stories directly into your existing sales deal rooms, providing a seamless and interactive experience for potential clients to access all necessary information and documents in one place.

Embed Links are a powerful way to integrate your Stories into various platforms, ensuring your audience has seamless access to your content, enhancing engagement, and leaving a lasting impression.

Did this answer your question?