Skip to main content

Embeds & Custom HTML

Tempo has three blocks for putting outside content on a page. Picking the right one is almost always the difference between an embed that works and one that shows nothing at all.

What you want to addUse this block
A video from YouTube, Vimeo, or LoomVideo Embed
A form, booking calendar, map, calculator, or any other web pageWebsite Embed
Your own HTML and CSS snippetCustom HTML

All three are in the Primitives category of the block library.

Video Embed​

Drag in a Video Embed block and paste the video's normal link — the one in your browser's address bar, or the one the Share button gives you. You do not need a special embed link.

These all work:

  • https://www.youtube.com/watch?v=abc123
  • https://youtu.be/abc123
  • https://www.youtube.com/shorts/abc123
  • https://vimeo.com/123456789
  • https://www.loom.com/share/abc123

If your YouTube link includes a start time (?t=90), the video starts at that point.

Settings

  • Video URL — The link to your video.
  • Title — A short description of the video, read aloud by screen readers.
  • Aspect Ratio — 16:9 suits almost every video. Choose Custom Height to set an exact pixel height instead.
  • Allow Fullscreen — Whether viewers can expand the video to fill their screen.
  • Position, Width, and Padding — Where the video sits and how wide it is.

Website Embed​

Use Website Embed for anything that isn't a video: a Tally or Typeform form, a Calendly booking calendar, a Google Form, a mortgage calculator, a custom map.

Paste the page's own web address — the same link you would text to a client.

ServiceThe address to use
Tallyhttps://tally.so/r/abc123
Typeformhttps://form.typeform.com/to/abc123
Calendlyhttps://calendly.com/your-name/30min
JotFormhttps://form.jotform.com/123456789
Google FormsClick Send, then the <> tab, and copy the address inside src="…"
tip

If a service only offers you a block of "embed code", look for src="https://…" inside it and copy just that address into the Page URL field. Paste the rest of the code nowhere — see Custom HTML for why.

Settings

  • Page URL — Must start with https://. Addresses starting with http:// are not permitted, because they would make your whole page insecure.
  • Height — Choose Fixed and set a pixel height, or Aspect ratio for a proportional shape.
  • Allow Scrolling — Leave this on unless the embedded page fits its height exactly.
  • Position, Width, and Padding — Where the embed sits and how wide it is.
About height

An embedded page can't grow taller on its own, so you set the height yourself. Most forms need somewhere between 600px and 900px — start at the default 700px, preview the page, and adjust until nothing is cut off. Long forms scroll inside the frame, which is fine.

Also check the mobile preview: a form that fits on desktop is often taller on a phone.

Custom HTML​

Custom HTML is for your own markup — a styled callout, a table, a badge, a small layout the other blocks don't cover. It is not the place for embed code you were given by another service.

What's removed​

Custom HTML is cleaned up before it appears on your site. These are always removed:

  • <script> tags and inline handlers like onclick. Anything that depends on a script will not work.
  • <iframe> tags without a real https:// address, and any using http://.
  • Page wrapper tags — <html>, <head>, <body>, <meta>, and <title>. Your block sits inside a page that already has these.
  • @import rules in your CSS.

When you paste something into the HTML box, Tempo tells you underneath exactly what it will remove and why. Read those notes before publishing — a block with a red note will appear empty on your live page.

CSS in Custom HTML​

You can include a <style> tag, and your styles apply only inside that block. Rules written for html, body, or :root are applied to the block itself.

This is deliberate: embed snippets often carry page-wide rules like html { overflow: hidden }, which would stop your entire page from scrolling.

To load a custom font, use Appearance rather than an @import rule.

Why isn't my embed showing?​

I pasted the code my form provider gave me, and the block is empty​

This is the most common one, and it's expected. Most providers — Tally, Typeform, HubSpot, and others — hand you a snippet that looks roughly like this:

<script async src="https://tally.so/widgets/embed.js"></script>
<iframe data-tally-src="https://tally.so/r/abc123" width="100%" height="100%"></iframe>

That snippet needs the script to run before the frame has anything to show. Tempo removes scripts, so the frame stays empty and gets dropped — nothing appears.

The fix: delete the Custom HTML block and use a Website Embed block instead, with just the form's address (https://tally.so/r/abc123 in the example above). The block will tell you this too, and shows you the address it found in your pasted code.

The embed shows, but it's cut off​

Increase the Height on the Website Embed block, and make sure Allow Scrolling is on. Check the mobile preview separately.

The embed shows a "refused to connect" message, or stays blank​

Some websites don't permit being displayed inside another site. This is a rule set by that website, and there is no setting in Tempo that can override it. Most form and booking services allow it; news sites, social networks, and banking sites usually don't.

If the service you're embedding offers a dedicated "embed" or "share" address, use that one. Otherwise, link out to it with a Button block instead.

My video shows "Video unavailable"​

The video's owner has disabled embedding, or the video is private or unlisted with restrictions. Check the video's own sharing settings on YouTube or Vimeo.

I need to add a tracking or analytics script​

Scripts can't go in a page block. Connect Google Tag Manager under Integrations instead — that loads your scripts across the whole site properly. See Integrations.