This article is about website widgets - dynamic elements that can be added to event websites built using the Modern Event Website builder. Read more about creating event websites in the Modern builder here.
Adding EventsAir website widgets (dynamic elements)
You can add EventsAir website widgets from under the “Elements” (plus icon), under the heading "Events".
You can add website widgets for your Agenda, Speakers, Sponsors & Exhibitors.
These website widgets will update automatically on your website when information is changed in your event. (This may not always happen instantly but will be within an hour and usually sooner. You can also use the "Manual refresh widget data" button in event website Settings for immediate updates.)
The Agenda website widget is used as the main example throughout this article, but the same principles apply for all website widgets (such as how to add them, where to find settings etc.)
For example, to add the Agenda website widget, look for Agenda (in "Elements", under "Events") and drag it into your page, onto a block (you need to add a blank block first).
In the builder view, you'll just see example content after adding a website widget such as your agenda. In other words, you won't see your actual event data in the builder. However, you can still adjust the settings and styling etc., then preview your site to see your actual event data.
Find the website widget toolbar
To make changes, click on the widget (e.g. Agenda) itself, then look for the tools (these may appear at either the top or the bottom of the widget).
The Cog icon will take you to the widget's main Settings.
If some items aren't appearing when you preview your event website, (for example, if presentations don't appear in your Agenda), check the website widget settings. For example, to make sure you've added in the correct paper statuses, which you need to have set up beforehand in your Presentations module. See section at the end of this article for more about widget information settings.
From the widget toolbar, you can access color settings (using the 🟪 icon) and typography ("T" symbol).
Website widget colors
Click the website widget and look for the tools (which may appear under or above the widget). Click on the colored tile to access the color options for the website widget.
This will open the color settings tool.
Different website widgets will have different color setting options. You can see in your site builder how color changes look with the placeholder content, then preview the changes with your real event content by updating and previewing your event website.
Agenda Colors toggle
You can also toggle on Agenda Colors [from your event's Agenda panel.]
There are four main colors you can adjust on website widgets (such as Agenda and Speakers) in the Modern Event Website Builder: Primary, Secondary, Light and Extra Light/X-Light.
Here's an overview of where each one appears (for the Agenda, in this example). You'll see the changes in your builder when you make adjustments:
Examples for Agenda website widget (default settings):
PRIMARY COLOR:
Search bar font & border / Search bar background fill on hover
Day & date – background fill (reduced opacity)
Agenda Headings, Information, and Breaks/Activities font / Information, Session & Function titles on hover
Speaker information pop-up - heading block background
By default, in the non-hover state, Session and Function titles are black on a white background. (Primary color on hover.)
Track name colors are based on agenda settings in the event. Track name border color will be same as font color.
Keywords all show as gray.
SECONDARY COLOR:
Date navigation headings (reduced opacity to indicate non-selected)
LIGHT COLOR:
Card shadow
Break/Activity background
EXTRA LIGHT COLOR:
Agenda background
To see how your real agenda looks with these color adjustments, use the Preview tool (next to the Update option in the bottom-right toolbar); or use the preview speed-key (CTRL+SHIFT+P).
Adjusting colors (if using a dark background)
(Note that “Light” and “Extra Light” are more like “Contrast” and “Extra Contrast” in this type of color scheme.)
Below is an example of how these colors are used for an Agenda widget. You'll see these color options in the Widget Toolbar color picker, not in the right-hand panel as shown in the screenshot.
Agenda Track [name] examples - font and border colors
The Track Color you set in the Agenda builder in EventsAir becomes the font and border color when the track name is displayed in an Agenda in a Modern event website. (If your track color is white, the white border is only visible only on a colored background, e.g. for breaks/activities.) See below for an example.
In EventsAir Agenda Panel:
On your Modern Event Website:
To create a colored font (and border), choose a color other than white for “Track Color”.
If there’s insufficient contrast, you’ll see a warning in the Track color settings (in the Agenda builder, in EventsAir). You should change either the track or background color to create greater contrast for ease of reading. See below:
You can also toggle on "Use Agenda Colors" to see your Agenda Session, Heading, Break/Activity colors appear on the left of each agenda item.
This setting is off by default, and can be found in the Agenda Settings, Styling tab.
Website widget Typography
Use the "T" icon on the website widget toolbar to access typography settings for the website widget.
You can only select one typeface/font for the whole widget (e.g., for the whole Agenda).
Other styling and effects
Click the website widget toolbar and select "Settings" (the cog icon) to see other styling and effects options such as you'd see for other blocks on your event website (such as padding, transform features like scale and offset, and animation effects).
Website widget 'information' settings
For each website widget, you need to review the Settings to choose which information will be pulled through from your event. [Remember, when you drag a website widget into the builder, you'll only see placeholder (mock) content in the builder. The real event content will be visible when you preview your actual event website.]
Each website widget will have its own information settings - see detailed summary for each widget further below in this article.
For example, in the Agenda Settings panel, you can select which paper statuses should be displayed.
Review these settings, and preview your event website preview to make sure the information you want to show is displayed correctly.
If new settings are added to a website widget after you initially set it up, you may need to edit the settings and republish websites you created before these features were available.
To see a widget's information settings, click anywhere on the widget itself, then look for the toolbar (above or below the widget), and click the Cog icon to open the Settings panel.
Agenda website widget
The Agenda website widget can display session information, presenters, headings, information and breaks/activities.
If the session/agenda item checkbox for "Do not publish to event website & portals" is enabled, the session/agenda item will not be shown.
When site visitors click on an Agenda session, this will open a pop-up with more details about that session. They can then use arrows to scroll to other session, or expand the presenter cards or presentation items for more details such as biography or presentation type.
In the Agenda Settings tab, the default settings are:
No heading and no sub-heading, but you can add them.
Agenda Search/Filter is enabled, but you can switch it off.
Keyword labels on Sessions are included (if you have them set up).
You need to select which paper status (or statuses) and which handout type(s) will be displayed. There's no default selection, as these are created by you in your event (so there's no standard option).
The author/owner of a presentation item will automatically show.
By default, your agenda will show any Presenting Co-Authors AND Non-Presenting Co-Authors (listed with role on Presentation items), but you can switch either or both of those off.
Affiliations listed on a Presentation item will also show by default, but this can be switched off.
There's also a "Show Titles" setting (not shown in the screenshot) to show courtesy titles (Dr, Mrs, Mr etc.) if you'd like these included. Job titles ["Position"] are shown by default if available.
For options to be available to show/hide in the Agenda website widget, you need to have created the relevant sessions, roles, and other features such as documents and keywords in the Presentations module; set up Functions you want on the Agenda in the Functions module; ensured that Agenda items appear on the correct days and times in the Agenda panel; and (for presentation and presenter details), added Presentation items to Contact records.
Agenda times/dates:
The Modern Event Website Agenda will always display times/dates based on the event time zone, regardless of browser time zone.
You can change the Agenda time display from am/pm (the default) to 24-hour time.
Speakers website widget
The Speakers website widget will display a searchable list of all event speakers (and you can also configure it to show people with other session roles). The widget will show each person's photo (or a graphic with their initials if no photo is available), name, organization, position, and short biography. [Note: Session Role label doesn't appear.]
On the Event Website, your speakers are shown under a default heading Our Speakers. The sub-heading is some brief text ("Meet our distinguished speakers and industry experts".) You can change both of these (or remove them) in the website widget settings.
As with other website widgets, to see the settings for the Speakers website widget in the Modern event website builder, click on the widget and look above it or beneath it for the widget toolbar.
Then click the cog icon for Settings.
Speakers website widget - Settings - General tab
In the Settings-General tab, you can edit the heading and sub-heading, switch Search off or on, and set the default view (List or Grid). [The site visitor can change the view from Grid to List (or vice versa).]
By default, Titles, Bio Excerpts, and "Show Featured Speakers" are switched on.
Speakers can be marked as Featured (or another label of your choice). Featured Speakers are shown first in the list (or at the start of the grid) and the label (e.g. "Featured") appears over their photo.
Non-featured speakers will appear after them, in alphabetical order.
Speakers website widget - Settings - Speakers tab
You can nominate specifics about which people will appear on the event website, with regard to their Session Roles, Presentation type/status/author attribution, and Featured Speakers. Selections will be available based on what's set up in your event (In the Presentations module, and on Presentation items.)
SESSION ROLES SECTION
Your speakers list will be able to show any presenters AND anyone with a designated session "role" (under the Roles tab in Session Setup, in the Presentations module). [Ensure the “Online Agenda” checkbox is enabled when creating Role names.] The actual role name won't appear.
You can select/deselect Session Roles here in the website widget settings to have people with specific roles display / not display on the event website.
You can also select/deselect display for some or all Presentation Types (based on what you've set up in your Presentations module) and Presentation Status (which is the same as Paper Status).
PRESENTERS SECTION
By default, the author(s) listed under the Authors tab, (on the Presentation item on the relevant contact record), will be listed in the Speakers widget.
NOTE: If a contact is a presenting author for one presentation, and a non-presenting author/co-author for another, they'll still appear in the Speakers list.
FEATURED SECTION
Anyone associated with a presentation item and/or session role will be listed here in the settings dropdown. You can choose whoever you like to appear in the "Featured" list (or whatever label you choose for that list/label). The list is ordered by alphabetical surname, and is searchable.
Speakers website widget - Settings - Profiles tab
These settings relate only to the Profile view (after a site visitor clicks on a speaker).
Default settings are shown below:
Show Sessions will show/hide sessions that the speaker is involved in, either as a role or speaker. Depending on whether they have a session role or presentation, the layout changes slightly.
The remaining settings are set by default to off, but can be switched on:
Show Non-Presenting Co-Authors
Show Keywords
Show Affiliations
Show Handouts
The Design and Effects tabs work the same way as they do for other elements in the Modern builder.
Presentation ordering display
As with the Agenda website widget, presentations are ordered by their Order Number (if available), then by their Start Time (based on event time zone).
Exhibitors website widget
The Exhibitors website widget will display a searchable list of all Exhibitors.
On the Event Website, your Exhibitors are shown under a default heading Exhibitors. The default sub-heading is "Meet our partners". You can change both of these (or remove them) in the website widget settings.
As for other website widgets, after dragging in the widget, you'll see demonstration content in the builder, and can click on the widget to see the widget toolbar (either above or below the widget). Click the Cog icon to see Settings.
Exhibitors website widget - Settings - General tab
The default settings for the General tab are shown in the screenshot below. You can edit the heading and sub-heading, select default list or grid view, show/hide the search option, and choose to show/hide Exhibitor organization names, stand numbers, and profile excerpts.
You can also select an action to occur when a site visitor clicks on the Exhibitor's logo - either display their profile, or open their website.
If you select "Open website" for the "on Logo Click" action, the Exhibitor's website (based on what's in the Contact module of the Exhibitor item contact) will open in a new tab.
If you select "Display profile" for the "on Logo Click" action, when the Exhibitor logo is clicked, a new pop-up opens showing all available details (with arrows to allow scrolling through the exhibitor list). (See screenshot below.)
Exhibitors website widget - Settings - Exhibitors tab
The default settings are to show all stand types and show Rank headings, but you can choose which stand types to display, and switch off Rank headings if you prefer.
Exhibitors website widget - Settings - Profiles tab
The default settings is to show brochures but you can switch this off.
The Design and Effects tabs work the same way as they do for other elements in the Modern builder.
Sponsors website widget
The Sponsors website widget will display a searchable list of all Sponsors. You can choose to show or hide organization names, brochures and different levels of sponsorship (i.e. sponsorship packages).
Sponsors website widget - Settings - General tab
Many of the settings work (e.g. "click on logo" action) work the same way as they do for the Exhibitors widget.
However, there is no "Sponsor search" feature. Another difference is you can change the size of the Grid display (the default is Medium, but you can also select Small or Large).
Sponsors website widget - Settings - Sponsors tab
You can select which Sponsorship "levels" (called Sponsorship Packages in EventsAir) to show in the list, and whether or not to add Rank Headings (these are switched on by default, but will be blank unless you've added them into the Sponsorship module setup).
Sponsors website widget - Settings - Profiles tab
The default settings for Profile view are "Show Rank Label" (which will add the Rank Heading as a small label, in Profile view) and "Show Brochures".
For both Exhibitors and Sponsors website widgets:
Rank headings are still set up in EventsAir. (Example below - in Stand Type settings, in the Exhibition module setup.)
You can group Exhibitors [or Sponsors] by rank heading OR list/show all of them (not separated by rank), in alphabetical order.
Website users can choose either grid or list view (indicative images below, for Exhibitors).
Manually refresh widget data
When your event is updated, changes in website widgets will appear on your event website within an hour, but you can also go into the Settings tab of your event website and press the "Manually refresh widget data" button to refresh the data.
