User Interfaces
  • 13 Jul 2022
  • 2 Minutes to read
  • Dark
    Light

User Interfaces

  • Dark
    Light

To give Event Planners the flexibility to change the look and feel of their Events, there are three different UI experiences to choose from.

  • Tabbed: the traditional checkout UI experience for free and paid Events
  • Simple: a single page UI experience for only free Events
  • Full-Width: an adaptive UI experience for free and paid Events

Getting Started

  1. Navigate to: Object Manager > Event > Fields and Relationships > UI Experience
  2. Add the following values:
  • "Full-Width"
  • "Tabbed"
  • "Simple"

Note: These will populate the UI Experience picklist on the Event object.

Getting Started

UI Experience Examples

Tabbed UI

Tabbed UI

Simple UI

Example Simple UI

Full-Width UI

Example FullWidth UI

What is supported for each UI

The following chart dictates what we currently support for each user interface.

  • Yes = Supported
  • No = Not supported, but may work in certain scenarios
Feature Tabbed Simple Full-Width
ADA & WCAG Accessibility (VPAT) Yes Yes Yes
AttendeeLink Yes Yes Yes
Color Theme Yes Yes Yes
Custom Questions (Forms) Yes Yes Yes
Custom Tabs Yes No Yes
Data Dictionary / Translations Yes Yes Yes*
Discount Codes Yes No Yes
Free Events Yes Yes Yes
Paid Events Yes No Yes
FAQs Yes No Yes
Group Registration Yes No Yes
Iframes Yes Yes Yes
Images Yes Yes Yes
Pay Later Yes No Yes
Pre-checkout and Checkout Details Yes No Yes
reCAPTCHA Yes Yes Yes
Session Registration Yes No Yes
Sessions Yes No Yes
Speakers Yes No Yes
Sponsors Yes No Yes
Tracks Yes Yes Yes
Webinar Integrations Yes Yes Yes
Visibility Control Yes Yes Yes
Waitlisting Yes Yes Yes

*Currently the language selector is not visible for the Full-Width UI. Users can set language using URL parameters instead.

UI Experience Setup

First, add the UI Experience field to the Event page layout. This can be done by following the steps below:

  1. Go to Setup.
  2. Navigate to Object Manager.
  3. Click on the Event record > Page Layout > Event layout
  4. Add the UI Experience field to your Event page layout.

UI Setup

Using the Tabbed UI

"Tabbed" is the default UI offered by Blackthorn, this will be used for all Events unless the UI Experience field is changed. The "Tabbed" UI supports both FREE and PAID Events and as many Event Items as you want.

Tabbed UI

Using the Simple UI

After the UI Experience field has been added to your page layout, enabling the Simple UI is simple!

  1. This Event must be a FREE Event. Paid Events are not supported.
  2. Make sure there is only one Event Item on the Event. If there are multiple Events, an error will flag.
  3. Click the UI Experience dropdown, and select "Simple".
  4. Click the Event URL, and check out the Simple UI!

Simple UI

Using the Full-Width UI

After the UI Experience field has been added to your page layout, enabling the Full-Width UI is simple!

  1. The Full-Width UI supports both FREE and PAID Events.
  2. Select "Full-Width" from the UI Experience dropdown.
  3. Click the Event URL, and check out the Full-Width UI!

Example FullWidth UI