How to Embed a Walnut Demo or Playlist

Overview

Embedding a Walnut demo or playlist allows you to showcase interactive product experiences directly within your website, LMS system, Help Center, or content portal — anywhere that supports HTML <iframe> embeds.

Walnut embeds let you deliver hands-on, guided demos in context, whether you’re enhancing a training module, showcasing product features, or enabling customers to explore your product independently.

In This Guide, You’ll Learn How To:

• Embed Walnut demos and playlists on your website or in your content systems.
• Optimize sizing and layout for a seamless embedded experience.
• Apply best practices for responsiveness and content accessibility.
• Explore real-world examples and FAQs for common embed scenarios.

---

Embed a Walnut Demo

Follow these steps to embed a Walnut demo:

1. Copy Your Embed Code.
   You can access the embed code from either the Walnut Library or the Demo Launcher.

   • From the Walnut Library:
     Click the three-dot menu (•••) on the thumbnail of the demo you want to embed, then select Get embed code.

        

   • From the Demo Launcher:
     Click the three-dot menu (•••) next to your demo and select Get embed code.
     In the Embed Live Demo pop-up, click Copy Embed Code to copy the generated <iframe> snippet to your clipboard.

         

2. Paste the Embed Code.
   Insert the copied <iframe> snippet into the HTML of your webpage, CMS, Help Center article, or content portal that supports HTML embeds.

---

Embed a Walnut Playlist

Follow these steps to embed a Walnut playlist:

1. Open the Walnut Library.
   On the playlist thumbnail, click the three-dot menu (•••), then select Get embed code.

                      

2. Copy the Embed Code.
   In the Embed Demo Playlist pop-up, click Copy Embed Code to copy the generated <iframe> snippet to your clipboard.

   

3. Paste the Embed Code.
   Insert the copied <iframe> snippet into the HTML of your webpage, CMS, or marketing platform to display the playlist.

---

Wrap Your Embed Code in a Fixed-Size Container

When embedding a Walnut demo or playlist, it’s best to place the <iframe> inside a parent <div> with a defined size.

Walnut <iframes> are designed to fill their container, with width: 100% and height: 100%. If an iframe isn’t wrapped in a container with a defined height, it may appear collapsed (often rendering at 0 px tall). This occurs because the iframe’s dimensions depend on its parent element — and without a set height on that parent, there’s no reference for the iframe to scale against.

<iframe> Wrapping Example:

<!-- Fixed-size container for the Walnut iframe -->

<div style="width: 800px; height: 500px; max-width: 100%;">

   <!-- Place your Walnut iframe embed code here.
        The fixed-size <div> container prevents the iframe from collapsing (0px height). -->

</div>

---

Best Practices and Optimization Tips

Embedding a Walnut demo or playlist in your website, Help Center, or LMS can create an immersive, interactive experience for your audience. To make sure your embed looks and performs its best, keep the following best practices in mind.

Embedding Best Practices:

• Always wrap your embed code inside a fixed-size or proportionally sized <div> container to prevent the iframe from collapsing.
• Use the Proportional Fit, Fixed Size, or Fixed Width screen display settings to control how your demo scales within its container and ensure that all content and guide steps are always visible. 
• For most use cases, use the standard embed code — it’s optimized to automatically fill the container and blend seamlessly with your page layout.
• If you’d like the playlist or demo to take over the entire browser window (for example, on a dedicated landing page or modal), use the Full Page Layout version of the embed code instead.

Layout and Styling:

• Apply any custom CSS styling to the iframe’s parent container, rather than to the iframe itself, for cleaner and more predictable display results.
• Add responsive CSS or breakpoints to ensure your embedded demo or playlist adapts smoothly across different screen sizes and devices. For detailed guidance on mobile optimization, see The Complete Guide to Mobile-Friendly Demos. 

Example: Responsive Embed CSS

/* Default: desktop and large screens */
.embed-container {
 width: 100%;
 height: 600px;
 position: relative;
}

/* Medium screens (e.g., tablets) */
@media (max-width: 1024px) {
 .embed-container {
   height: 500px;
 }
}
/* Small screens (e.g., phones) */
@media (max-width: 600px) {
 .embed-container {
   height: 400px;
 }
}

---

Embedded Demo Examples

Example One:

The example below shows a standard desktop embed. This layout does not display the mobile split-screen view and is best suited for larger containers or full-width embeds.

<div style="width: 100%; min-width: 720px; height: 600px; margin: auto;">
     <!-- Insert your actual Walnut iframe embed code here -->
</div>

 

Example Two:

The following example shows the split-screen layout that appears when the View on mobile setting is active. This mobile-optimized layout automatically applies to embedded demos and playlists when viewed on smaller screens (under 720 px).

<div style="width: 100%; max-width: 900px; height: 600px; margin: auto;">
     <!-- Insert your actual Walnut iframe embed code here -->
</div>

 

---

Get the Best Results 🌟

For an in-depth overview of layout, sizing, responsive behavior, and tips for maximizing your Walnut demos and playlists, whether embedded or not, explore these companion articles.

• Create Demos – Part 1: Chrome Extension Capabilities & Best Practices
• Guide to Screen Display Settings (Dynamic, Proportional, Fixed Width, Fixed Size, and View on Mobile)
• The Complete Guide to Mobile-Friendly Demos

---

FAQs

---

Which Version of the Embed Code Should I Use?

For most use cases, we recommend using the standard embed code (Full page layout toggle OFF). It’s designed to display your Walnut demo or playlist within a specific section or container on your webpage, allowing it to fit naturally into your site’s existing layout.

---

What Is the Difference Between the “Full Page Layout” Version of the Embed Code and the Standard Version?

The Full Page Layout version of the embed code adds the following inline styles to the <iframe> element:

style="position:fixed; border:0; top:0; bottom:0; right:0; left:0; z-index:99999;"

All other aspects of the embed code remain the same.

These styles make the embedded demo occupy the entire browser viewport, ensuring it appears as a full-page experience rather than within a specific container on your site.

---

Can I Remove the Walnut Tab from My Embedded Demo?

The Walnut Tab is a standard feature that appears on all embedded Walnut demos by default.

To remove this tab, you can set up a Custom Domain for your demos. This add-on feature allows you to host demos under your own branded domain and removes the default Walnut branding tab.

Learn More: Set Up a Custom Domain

---