Truvid Help Center
Breadcrumbs

How to Create an In-Article Widget

Introduction

Widgets, the frame in which the video player plays content, are embedded in web pages or apps, using HTML or JavaScript, to display content seamlessly. They aim to deliver content smoothly, enhancing user experience while allowing customization in size, placement and timing. 

Prerequisites

To successfully create a widget activated for Video Monetization, it's essential to follow steps 1-3 from the Truvid Ad Integration Guide for Publishers.

How to Create an In-Article Widget

1. 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.'

2. 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.6. Click Next: A page will appear with the desktop and/or mobile settings where you can set individual settings for both.

3. Desktop Settings for In-Article Widget

3.1. Widget Orientation: Choose Widget Orientation – Horizontal or Vertical. It is recommended to use Horizontal orientation for desktop and Vertical orientation for mobile to ensure optimal layout and user experience across devices.

3.2. Player Initiation Mode: Select the player initiation mode for your widget. 

3.3  Sound Mode: Set the sound for your widget as on or off. 

3.4. Widget Size: Choose Widget Size - Lock Ratio changes the width accordingly to suit the height or changes the height accordingly to suit the width.  

4.1. Click Next: A page will appear with the desktop and/or mobile settings for the floater, where you can configure individual settings for each.

4.2  Floater Settings

4.3. Floater Orientation: Choose Floater Orientation – Horizontal or Vertical. We recommend using Horizontal orientation for better ad display and overall performance.

4.4. Floater Size: Choose Floater Size - Lock Ratio changes the width accordingly to suit the height or changes the height accordingly to suit the width.

4.5. Position: Choose where you want your floater to appear on the page.

4.6. Padding: Choose the number of pixels for the floater from the bottom of the screen.

4.7. Frequency Cap: Choose the amount of times the player loads in a chosen time period. 

5. Mobile Settings for In-Article

5.1. Replicate Settings for Mobile: Repeat steps 3.1 to 4.2 for mobile settings, if applicable.

5.2. Complete Mobile Settings: After completing steps for Mobile settings, click next.

6. Finalizing Your Widget

6.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.

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

7.1. Select Playlist: Choose your playlist you want to run through your widget, then the code will appear.

7.2. Copy Code: Copy the provided widget code to your clipboard, for embedding.

8. Embedding Your Widget

8.1. Embed Code: Implement the widget code into your site's HTML. See, How to Embed a Widget  article for instructions. 

Conclusion

Widgets are adjustable in size and position, enhancing user experience and boosting engagement. Choosing the right widget type depends on the nature of your web content and your specific content objectives.  

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.