- Where to find it
- On the composer’s palette, labelled Embed. Drag it onto the canvas to add one.
- Its settings
- 4 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Embed component shows a page from another service inside yours. Paste a YouTube address and the video appears where you dropped it, playable without the visitor going anywhere. The same goes for a Vimeo video, a Google map, and a Calendly booking page — which is the one that tends to matter most, because it means somebody can book with you without ever leaving your site.
Pasting the address is the whole setup. You do not pick the service from a list first; the component works out what you have given it and configures itself accordingly, which is also why a long YouTube watch link and a short share link both do the same thing.
It is worth knowing what an embed actually is, because it explains the rest of this page. The other service's page is loaded and run inside yours, so it is heavier than an image, it is subject to that service's own rules about where it may appear, and it can only be one of four services RuleCMS has vetted. That last part is a deliberate limit: an embed has more reach into your visitor's browser than anything else you can put on a page, so the list is short and grows on purpose rather than by accident.
When an address is not one of the four, nothing renders — no error box, no broken frame, nothing. The column is simply empty, on the canvas and on the published page alike. The place you find out why is the Embed URL field, which tells you as you paste.
When you would use it
- A promotional or explainer video that already lives on YouTube or Vimeo.
- A map on a contact page showing where to find you.
- A Calendly booking page on a services or classes page, so enquiries turn into bookings on the spot.
- A vertical video from a social channel, using the 9:16 aspect ratio.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Embed URL | Embed URL | The address of the video, map, or booking page you want to show. |
| Embed Title | Embed Title | What the embed is called for somebody who cannot see it. |
| Aspect Ratio | Embed Aspect Ratio | The shape of the embed — its width compared to its height. |
| Loading | Embed Loading | Whether the embed loads with the page or waits until it is scrolled to. |
Watch out for
- Video you have uploaded to RuleCMS belongs in the Video component, not here. Embed is for video that lives on somebody else's service.
- For a map, the address in your browser bar will not work. Use Share, then "Embed a map", in Google Maps.
- Only YouTube, Vimeo, Google Maps and Calendly are supported. Anything else shows nothing at all.
- Embeds are heavy. Several on one page will slow it down noticeably, and the Loading setting only helps for the ones a visitor has to scroll to.
- Give every embed a Title. It is the only description a visitor using a screen reader gets.
- Width, colour, border, and spacing are column settings, under "Selected Column". The embed only decides its own shape.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.