What is a widget, and where and how can it be set up?



TABLE OF CONTENTS



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 home page.

To do this, go to the menu PLATFORM > Layout > Home > Create a 'Widget' component.  It behaves like a Mosaic and Carousel component. You can add and position as many widgets as you like on your home page.


On a specific page, Content, Smartlist and Casting.

To do this, go to the PLATFORM > Layout menu and select one of the following headings: Content page, Smartlist page or Casting page. In the configuration of these pages, the last option is whether or not to activate a widget. To change the display and layout of a widget on a specific page, refer to the Variable function further down the help page.



How to set up a widget?

Our widgets can be modified in different ways.

1. Widget parameters

First you need to choose the parameters for this widget, the width and height, so that you know how much space the widget will take up on the homepage.


The width can be defined as a percentage or pixel (100%, 500px for example). Height can also be expressed in the same way, but you can also set it to "auto" mode, which will try to calculate the optimum space the widget should take up. Auto mode is recommended for a page containing only text and images.


You can then choose whether or not to activate the scroll bar: if it is not activated, the widget will only display what is possible to display, depending on the height you have given it.


2. Widget content

The widget can be configured using HTML code or a URL:


- HTML code: you can enter this code directly into the editor, with the option of using the Liquid open source templating system.


For example, display a specific page using its UUID :

{% if uuid == "zfezfzefzegfzgzrgzrgzrgz" %}


For a configuration linked to Variables, add :

{% if custom_params.display == "Valeur de la variable" %}



- URL: here you enter the URL address of your widget, which can be an html file, a website or an application.





How do I set up variables?

You can set up variables for some of your pages. These are dynamic pieces of information about the widgets that allow you to adapt them to your users' needs. They can be found at the bottom of a page and are represented by the following fields:  


First of all, add the following to the widget's HTML code:

{% if custom_params.display == "Variable Value for example true" %}


Then, for example, for the variable, specify a value of 'true' so that the widget is only visible on pages with the value 'true'.


The variable names and values are defined in the pages, then injected into the widgets by inserting them into 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 !