Embed Elements

This guide covers everything you need to know about Embed Elements in HipDeck — from getting an embed code to building fully custom displays with AI. For deeper coverage of specific embed types, see the child guides listed at the bottom of this page.

What Is an Embed Element?

An Embed Element is a content block in HipDeck that accepts raw HTML embed code and renders it inside a playlist slide. It acts as a sandboxed container — it doesn’t host content itself, it renders whatever code you paste in. It works with any service that provides an iframe or HTML snippet, making it one of the most flexible elements available.

How to Get an Embed Code

Most services include a Share, Embed, or Publish option that generates a ready-made iframe or HTML snippet. Follow these steps:

1. Find the Share / Embed / Publish option in the service.
2. Select the embed or iframe option.
3. Copy the generated code snippet.
4. Paste it into the Embed Code field of your HipDeck Embed Element.
5. Save and preview the result.

Note: some services require content to be published or set to ‘Anyone with the link’ before the embed will load correctly.

What You Can Embed

The range of content you can embed is enormous.

Google Workspace

• Google Docs — publish to web and embed as a live document
• Google Sheets — embed a live spreadsheet or a specific range
• Google Slides — embed a presentation with auto-advance
• Google Calendar — embed a team or public calendar
• Google Maps — embed a map or directions view
• Google Forms — embed a form for interactive kiosk use
• Google Looker Studio — embed live data dashboards

Microsoft 365

• Word Online — embed a shared document
• Excel Online — embed a live spreadsheet
• PowerPoint Online — embed a presentation
• Power BI — embed interactive reports and dashboards

Data Dashboards & Analytics

• Tableau — embed published views and dashboards
• Grafana — embed panels or full dashboards
• Looker — embed explores and dashboards
• Metabase — embed questions and dashboards
• Kibana — embed visualisations
• Any tool that exposes a public or token-authenticated embed URL

Design & Animation

• Canva — embed published designs (presentations, posters, infographics)
• Lottie animations — embed JSON-based vector animations via LottieFiles or a self-hosted player
• Figma — embed published prototypes or frames
• Adobe Express — embed published content

Social & Live Feeds

• Twitter/X walls, Instagram feeds, LinkedIn posts
• Social aggregators (Walls.io, Taggbox, Juicer)
• Live news tickers and RSS-to-HTML feeds
• YouTube and Vimeo embeds
• Twitch streams

Productivity & Collaboration Tools

• Notion pages (published to web)
• Airtable views
• Trello boards (public)
• Miro boards (published)
• Coda docs

Custom HTML Pages

• Any static HTML/CSS/JS page hosted on a web server
• GitHub Pages, Netlify, Vercel, or any CDN-hosted page
• Internal web apps accessible on the same network as your screens

Other Common Embeds

• Weather widgets (Weather.com, OpenWeatherMap widgets)
• Stock tickers and financial data feeds
• Sports scores and live event feeds
• Booking and scheduling widgets (Calendly, Acuity)
• Survey and poll tools (Typeform, SurveyMonkey)
• Countdown timers and clocks
• Any service that provides an iframe snippet

Build Custom Embeds with AI

One of the most powerful uses of Embed Elements is combining them with AI coding assistants — ChatGPT, Claude, Gemini — to generate fully custom HTML/CSS/JS pages on demand. You describe what you want in plain language, and the AI writes the code. No development experience required.

Here’s the workflow:

1. Open ChatGPT (or any LLM) and describe the element you want — for example: ‘Create a full-screen HTML page showing a live clock with a dark background and large white text.’
2. The LLM generates complete HTML/CSS/JS code.
3. Copy the generated code.
4. Paste it into the Embed Code field of your HipDeck Embed Element.
5. Preview the result. If it needs adjustments, go back to the LLM and iterate conversationally.

Example prompts to get you started:

• ‘Create a full-screen countdown timer to [date] with a branded background colour.’
• ‘Build a scrolling marquee showing these announcements: [list].’
• ‘Generate a KPI dashboard showing these three metrics with large numbers and icons.’
• ‘Create an animated welcome screen with a gradient background and our company name.’
• ‘Build a weather display that fetches current conditions for [city] using the Open-Meteo API.’
• ‘Generate a full-screen HTML page that cycles through these five motivational quotes every 10 seconds.’

Because you can iterate conversationally, you can refine the design, adjust colours, add data, or change behaviour without writing a single line of code yourself.

Sizing and Layout

Embedded content renders inside the Embed Element’s bounding box on the slide canvas. Keep these tips in mind:

• Set the Embed Element to fill the full slide area if the embed should be full-screen.
• Use style="width: 100%; height: 100%;" in the embed code to make the content fill the element.
• Some services generate iframes with fixed pixel dimensions — update the width and height attributes to 100% for responsive behaviour.
• Test at the target screen resolution before deploying.
• For embeds with fixed aspect ratios (e.g. 16:9 presentations), size the element to match.

Security and Permissions

• Only use embed code from services and sources you trust.
• Review the code before pasting — look for unexpected script tags or obfuscated code.
• Some services require content to be set to ‘public’ or ‘anyone with the link’ for the embed to load.
• Iframes from services that set X-Frame-Options: DENY or SAMEORIGIN will not render — check the service’s embedding documentation.
• If your organisation uses a Content Security Policy (CSP), ensure the embed source domain is on the allowed list.
• Scripts that require browser APIs (localStorage, cookies, geolocation) may be blocked in the sandboxed player environment.

Child Guides

The following guides go deeper on specific embed types and workflows:

• Google Workspace Embeds
• Microsoft 365 Embeds
• Data Dashboard Embeds
• Lottie Animation Embeds
• Canva Embeds
• Building Custom Embeds with AI

Select a guide from the tabs above to get started.