Skip to main content

Interactive widgets and code embeds

Add interactive widgets (ROI calculators, comparison tables, pricing tiers, quizzes) to playlists and deal rooms with AI Mode, or paste your own embed code, and learn how both are sandboxed.

Updated Oct 22, 2026

Interactive widgets and code embeds

Overview​

A code embed is a content item that renders HTML inside your playlist or deal room. There are two ways to get one:

  • AI-built widgets. Ask AI Mode for an ROI calculator, comparison table, pricing tiers or quiz. It writes a self-contained interactive widget, styled with your brand colors, and places it for you.
  • Your own embed code. Paste an embed snippet from another tool (a dashboard, a scheduler, a video player, a form) and it renders as a section.

Both live in an Embedded content section, so you resize, move, duplicate, and delete them like any other section.

Snapshot 📸​

Feature Status: Generally available · AI-built widgets consume AI credits Role Access: Anyone who can edit the playlist or deal room Location: Playlist or deal room editor → AI Mode, or an Embedded content section → Add content items → Embed code snippet

Build a widget with AI Mode​

  1. Open the playlist or deal room in the editor and click AI Mode in the top command bar.
  2. Describe the widget you want. Be specific about the outcome; AI Mode fills in the rest by asking.
  3. Answer the survey. AI Mode asks one to three focused questions, one at a time, with suggested answers you can click: which inputs and metric to use, the visual style, and the real values to show.
  4. Confirm the placement. AI Mode looks at the current structure and recommends where the widget should go (in a deal room, which page and position). Accept it or name a different spot.
  5. AI Mode builds the widget in a new Embedded content section and sizes it to fit its content.

Example prompts​

  • "Add an ROI calculator: inputs for number of reps, average deal size and win rate, output yearly revenue impact."
  • "Build a comparison table of us vs. the two competitors this buyer is evaluating, on security, integrations and support."
  • "Add pricing tiers for Starter, Growth and Enterprise with a monthly/annual toggle."
  • "Create a five-question quiz that recommends which product package fits the viewer."

For these common widget types, AI Mode starts from a proven layout and tailors it to your answers, so results are consistent and polished.

Change a widget​

Ask for the change in the same conversation, for example "add a discount row", "show three-year payback" or "make it darker". AI Mode updates that same widget in place instead of adding a second one.

What AI-built widgets look like​

  • On-brand. The widget picks up the playlist's or deal room's brand colors (button, font and link colors), so it matches the surrounding content.
  • Mobile-ready. Widgets stay readable down to phone width (about 360px).
  • Self-sizing. The widget's height grows and shrinks with its content (for example, when a result panel appears), so there's no dead space or inner scrollbar.

Add your own embed code​

  1. In the editor, add an Embedded content section.
  2. Click Add content items and choose Embed code snippet.
  3. In Embed external content, paste the embed code. You can also paste a Gong, Loom or Wistia share link; Walnut converts it to an embed for you.
  4. Click Confirm.

If you paste a link Walnut can't convert, the field shows an error and asks for the embed code snippet instead.

Sizing. If the snippet includes width and height attributes, Walnut uses them to set the item's proportions. To adjust it yourself, open Element sizing on the section: choose Full or Fixed width, and set the Height.

Editing. Select the item and click Edit embed code to change the snippet, or Replace content item to swap it for something else.

Which sites you can embed​

Embed code runs under a content security policy, so anything the snippet loads must come from an allowed host. The list covers common tools, including:

  • BI and dashboards: Tableau, Looker, Power BI, Metabase, Mixpanel, Qlik, Sisense, Mode, Domo, Plotly
  • Video: YouTube, Vimeo, Wistia, Vidyard, Loom, Gong
  • Docs and slides: Google, Microsoft Office / OneDrive / SharePoint, SlideShare, Prezi, Canva, Miro
  • Scheduling and forms: HubSpot, Chili Piper, Calendly, Demodesk, Doodle
  • Apps and prototypes: Claude (claude.ai), Lovable (lovable.app), Vercel (vercel.app), Attention, Genially
  • Other: Walnut, maps (Mapbox, OpenStreetMap, ArcGIS), social (LinkedIn, X/Twitter, Instagram, Facebook), Cloudinary, Clockify, FullStory

Your company's custom domain is allowed too. If something you need isn't loading, contact Walnut support.

Security and sandboxing​

AI-built widgets run in a strict sandbox:

  • Everything is inline in the widget. It can't load external scripts, stylesheets, fonts or images.
  • It can't make background network requests (fetch, XHR, WebSockets), open pop-up windows, or submit forms anywhere.
  • It can't read the page around it: no access to the playlist, cookies or browser storage.
  • AI Mode is instructed never to collect personal data or credentials in a widget.

If you edit an AI-built widget's code yourself with Edit embed code, it keeps the strict sandbox.

Your own embed code runs in a separate frame with a less restrictive sandbox, so third-party embeds (forms, schedulers, players) work normally. It can still only load content from the allowed hosts above.

Analytics and playback​

  • Insights. Viewers' time on a code embed is tracked like any other content item, so widgets show up in playlist and deal room engagement data.
  • Auto-advance. In playlists with Auto-advance to next item turned on, a code embed advances after a quiet spell with no viewer activity. Any pointer or keyboard activity resets the wait. See Create a playlist.

Good to know​

  • No live data. AI-built widgets can't call your systems or any external service, so they can't show live pricing, CRM fields or usage data. Give AI Mode the values to use, or paste your own embed from a tool that hosts live data.
  • Links still work. The sandbox blocks background requests, but a link inside a widget can still take the viewer to another site. Check any links before you publish.
  • Undo. Widget changes don't have their own per-change revert in AI Mode's result card. Use Undo on the run, or delete the section.
  • Reuse. Right-click a widget's section and choose Save to library to reuse it in other playlists or deal rooms. See Section library.
  • AI Mode doesn't publish anything. Review the widget, then publish when you're ready.

FAQs​

Can a widget pull numbers from Salesforce or HubSpot? Not live. In a deal room, AI Mode can read CRM context while it builds, so it can write the deal's values into the widget, but the widget itself never connects to your CRM.

Can a viewer's inputs in a calculator be captured? No. AI-built widgets can't send data anywhere and don't store anything. Use a lead form to capture viewer details.

Why does my pasted embed show an empty box? The snippet probably loads content from a host that isn't on the allowed list, or you pasted a share link instead of embed code. Paste the provider's embed snippet, or contact support to ask about a host.

Was this helpful?