Fully custom layouts

IO allows you to bring your own HTML templates so that you have full control over the branding of the customer journey. Everything from <!doctype html> to </html> can be customised.

What you'll learn

How to create a custom layout
How to structure your HTML
How to include IO's registration widget
How to style everything with your own CSS

1. Create a custom layout

Navigate to HTML templates in your Account settings. Create a new template and you'll have a blank canvas to work with.

You’ll likely want to start with a web layout template so name your file in the Name field and select the Web templates checkbox. Layout component name can stay blank for this type of file. Add the code for your HTML page and click Save changes.

2. Structure your HTML

Your custom layout is a full HTML document. You have complete control over the markup, but you need to include code to allow IO to insert the relevant invitation or registration flow.

This can be done by simply adding the following where you’d like the code to be injected:

<turbo-frame id="content" class="main-content">
  <slot />
</turbo-frame>

3. Add your styles

Include your own CSS — either inline, in a <style> tag, or linked from an external stylesheet. IO's default styles won't interfere with your custom layout.

4. Adding IO hosted stylesheets and JavaScript file

If you’d like to add your own separate stylesheet hosted on IO you can create a new HTML template, give it a name and choose Stylesheet in the Kind dropdown. Name the stylesheet component something like my-stylesheet (use dashes as separators).

Add your CSS styles and save the template.

In your web template you’ll need to reference the file so add the following with the <head>:

<stylesheet name="my-stylesheet" />

The same pattern can be used for JavaScript files.

5. Adding your own components

If you have a block of code that is reused across multiple HTML files you can create components to reduce duplicate code.

For example if you’d like to add a reusable header, you would create a new HTML template, give it a name and choose Component in the Kind dropdown. Name the component something like my-header (use dashes as separators).

Add your HTML and save the template.

When you need to insert the component simply add:

<my-header />

6. Preview and publish

Preview your custom layout to make sure everything looks right. Once you're happy, publish it and your attendees will see your fully branded experience.

Using event data in your templates

Your HTML templates are rendered with Liquid, so you can output dynamic event data anywhere in your layout. For example, {{ event.title }} or {{ event.location }}.

You can also define your own per-event values using event-level custom fields and reference them with {{ event.custom_data.your_field_slug }}. This is useful for things like venue contact details, sponsor messages, or any content that varies between events but belongs in the layout rather than the registration flow.

What's next

Basic customization — start with the basics if you haven't already
Template customization — customize individual templates within your layout
Custom fields — set up event-level fields to use in your templates