Widgets & iFraming

Owned by caitlin.mueller@touchcast.com
Last updated: Jul 27, 2023 by Marina Soroka
3 min read

Overview

This feature allows event organizers using third party widgets while integrating them elegantly into the Showtime event experience.

Note: Accounts/subscriptions to the third party services are typically paid for by the client independently.

The third party widgets are integrated via iframe code. The iframe is then displayed on the side panel within the experience.

Adding Widgets

To add widgets, the Event Administrator needs access to the CMS Settings. In Settings, look for Custom Codes sub-menu and scroll down to the bottom of the page to locate the “Panel Widget Codes” section.

 

Add the Widget Tab label - this is what the event attendees will see as the name of the tab when they navigate to this section on the event page. 

Widget location - depending on the purpose of the widget, it can be displayed either only on the Main page, only on the Player page or on both. The widget will be available at all times until it’s removed from the Settings.

Copy the iFrame code from the third party service. Example:

<iframe id="interprefyiFrame" src="https://interprefy.interpret.world/loginlink?token=widgetdemo" height="100%" width="100%" scrolling="no"> </iframe>

 

Hit Save. Now the widget is enabled on the event page!

Examples of Use Cases/Services

Slido http://Sli.do

In the CMS:

On the Event Page:

Interprefy

In the CMS:

On the Event Page:

Limitations

  • Maximum of 3 widgets is allowed to be added to one event page.

  • The widget must allow for iFraming; otherwise it will fail to display.

  • When adding a widget, ensure its compatibility & formatting is correct across mobile, desktop, and different browsers.

  • The widgets are not customized per track, so the experience will be consistent for that widget regardless of the track you are in. That is to say, there cannot be multiple versions of the same widget available for multiple tracks (ie. cannot have Slido polls specific to the different tracks’ contents, or Interprefy translation lines specific to different content across multiple tracks).

Panel specs

  1. Desktop

    1. width - 360px

    2. height - 100% minus 110px (panel header)

  2. Mobile

    1. width - 100%

    2. height - 100% minus 16/9 height of the device (panel header).