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.
The Agenda and Speakers website widgets are available now. We'll update this article when new website widgets become available.
Adding EventsAir website widgets (dynamic elements)
You can add EventsAir website widgets from under the “Elements” (plus icon), under the heading "Events". 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.)
The Agenda website widget is often the first one you'll want to add to your event website.
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 Agenda).
The Cog icon will take you to Settings.
Adjust information settings
For each website widget, you need to review the settings for which information will be pulled through from your event.
For example, in the Agenda Settings panel, you can alter settings such as which paper statuses should be displayed.
There are other settings you can change too.
The Modern Event Website Agenda will always display times/dates based on the event time zone, regardless of browser time zone.
Getting your website widget to display the right information
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. (You need to have set up these statuses beforehand in your Presentations module.)
Each website widget will have its own settings. For example, in the Agenda widget, you can also add a Heading (such as "Agenda") and Subheading (text), show the search/filter features, and show/hide other presentation-related information (such as co-authors and affiliations).
Review these settings, and preview your event website preview to make sure the information you want to show is displayed correctly.
As new settings and features are added to website widgets, you'll need to edit the settings and republish websites you created before these features were available.
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.
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.
Speakers website widget - Settings - General Tab
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 or beneath it for the widget toolbar.
Then click the cog icon for Settings.
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).
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 information to display on the event website, with regard to Session Roles, Presenters, and Featured Speakers.
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.]
You can select/deselect Session Roles here in the website widget settings to have them 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. They'll be shown as a Presenter (if the "Presenting" box is checked).
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. You can choose whoever you like to appear in the "Featured" list (or whatever label you choose for that list/label). The listed 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 remainders are set by default to off, but can be switched on:
Show Non-Presenting Co-Authors
Show Keywords
Show Affiliations
Show Handouts
Presentation ordering display
As with the Agenda website widget, presentations are ordered by their Order Number (if available), then by their Start Time.
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).
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.
There are four 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:
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
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:
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).
Other website widgets
For updates on other EventsAir website widgets, such as Speakers, Exhibitors, and Sponsors, please bookmark this article and check back here after new EventsAir versions are released.
In the meantime, note that all EventsAir widgets will work much the same way - you'll drag them into a block on your page (from under "Elements/Events", and mock content will appear. Click on the widget to reveal the toolbar (either above or beneath the widget), then use the colored tile to adjust colors, and the Settings cog to adjust what's shown in the website widget (based on what you've set up in your event). In some cases, you can also control colors and headings based on setup inside the relevant module (e.g. Sponsor rankings).