This Data Provider allows you to display On-air social content that was curated, moderated, and added to a collection.
This social content could be:
Posts collected on Twitter, Facebook, and Instagram
Comments or replies collected on Facebook, Instagram, Youtube, WhatsApp, and Twitch.
Use this Data Provider if you would like to build your own social content graphics layout such as Lower thirds, L-bars, crawlers, Tickers, banners, etc.
In the case you are looking for a predefined graphic then we recommend using the Comments Widget in any of its available layouts.
Before using a Collection Data Provider you should have created a Collection.
Remember, an Overlay will be created automatically if you didn't add it to Tree after adding the Provider.
To learn how to add elements to the Tree, click here.
Working with a Collection Data Provider
1. Pick a Collection
After adding the Collection Data Provider to the Tree, on the Inspector click on Pick a Collection.
(1) Click on the Collection Provider in the tree.
(2) From the list pick the one you want to use.
2. Data Binding
Add a Dynamic Content List as a child of your Collection Provider, and connect the list to the Posts Data
3. Pagination
Use the pagination to set the number of posts you want to show at the same time.
(1) Click on Dynamic List in the Tree.
(2) Next to the data source find the Filter icon then click on it and select Pagination.
(3) Use the Items per page option to set the number of posts you want to show at the same time.
(4) Use Start From Item option to set from which position in the list (collection) the content will start cycling.
4. Layout
From here you can start adding as children of the List item all the Building Blocks you consider necessary to build your graphics and you can position them in the place you want inside the canvas.
You can add the elements in the order you want, you can also add more or fewer elements. We will be showing the basics then you decide what to show and how.
Text
Text
(1) Add a Text Element. As a good practice, rename it by double-clicking on it, so you can identify them while building your Graphics.
(2)You can connect the text element to the following post data:
Username: To show the Username of the user that posted that content.
Handle: To show the handle of the user that posted that content.
Creation Date: to show the post creation date.
Source: to show the written Social Media name.
Note: you must add a text element for each one of the above. Let's say you want to add the Username and Date, then you need to add 2 text elements and connect each one of them to the corresponding data.
Image
Image
(1) Add an Image Element.
(2) Connect it to Avatar to show the profile image of the user that posted that content. In this step, we also recommend setting a fallback image to not showing a blank or black space in case the post image comes empty.
Social Media Icon
Social Media Icon
(1) Add a Social Media Icon.
(2) Connect it to Source to show the Icon of the social network from where the content was posted.
Post Content
Post Content
(1) Add a Post Content Element.
(2) Connect it to Post to show the text content of the posts.
Post Media
Post Media
(1) Add a Post Media Element as a sibling of the Post Content.
(2) Connect it to Post to show the main media (image, GIFs, or video) of the post.
5. Additional Elements
Once you have created your graphics with its basic components, you can add some additional elements like:
Title
Title
Add a title that could a call to action or just to what kind of posts you are showing.
To add the title use the following elements:
(1) Add a Container Element as a child of the Overlay and sibling of the Collection Provider. We added a gradient as a background color of the container.
(2) Add a Text Element as a child of the Container.
(3) With the text element selected, set the text form the inspector.
Background
Background
Add a background to your visualization in case you want to show a Full-Screen graphic. For Layouts like lower thirds or L-bars that are not covering all the screen is not recommended to add a background to your visualization.
Due to the stacking order applied in the elements that compose the Tree, this background should be added at the end of the tree and we recommend adding it using a container.
(1) Add a Container Element.
(2) Set the Background style in the inspector.
6. Remote Control / Live operation
With the Remote Control, you can manage and decide when to trigger the overlay that contains social content On-air using the IN and OUT button.
During live operation, use the gearwheel icon to
Assign or change a Collection clicking on the Pick a Collection button to feed with social content your graphics.
Change the cycling mode using the Cycle button.
Move forward and backward between posts if you have selected the manual cycling mode or semiautomatic.
You can also use the Moderation tab to add new social content to your collections from the Flows or from the Discover Content feature. All this is accessible from the remote and during the live operation.
