Skip to main content
All CollectionsEvent AppDesign and Customize
Embed Event App Content with Widgets
Embed Event App Content with Widgets

Show session, speaker, sponsor, exhibitor, and custom list feature content on your website with convenient embed widgets

Daniel Murphey avatar
Written by Daniel Murphey
Updated over 2 months ago

Building your Event App with all the features and information attendees need to network, have fun, and engage meaningfully 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! 🦸‍♀️

A speakers type widget embedded in an event website.

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

Create a widget

  1. In your Event navigation bar under ‘Event App’, click Promote.

  2. Click Widgets.

  3. Click the New Widget button.

  4. In the 'New Widget' modal, click the Feature Type drop-down and select the feature you want to use to create the widget. Features include:

    • Agenda

    • Speakers

    • Sponsors

    • Exhibitors

    • Custom List

      The steps just described.

No matter which type you choose, building the widget is the same, so the following instructions show and refer to the 'Speakers' feature type.

Select items

  1. After selecting the feature type, enter a widget name. This name appears above the items in the widget when you embed it.

    The New Widget modal. Speakers is selected as the feature type.

  2. Next, click the Add Speakers button.

  3. In the 'Add Speakers' modal, 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 type in your Event App, the 'Feature Name' column shows which feature each item is part of.

    The Add Speakers modal.

  4. When you're done adding items, click Add Speakers to close the modal.

  5. Back in the 'New Widget' modal, the items you added appear in the 'Selected' area. Click and drag the six-dot cluster to change the order that items appear in the widget.

  6. Click the Settings (⋯) icon next to an item to remove it from the widget.

    A user reorganizing two items. The settings menu for another item is expanded.

  7. 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 embed the widget in your website, or click the Settings (⋯) icon to edit item selections, preview, or delete the widget.

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 customize the widget's appearance:

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 Widget 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 can click arrows on either side of the widget to reveal more items.

  5. Dark Mode - Active this toggle to switch to a dark background with white text.

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

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

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 so you can embed it in your website. We'll trust that you or someone you work with knows how to do that. 😉

The Copy Widget Code button on the Widgets page.

Widgets in practice

After you embed a widget in a website, add 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 visitors 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.

A sponsors widget set to carousel view embedded in a website.

When a website visitor clicks on a widget item, more details appear where visitors can read about the item.

The session details pop-up in the Agenda widget.

💡 Keep in mind, booth cover images don't appear in the widget's item details.

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?