Skip to main content
Hudl

Widget Creation, Editing, and Embedding

Widgets are a tool used to host BlueFrame's video player and broadcast selection area. The widget is hosted on a BlueFrame created site or separately embedded in your own site.

Part of a conference network or have a Web App design portal page? BlueFrame Support Staff must be contacted to edit your portal page, and this article will not be applicable.

Table of contents

Initial Creation

  1. Log in to vCloud and navigate to the Widgets tab under Distribute.

  2. Click Operations>Create Widget.

  3. Input information on the Widget you are creating. Below are the key pieces of information to enter:

    • Widget Name - what the widget will be named and displayed within vCloud.
    • Associated Sites - These are the sites that will populate the widget. The broadcasts that stream on these sites will display on the widget.
    • Default Site - The selected site's content will be the only content displayed on the widget by default on an initial load. The viewer would need to select another site for that content to populate it. For all selected sites' content to populate the widget, leave this area blank.
    • Select sections to populate this widget (optional) - these are the sections that will populate the widget. By default, all of our available sections will populate widgets. Type in specific sections to narrow it down to just those that are selected.
    • Date Range - Only broadcasts between the selected dates will display on the widget. Leave blank for all broadcasts to populate your widget.
    • When the widget is loaded show - The widget will by default on an initial load, display either the most live stream or the most recent archived event.

  4. Other than the required fields, most instances of creating a widget do not require changing the other settings. Once you have filled out the desired information, click Create.

Editing the Visual Style

  1. You will then be taken to the Visual Style page of the Widget Editor. This is also a preview of what the widget will look like on your site.

  2. On the left-hand side of the screen, there is a Select Section to Edit option, by default you will be on General Settings.

    Background Color - The color behind each broadcast in the area where each broadcast is listed.

    • Background Hover Color - The color change that occurs when the viewers' mouse hovers over the broadcast.
    • Broadcasts per Page - how many broadcasts are displayed by default on the widget display area.
    • Show Social Sharing Button? - Gives each broadcast a share button that provides a direct link to the broadcast and various options to share via social media.

  3. Tabs & Filters

    Show Filters - Determines if filters for broadcast searching are displayed. Filters are search fields that can accompany the widget and allow viewers to narrow down their broadcast searching.

    Filter Color - The color of the bar that is utilized to Search

    Select Tabs - This shows which tabs are displayed above the broadcast listing.

    Select Filters - This allows you to choose which fields viewers can use to search for broadcasts and narrow down their searching.

  4. Show More

    Show this Option - This enables or disables the show more button at the bottom of the widget that allows for more broadcasts to be loaded into the list.

    Font Color, Color, Hover Color - Determines the color settings surrounding the Show More button


Embed Code

  1. Navigate to the Widgets section under Distribute.

  2. Click the Wrench icon to go to the visual widget editor page for your selected widget.

  3. On the visual widget editor page click Embed Code. This will open a window that shows the HTML embed code that you will copy and paste onto your own web page.