Step by step process for embedding Walnut demos on your company website

If you want to show off your product without forcing people to book a demo call, interactive demos are a solid bet. This guide is for anyone who's got a Walnut account and needs to get those demos live on their company website—without calling in a dev team for every tweak. We'll walk through the steps, call out what actually matters, and warn you about the common pitfalls that can turn a “quick embed” into a support-ticket marathon.

Why embed Walnut demos?

  • Let buyers try before they talk: Most people don't want to sit through a sales pitch. An embedded demo lets them see your product in action, on their terms.
  • Shorten sales cycles: Prospects get a taste of your product right on your site, which can mean fewer repetitive intro calls.
  • Look modern: It's 2024. Static screenshots and walls of text don't cut it anymore.

But embedding demos isn't magic. If you just slap the code on your page and call it a day, you might run into slow load times, tracking headaches, or funky mobile layouts. Let's walk through how to do it right.

Step 1: Prep your Walnut demo

Before you touch your website, make sure your demo is ready for prime time.

  • Polish the flow: Go through your demo as if you’re a first-time visitor. Does it actually make sense? Are there dead ends or confusing steps?
  • Check permissions: If your demo is set to private, nobody will be able to see it. In your Walnut dashboard, make sure the demo is public or “unlisted” (if you want to hide it from search, but still share via link/embed).
  • Test on different devices: Walnut demos usually work fine on desktop, but can get weird on mobile. Open the demo on your phone and see if anything breaks.
  • Note the demo URL: You’ll need this for embedding.

Pro tip: Keep your demo short. Most people bail after 2–3 minutes. If your demo is a 10-minute epic, trim it down.

Step 2: Grab the Walnut embed code

Walnut gives you an iframe code, which is basically a window to your demo. Here’s how to get it:

  1. Log in to your Walnut dashboard.
  2. Find the demo you want to embed.
  3. Click “Share” or the share icon (usually in the top right).
  4. Choose “Embed” from the options.
  5. Copy the iframe snippet that pops up.

It’ll look something like this:

html

You can usually tweak the width and height to fit your site design. If you want it responsive (so it works on mobile), you’ll need to do a little extra—more on that in Step 4.

What NOT to do: Don’t just paste the demo URL as a link. The magic only happens when you use the actual iframe code.

Step 3: Embed the demo on your website

How you drop the code in depends on your site setup. Here are the real-world basics:

If you’re using WordPress or a site builder:

  • Go to the page where you want the demo.
  • Add a “Custom HTML” or “Embed” block.
  • Paste in the Walnut iframe code.
  • Preview the page to make sure it works (and isn’t cut off or squished).

If you’re using a custom site (React, Next.js, etc.):

  • Open the component or page where you want to add the demo.
  • Paste the iframe code where you want it to appear. In React, you might need to use the dangerouslySetInnerHTML prop, or just insert the iframe directly in your JSX.
  • Save and reload.

Common gotchas:

  • iframes are picky: If your site has strict Content Security Policies or uses certain frameworks, the iframe might not show up. If it’s blank, check your browser console for errors.
  • Mobile views: If your iframe is set to a fixed width (like 800px), it may break your mobile layout. Use percentages or responsive CSS.

Step 4: Make your Walnut demo responsive

This is the step most people skip, and then they wonder why their demo looks weird on phones. By default, iframes don’t scale nicely. Here’s how to fix that:

The quick-and-dirty method:

Change your iframe’s width to 100% and give it a max width:

html

The better (but slightly nerdier) way:

Wrap your iframe in a div that maintains the aspect ratio:

html

This keeps your demo looking sharp at any screen size. Adjust the padding-top value if your demo isn’t 16:9.

Skip this if: You’re only showing your demo on a desktop-only page, like an internal portal.

Step 5: Check performance and tracking

Just because your demo appears on the page doesn’t mean you’re done.

  • Test load times: If your page suddenly loads way slower, Walnut’s embed could be the culprit. Try lazy loading the iframe (only loading it when it comes into view) if speed is an issue.
  • Analytics: Walnut has its own analytics, but you might want to track demo views in Google Analytics or similar tools. You can set up event tracking on the iframe’s load, though it won’t show you what users do inside the demo unless Walnut provides that info (they usually do, but check your plan).
  • Privacy: Embedding third-party content means you might be loading cookies or scripts your users didn’t agree to. Check your privacy policy and, if you’re in the EU, make sure you’re not breaking any rules.

What to ignore: Don’t waste time trying to fully customize the look of the Walnut player. You’re usually stuck with their styling, aside from size and a few color tweaks.

Step 6: QA your embedded demo

This is where most people get lazy, but it’s where the real headaches appear if you skip it.

  • Try every device: Desktop, tablet, phone. Both iOS and Android if possible.
  • Test all browsers: Chrome, Safari, Firefox, Edge. At least the latest two versions.
  • Check user flows: Does the demo actually work when embedded, or do certain steps break? Sometimes pop-ups or overlays in the demo don’t play nice inside an iframe.
  • Look for weird scrollbars: If you see double scrollbars, adjust your height or CSS.

Pro tip: Ask a coworker who’s not familiar with the demo to try it and give honest feedback. You’ll spot confusing steps or broken layouts fast.

Step 7: Announce and maintain

You’re live! Now:

  • Let your team know: Sales, support, and marketing should know where the demo lives so they can share the link.
  • Update as needed: If your product changes, your demo will get out of date fast. Set a reminder to review it every month or quarter.
  • Monitor usage: Check Walnut’s analytics to see if people are actually interacting with your demo. If not, try moving it higher on your page or simplifying the flow.

What works, what doesn’t, and what to ignore

A few final words from the trenches:

  • Works well: Walnut embeds are great for product tours and simple use cases. They’re quick to set up and usually “just work.”
  • Watch out for: Overly complex demos. If you try to cram every feature into one flow, people get lost. Split big demos into smaller, focused ones.
  • Ignore: Fancy embedding tools or plugins that claim to “supercharge” your Walnut demos. The native embed does the job for 99% of use cases.

Keep it simple

The best embedded demos are the ones you can update without calling IT or waiting a week for changes to go live. Start small, watch how people use the demo, and tweak from there. Don’t overcomplicate it—the goal is to help prospects get it, not to win design awards.

Good luck! If you run into weird issues, Walnut’s support is decent, but a quick Google search usually turns up answers faster.