---
title: "How to Embed a Walnut Demo or Playlist"
slug: "/help/playlists/embed-demos"
sidebar_position: 6
last_updated: "2026-06-05T20:43:19.642Z"
zendesk_id: 32071112651027
zendesk_url: "https://help.walnut.io/hc/en-us/articles/32071112651027-How-to-Embed-a-Walnut-Demo-or-Playlist"
locale: "en-us"
product: "playlists"
displayed_sidebar: "playlistsSidebar"
---

## **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**.

    ![Screenshot showing Walnut Library demo menu](pathname:///images/daf01490f71fcbac.png)       ![Get embed code option from demo thumbnail in Walnut Library](pathname:///images/09a6abc3ad7be9f3.png)

    -   **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.

    ![Embed Live Demo pop-up with Copy Embed Code option](pathname:///images/26d7a1c1b6923755.png)       ![](pathname:///images/23ed22dc6d47e436.png)

1.  **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.

:::note[⚙️ Next Step]

Once you’ve added your demo embed code, see [Wrap Your Embed Code in a Fixed-Size Container](#h_01K83WMY0PDY3JZZQ9DNRJA34V) to ensure your demo displays correctly.

:::

---

## **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**.

    ![Get embed code option from playlist thumbnail in Walnut Library](pathname:///images/d4a51133b21c16e0.png)                    ![](pathname:///images/e3151021e160cdef.png)

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

    ![Embed Demo Playlist pop-up with Copy Embed Code button in Walnut](pathname:///images/716fe004f43a96c3.png)

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

:::note[⚙️ Next Step]

Once you’ve added your playlist embed code, see [Wrap Your Embed Code in a Fixed-Size Container](#h_01K83WMY0PDY3JZZQ9DNRJA34V) to ensure your playlist displays correctly.

:::

---

## **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:_

```
<div>   </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**](#h_01K83WMY0PDY3JZZQ9DNRJA34V) 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**](https://help.walnut.io/hc/en-us/articles/32035014025491) 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**](https://help.walnut.io/hc/en-us/articles/43542659413651). 

_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>
     
</div>
```

<WalnutDemo slug="5851928a-4e6b-49ce-b30a-f993c24ea780" title="Walnut embedded demo" />

_**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>
     
</div>
```

<WalnutDemo slug="5851928a-4e6b-49ce-b30a-f993c24ea780" title="Walnut embedded demo" />

---

## **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**](https://help.walnut.io/hc/en-us/articles/11516319652883)
-   [**Guide to Screen Display Settings (Dynamic, Proportional, Fixed Width, Fixed Size, and View on Mobile)**](https://help.walnut.io/hc/en-us/articles/32035014025491)
-   [**The Complete Guide to Mobile-Friendly Demos**](https://help.walnut.io/hc/en-us/articles/43542659413651)

**👉 See** [Best Practices and Optimization Tips](#h_01K7PSST9H5H2BVZDR9A3NPZEV) **above for a quick summary for embedded demos and playlists.**

---

## **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.

![](pathname:///images/1d683150fcc1175c.png)

---

**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:

```
```

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.

![](pathname:///images/3bc2f9f6481bfb59.png)

---

**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**](https://help.walnut.io/hc/en-us/articles/32115415959571) for your demos. This add-on feature allows you to host demos under your own branded domain and removes the default Walnut branding tab.

![Screenshot 2025-10-21 at 11.38.05 AM.png](pathname:///images/11fd3906b9795376.png)

**Learn More:** [**Set Up a Custom Domain**](https://help.walnut.io/hc/en-us/articles/32115415959571)

---