Our elegant, sophisticated Modern theme interactive sites don’t just look great – they’re also more accessible.
We wanted you to get these new sites as quickly as possible, so we’re releasing them in beta mode as of this week (April 27, 2026). "Beta" just means there are some very minor design tweaks we'd still like to make. If you’d like to give us your feedback as we continue to refine and develop, we’re keen to hear it – submit your thoughts and screenshots by emailing [email protected] with the subject line "Interactive Sites"
Modern theme Interactive Sites FAQs
How do I get these (and can I update older sites)?
Modern theme will be the default for new interactive sites. It can also be selected (in the Style tab of an existing Interactive Site builder > Details tab) for any events created from September 2025 onwards. If you'd like this feature switched on for older events, or can't see it in your event, please contact Support. You can also clone an older site and change it to Modern theme.
What’s changed
Along with a clean, fresh look and feel, attendees now get clearer indications of how they’re progressing through the site; sites work beautifully on any device; and you get more visual options to play with without needing extra CSS.
Is the builder different?
Apart from some very minor changes (to the brand setup and style tab), everything’s the same. See below for specific tips on styling your Modern theme interactive site.
Accessibility updates
Because this is a beta rollout and these are still in progress, we’ll do a full assessment and report when they’re finalized. In the meantime, though, you’ll find Modern theme interactive sites are much more friendly to accessibility tech. There are also improvements to default color contrast settings (see below).
Styling tips when creating (or updating from an older theme)
Whether you’re building from scratch or updating a site from an older theme, here are some useful tips.
Style tab (in the Interactive Site Builder > Details tab)
Under the Style tab, after selecting Modern theme, you can choose either Multi-panel OR Full page layout:
Multi-panel will display each module component in a separate panel.
Full page layout will show all components in a single continuous panel.
(Examples of each below)
Multi-panel | Full page |
| 
|
Progress indicator
This appears at the top of the site. If the site is eight pages or fewer (not including Sign-In/Thank You pages), the progress indicator shows as dots:
For sites with more than 8 pages, progress appears as "Step {0} of {1}". This text can be localized within the site builder).
For one-page sites, there's no progress bar.
New/updated Brand settings (Setup Panel > Brand)
We recommend you create a separate brand just for your Modern site (cloning an existing brand works well as you can keep your usual colors and fonts, then just make a few changes as indicated below.
If you make changes to the Brand, re-save your site before previewing it (you may also need to clear your browser cache).
Under Style > Details (in the Brand setup):
The “Style” (e.g. ‘Blue Theme Style’) is NOT used in Modern theme sites.
The "Favicon" works as normal.
Under the "Interactive Sites and App Store" heading
Only some settings/options are used by Modern theme interactive sites.
The Interactive Site header image (if supplied) is used at full screen width. Depending on the image and your site’s design, this may not look optimal and you may prefer to simplify or remove the header image from the brand you use for Modern interactive sites.
Do NOT check the box for "Automatically resize to 1000 wide". Correct resizing happens in Modern theme anyway, and checking this box may cause issues with that, depending on your image.
The recommended header image size is 2500 x500px (5:1 ratio), with the central 1500 x300px being a "safe area" visible in full on almost all devices (the top and bottom may crop slightly on very wide monitors) - see below.Recommended file size: 2-3MB or less. Do NOT use a large file size image as it won't be accepted and/or will appear too slowly to site visitors. Your images don't need to be the same resolution as they would for color printing. Read more information about image resolution and file size here.
If a logo is uploaded under Modern Interactive Sites (see below), it will float above this header image and is never cropped.
Footer image & Footer HTML are not used on Modern theme interactive sites.
New settings - Modern Theme Interactive Sites.
The background image is optional. It will cover the entire page background (the panels ‘float’ on top, with a slight transparency). We recommend 2500 x 1500 pixels for the background image. Avoid very detailed images or those with high contrast (you can reduce the contrast or color intensity using an image editing program). The image will crop to the center on tablets and mobile devices. Again, do NOT use a high-resolution image i.e. file sizes should be less than 1-2MB.
The logo, also optional, will sit at the top of each page of your site (centered). It will be placed in front of the header image, if there is one. We recommend a transparent background (PNG).
The page background color is only used if there’s no background image. As for background image, ensure sufficient contrast between background and text.
The page title text color is used when multi-panel layout is selected, for headings that sit above the component (directly on the background image/color) such as the component name (e.g. “Contact”). This color is also used for the site progress indicator.
The primary color is used for buttons and accents (for example, to group radio buttons or indicate selected radio buttons)
The label color is not currently used for Beta release Modern theme interactive sites. In upcoming versions this will be the icon color and text color on primary buttons. For most color palettes this should remain white to contrast well with the primary color while ensuring accessibility.
More information about colors
Your Modern theme interactive site's color contrast will be checked for accessibility and insufficient contrast will display a warning:
In the current beta release, if you're using a darker background image / darker page background, and you want to use isolated HTML components - i.e. not inside other components, you'll need to consider the following: In some cases the HTML will sit outside the panel component (i.e. be directly overlaid on the background image/page background). Over darker backgrounds, you may need to make the HTML text white/light colored.
Accommodation/ hotel images on your interactive site
Hotel and hotel room images may be uploaded either by the hotel (via the Hotel Portal), or by you/your team in the Hotels & Suppliers Library (Application Setup); and/or in the Accommodation module setup for each hotel / hotel room type in your event.
On the interactive site, hotel images display as rectangular for initial search results, or square if the site visitor minimizes the hotel listing. Room type images open in a full-screen lightbox, if the site visitor selects "Photos" on a room type. See examples of all these below:
Recommended hotel image dimensions:
Hotel images - 1600 x 1200 pixels
Maximum file size: 500KB
Recommended Room type images
2000 pixels - maximum height
2000 pixels - maximum width
Maximum file size 2MB
Consider using smaller size/files, as long as they display well on larger monitors. Large load slowly for site visitors.
If you have multiple room-type photos, use the same dimensions/resolution so they look consistent.
Settings under the “Customize Style” tab
[Unless listed below, interactive site settings under this tab aren’t used in Modern theme interactive sites.
For example, “form background” and “input background” settings are not used. This is because, for accessibility reasons, the panel/form color is always white with 90% opacity (slightly transparent to show the underlying image/color).
“Button” and “Button text” colors aren’t needed because the Primary Color/Label Color will be used.]
Text and heading settings (fonts and colors) settings are honored by Modern theme interactive sites. (Note – component headings usually default to Heading 3 style.)
Custom Bootstrap CSS - if you’ve previously added any CSS to your brand, we recommend you either remove it or have a web developer review it (as it may conflict with the updated styling).
Maximum Form Width – we recommend keeping this at 1000px
The “Fix Navigation Bar to the bottom of the screen” checkbox is honored by Modern theme interactive sites.
Input Text – this is mostly not used in Modern theme interactive sites, and usually defaults to black.
Color and image examples
(Note - all these use the same font/typeface and heading/text colors, but this can be adjusted under the Brand's Customize Style tab)
| Brand settings (Details tab) | Result |
Header Image
Light Background image
Logo
Dark Green Page Title Text Color
Purple Primary Color | 
| 
|
Header image
Darker background image
No logo
White Page Title Text Color
Dark green Primary Color | 
| 
|
No header image
No background image
No logo
Purple Page Background
Dark Green Page Title Text Color
Purple Primary Color | 
| 
|