Introduction
Widgets are embedded in web pages or apps, typically using HTML or JavaScript, to display content seamlessly. They aim to deliver ads smoothly, enhancing user experience while allowing customization in size, position, and timing.
Prerequisites
To successfully create a widget activated that is activated for video monetization, it's essential to follow steps 1-3 from the Truvid Ad Integration Guide for Publishers.
Additionally, ensure you have a clear understanding of the various widget types to select the widget that best aligns with your Content Strategy. For more information on widget types see the article, What Types of Widgets are There?
How to Create a Floater Widget
-
Getting Started
1.1. Navigate to the Widgets Player Item: Start by clicking on the "Widgets" menu item located in the navigation panel on the left side of the Truvid interface.
1.2. New Widget: On the right side of the page, click on 'Create Widget.'
-
General Settings
2.1.Widget Type: Select your widget type from the options provided then press ‘Next’.
2.2. Widget Name: Choose a name for your widget.
2.3. Ad Settings: Choose your ad settings, including pre-roll, mid-roll, and the number of ads.
2.4. Widget Device: Select the device compatibility for your widget - decide whether you want your widget to load on both desktop and mobile. Please be aware that deselecting one option is not advised, as it will prevent the widget from loading on that particular device. then press ‘Next’.
2.5 Sound Mode: Set the sound for your widget as on or off.
2.6. Click Next: A page will appear with the desktop and/or mobile settings where you can set individual settings for both.
-
Floater Settings
3.1. Floater Orientation: Choose Floater Orientation – Horizontal or Vertical (currently, only Horizontal is supported).
3.2. Floater Size: Choose Floater Size - Lock Ratio changes the width accordingly to suit the height or changes the height accordingly to suit the width.
3.3. Position: Choose where you want your floater to appear on the page.
3.4. Padding: Choose the number of pixels for the floater from the bottom of the screen.
3.5. Frequency Cap: Choose the amount of times the player loads in a chosen time period.
-
Mobile Settings for Floater
4.1. Replicate Settings for Mobile: Repeat steps 2.1 to 3.5 for mobile settings, if applicable.
4.2. Complete Mobile Settings: After completing steps for Mobile settings, click next.
-
Finalizing Your Widget
5.1 Finalize Widget: A summary of the widget you created for the selected devices will be shown. Click “Create” to finalize and generate the widget.
-
Choosing and Assigning a Playlist
Widget plus playlist is what will provide the code needed so that the ad player can run on your website.
6.1. Select Playlist: Choose your playlist you want to run through your widget, then the code will appear.
6.2. Copy Code: Copy the provided widget code to your clipboard, for embedding.
-
Embedding Your Widget
7.1. Embed Code: Implement the widget code into your site's HTML. See, How to Embed a Widget article for instructions.
Conclusion
This article has been a guide in the creation of a Floater widget. These widgets are designed to float over content and provide continuous visibility as users scroll and are ideal for maintaining user attention.
Next Steps: Select Content to play in your widget
Once you have successfully created a widget, the next step is to choose your content strategy and embed the widget on your website so you can start streaming relevant content and activate ad monetization.
Depending on your content strategy, you can choose either to feature a single video in the widget or to incorporate a playlist. For guidance on how to embed a single video into your widget, please refer to the article, How to Embed a Single Video. Alternatively, if you prefer to create and use a new playlist in your widget, you can find comprehensive instructions in the article, How to Create a New Playlist.