--- title: "Interactive widgets and code embeds" slug: "/help/playlists/interactive-widgets" tags: ["playlists","deal-rooms","ai-mode","widgets","code embed","embed","calculator","demo center"] description: "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." product: "playlists" sidebar_label: "Interactive widgets & code embeds" last_updated: "2026-10-22T12:24:12.148Z" --- ## **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. :::note AI Mode only appears once your company has accepted the AI terms in **Company Settings โ†’ AI**. Widget generation uses AI credits like any other AI Mode request. ::: --- ## **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. :::info **Embed code snippet** is available on plans that include Advanced Playlists or Deal rooms. If your plan doesn't include it, choosing it shows an upgrade prompt. ::: ### **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](/help/playlists/create). --- ## **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](/help/playlists/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](/help/deal-rooms/lead-forms) 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.