Widgets are new types of components that you can now set up from your back office.  What is a widget, where and how to set it up?

What is a widget?

A widget is an interactive tool that will allow, for example, to display information or entertainment or to give access to different services (articles, links). Some widgets can be used to display advertisements, information such as stock market prices or weather forecasts, while others can be used to play basic video games.

Where to set up a widget?

For the moment, widgets are only available on web and mobile applications.

From your back office, you have two places to set up a widget:

  • On your homepage: the widget is a new type of smart component that you can set up in the same way as the mosaic and carousel components. On your homepage, you can set up as many widgets as you want, there is no limitation.
  • On the Content, Smartlist, Casting pages: in the configuration of these pages (in Platform > Layout) you choose how the different pages of this type will look like on your platform. For each of these types of pages, you can choose to activate or not a widget.

How to set up a widget?

On your homepage

  • Widget settings:

First of all you have to choose the parameters of this widget, the width and the height, in order to know the place the widget will take on the homepage. The width can be defined in percentage or pixel (100%, 500px for example). The length can also be expressed in the same way but you can set up the “auto” mode which will try to calculate the optimal place the widget should take and use it as a length value. The auto mode is recommended for a page containing only text and images.

You can then choose to activate or not the scrollbar: if it is not activated, the widget will display only what is possible to display, according to the height you have given it.

  • Widget content:

The widget can be configured via HTML code or via a URL

    • HTML code : you can enter this code directly in the editor, with the possibility to use the Liquid open source templating system.
    • URL : here you enter the URL of your widget, which can be an html file, a website or an application

On a Content, Smartlist or Casting page

You can choose to activate or not the widget on the chosen page type: Content, Smartlist, Casting.

Then, for the widget settings and content, it is the same configuration as for the homepage widgets.

  • Widget settings:

First of all you have to choose the parameters of this widget, the width and the height, in order to know the place the widget will take on the homepage. The width can be defined in percentage or pixel (100%, 500px for example). The length can also be expressed in the same way but you can set up the “auto” mode which will try to calculate the optimal place the widget should take and use it as a length value. The auto mode is recommended for a page containing only text and images.

You can then choose to activate or not the scrollbar: if it is not activated, the widget will display only what is possible to display, according to the height you have given it.

  • Widget content:

The widget can be configured via HTML code or via a URL

    • HTML code : you can enter this code directly in the editor, with the possibility to use the Liquid open source templating system.
    • URL : you enter here the URL address of your widget, which can be an html file, a website or an application

 

How to set up variables?

You can set up variables on the widgets you create on these types of pages.

For example, these variables can allow the widget to be displayed or not depending on the page concerned.

In the key of the variable, indicate widget_visible and in values true or false so that the widget is visible only on the pages where the variable has the value true.

The key and value of the variable are defined in the Content, Smartlist or Casting pages and will be injected in the widgets by inserting it in the html code.

Examples of widgets to set up

A YouTube video

To easily share a YouTube video on your platform with the widget option, it’s very simple:

Option 1

  • Click on the “Share” button and choose “Embed”
  • Grab the correct url/link from the code which is everything inside the src attribute. The embed URL will so look like https://www.youtube.com/embed/XXXXX

Option 2

  • Right click directly on the video and choose the option “Copy embed code” OR click on “Share” then “Embed” and finally “Copy”

  • In the widget, paste the integration code directly into the HTML code editor

Note: to integrate several YouTube videos in the same widget, go to :

Widget settings :

Width 100%      Height auto

Activate the scroll bar: Yes

Content of the widget in the HTML section, a code like :

<div style=”display: flex; align-item: center; justify-content: center”>
<div style=”margin: 5px”>
Video 1 embed code
</div>
<div style=”margin: 5px”>
Video 2 embed code
</div>
<div style=”margin: 5px”>
Video 3 embed code
</div>
</div>

 

Interactive content with Genially

Genially is a very ergonomic tool to easily create interactive content. With this tool, you can create infographics, video presentations, interactive images, games, etc. Once the content has been created, you can publish it and copy/paste the embedding code into the widget content.

 

A Mailchimp form

You may already be using Mailchimp to communicate in different ways with your users.

It is quite possible to include Mailchimp in the widgets you set up from your back office.

On your Mailchimp profile and from your dahsboard :

  • Go to “Signup forms”
  • Select “Embeded forms” and set up the form parameters of your choice
  • Click on “Generate Embed code” and copy it
  • Go back to your back office and paste the code in the widget content

WARNING: the added widgets must be handled with care because they can slow down the display of your homepage and interfere with analytics or Google scripts.

Other examples of widgets to implement will be added gradually.

With widgets, make your platform more dynamic than ever and increase your audience’s engagement.

If you have any questions, contact us at support@okast.tv.