Building your Event App with all the features and information attendees need to network, have fun, and engage is worth every minute of effort. What if you want to spread some of that information beyond the Event App to your website or partner websites? Widgets to the rescue! 🦸‍♀️

Screenshot of a speakers type widget embedded in an event website.

Widgets are a great way to drive registration by giving unregistered site visitors an idea of what to expect from your event. Highlight your key speakers and sessions, give your top sponsors and shoutout, and more!

Contents

Create a widget

In your Event or Community navigation bar under ‘Event App’ or ‘Community’, click Promote, then Widgets, then New Widget. In the modal that appears, click the Feature Type drop-down and select the feature you want to use to create the widget.

Screenshot showing the process just described.

Features include:

  • Agenda

  • Speakers

  • Sponsors

  • Exhibitors

  • Custom List

The process to create a widget is identical for each feature type, so this article's images only show the 'Speakers' feature type.

Select items

After selecting the feature type, enter a widget name. This name appears above the items in the widget when embedded.

Screenshot of the New Widget modal.

Next, click the Add... button. In the new modal that appears, check the box next to the items you want to show in the widget, up to 100 items. If you have multiple instances of the same feature, the Feature Name column shows which feature each item is part of. When you're done adding items, click Add... to close the modal.

Screenshot of the Add Speakers modal.

Back in the New Widget modal, the items you added appear in the Selected area. Click and drag the two-line icon to change the order in which items appear in the widget. Click the Settings (⚙️) icon next to an item to remove it from the widget.

Screenshot showing a user reorganizing two items. The settings menu for another item is expanded.

Click Save Changes to finish creating your widget. 🎉 Repeat these steps as needed to create as many widgets as you want.

Manage widgets

Widgets you've created appear on the Widgets page. Click the Copy Widget Code button to get right to embedding the widget in a website, or click the Settings (⚙️) icon to edit item selections, preview, or delete the widget.

Screenshot of the Widgets page. A widget's Settings menu is expanded.

Widget preview and appearance settings

Click the Settings (⚙️) icon next to a widget, then click Preview. On the preview page, there are several ways to tailor the widget's appearance:

Screenshot of the Speakers Widget preview page with numbered indicators that correspond to the list below this image.
  1. Show Header - Uncheck this box to hide the event icon, name, and date that appear at the top of the widget by default.

  2. Show Background - Uncheck this box to hide the white or black background that appears behind widget elements by default. Since hiding the background makes the widget transparent, your website's background will appear behind widget items instead.

  3. Show Display Name - Uncheck this box to hide the widget's display name.

    1. Show Tracks (Agenda only) - Uncheck this box to hide the track bubbles from the widget.

    2. Show Speakers (Agenda only) - Uncheck this box to hide the speaker icons and names from the widget.

  4. Widget View (except Agenda) - Choose between Grid View or Carousel View. Grid View shows up to the first nine items in rows of three. If there are more than nine items in the widget, users can scroll to reveal more items. Carousel View shows the first three items, and users click arrows on either side of the widget to reveal more items.

  5. Dark mode - Toggle dark mode on to switch the background to a dark background and text to white.

💡 Keep in mind, if you activate dark mode or remove the background, carefully inspect how the widget works with your website after embedding the widget.

As you adjust settings, the preview below updates to reflect your selections.

Screenshot of an Agenda widget preview.

Click Save Changes at the bottom of the page after you're done adjusting settings.

Copy widget codes

On the Widgets page, simply click the Copy Widget Code button to instantly copy the code for embedding in your website. We'll trust that you or someone you work with knows how to do that. 😉

Screenshot of the widgets page. The Copy Widget Code button is indicated.

Widgets in practice

After embedding a widget in a website, add items to or remove items from the widget at any time, and the widget updates automatically. No need to re-copy the widget code. 🙌

💡 Keep in mind, new feature items are never automatically added to widgets. You must manually select items.

Widgets set to the Carousel View show the first three items, as illustrated in the image below. Arrows on either side of this view let website visiters scroll to reveal more items. Widgets set to Grid View show up to the first nine items, and users can scroll freely within the widget to reveal more items.

Screenshot of a sponsors widget set to carousel view embedded in a website.

The speakers, sponsors, exhibitors, and custom list widgets are view-only, so clicking on items doesn't reveal more information. However, when a website visitor clicks on a session, a small modal appears where visitors can read the full session description.

Screenshot of the session details modal in the Agenda widget.

Now you know how to create content widgets. Did you know you can also embed your Webex Events Registration ticket options?

Questions? Chat with us or email support@socio.events

Did this answer your question?