Embeds

embedshtmlcssjavascriptiframeeditor

Embed elements let you inject custom HTML, CSS, and JavaScript into your Ripple. This is a powerful feature for adding third-party widgets, interactive content, and custom functionality.

What Can You Embed?

Common use cases include:

  • YouTube or Vimeo videos — paste an iframe embed code
  • Google Forms or Typeform surveys — collect responses inline
  • Interactive widgets — timers, polls, live feeds
  • Custom HTML/CSS — styled content blocks, animated elements
  • Third-party tools — Miro boards, Figma prototypes, Padlet walls

Adding an Embed

  1. Click the Embed tool in the toolbox to place an embed in the centre of your view, or drag it from the toolbox onto the canvas
  2. Give your embed a name (for your reference in the element list)
  3. Paste your HTML code into the code editor

How Code Is Injected

CSS styles from your embed are injected into the page <head>, while HTML and scripts are injected at the end of the <body>. This means your styles are available globally and your scripts load after the page content.

Positioning and Sizing

  • Drag the embed container to position it on the canvas
  • Resize using the handles to set the display area
  • Scale — adjust the content scale factor independently of the container size

The container defines the visible area. The embedded content renders inside this area. In the editor, CSS and HTML render visually so you can see the layout, but scripts only execute at runtime.

Enabling and Disabling

Each embed has an Enabled toggle. Disabled embeds are saved but do not render at runtime. This is useful for temporarily removing an embed without deleting its code.

Conditional Visibility

Embeds support the same conditional visibility controls as other elements. In the Visibility section of the properties panel, you can set:

  • Show when — the embed appears only when a variable expression is true
  • Hide when — the embed is hidden when a variable expression is true

This lets you show or hide embedded content based on participant actions, variable values, or other conditions. For example, you could show a feedback form only after a quiz is completed, or reveal a video when a specific variable is set.

See Variables and Expressions for how to write condition expressions.

Security and Isolation

Embeds run inside the Ripple page, so they have access to the page context. Keep these points in mind:

  • Only paste embed code from sources you trust
  • Avoid embedding content that could interfere with Rippily's own scripts
  • Scripts execute only at runtime, not in the editor preview
  • If an embed causes issues, disable it and review the code

Tips

  • Name your embeds descriptively (e.g., "YouTube Intro Video", "Feedback Form") — it makes them easier to find in the element list
  • CSS styles in your embed are automatically applied globally, so you can style other elements from an embed
  • Test embeds by previewing your Ripple after adding them
  • If an iframe doesn't display, check that the source site allows embedding (some sites block iframe usage)