Custom Code blocks
Add your own HTML and CSS to an event page with the Custom Code block and the built-in code editor — for anything the standard sections don't cover.
Add your own HTML and CSS to an event page with the Custom Code block and the built-in code editor — for anything the standard sections don't cover.
Most of your event page is built from ready-made sections — a cover, a schedule, an RSVP widget, and so on. A Custom Code block is the one section where you can write your own HTML and CSS instead.
Reach for it when you want something the built-in sections don't offer — a custom countdown banner, an embedded map, a sponsor logo grid, or a one-off layout that's exactly yours. The block renders right inside your page, in line with your other sections, and has full access to your active theme's colors and fonts.
You don't need to be a developer to try it. If you can copy a snippet and tweak some text, you can use a Custom Code block.
You'll do this in the Layered Editor — the visual page builder under Event page → Customize page.
In the Layered Editor, select Add a section at the bottom of the section list (or use the add control between two existing sections to drop it exactly where you want it).
Pick Custom Code from the list. A new, empty Custom Code section appears in your page right away.
Select the section. The Customize panel opens on the right with an Edit Code button — select it to open the Custom Code editor.
The editor opens with two tabs — HTML and CSS — powered by the same engine that runs VS Code, so you get syntax highlighting as you type. Put your markup in the HTML tab and any styles in the CSS tab, then select Save.
Here's a small block that thanks your guests, using your theme's heading font.
HTML tab:
<div style="text-align: center; padding: 40px;">
<h2 style="font-family: var(--event-font-heading);">A Special Message</h2>
<p class="special-message">Thank you for celebrating with us.</p>
</div>
CSS tab:
.special-message {
font-size: 1.125rem;
color: var(--event-text);
opacity: 0.8;
max-width: 480px;
margin: 0 auto;
}
A Custom Code block can also render normal Rendezvous sections, using section tags. This lets you mix a built-in section into your custom layout — and because it renders through your active theme, it restyles automatically when you switch themes, exactly like a section added from the editor.
Tag names match the section types, and their attributes use the same settings you'd set in the editor. A few you'll reach for often:
| Tag | What it renders |
|---|---|
<event-cover /> | The event cover / hero |
<event-schedule /> | Your schedule |
<rsvp-widget /> | The RSVP form |
<cta-buttons /> | One or more call-to-action buttons |
<spacer /> | Vertical spacing between blocks |
Here's a block that combines a text block, some spacing, and a button:
<event-textblock text-alignment="center">
<p><strong>{{eventName}}</strong> starts at {{formatTime event.date}}.</p>
</event-textblock>
<spacer height="medium" />
<cta-buttons
items='[{"title":"Open registry","url":"https://example.com","style":"primary","opensInNewTab":true}]'
/>
Notice the {{eventName}} and {{formatTime event.date}} in the example above? Those are dynamic content expressions. Instead of typing your event name or date by hand, you drop in a variable and Rendezvous fills in the real value when the page loads.
That means you only update details in one place — your dashboard — and your Custom Code block stays current. Both the HTML and CSS tabs support these expressions.
<h2>{{eventName}}</h2>
<p>{{formatDate event.date "long"}}</p>
See Using dynamic content for the full list of variables and helpers.
A few habits that keep your custom blocks looking sharp:
<script> tags, onclick-style attributes, javascript: links, <iframe>, <object> and <embed>, forms and inputs, inline <svg>, and <style>, <link>, <base> and <meta> tags. If you want a little interactivity, use CSS-only techniques like :hover effects, <details> / <summary> toggles, or CSS animations.mailto: and tel:), lists, tables, <div>/<section>-style layout, images, video and audio from a web address, and class, style, title and data-* attributes. Put styles in the CSS tab (or a style attribute) and use classes rather than ids — ids are removed too.<event-location />, <video-embed /> or <spotify-embed /> instead of an <iframe> — they render through your theme and keep working.%, rem, vw) rather than fixed pixel widths, and use the viewport toggle in the editor toolbar to check how it looks on a phone.<h2> for headings, <p> for text, <ul> for lists — rather than a stack of plain <div> elements. Your guests (and screen readers) will thank you.