The Ticker element allows you to add highly customized scrolling graphics to your Overlays. It is useful for news tickers, stock info, weather forecasts, and more.
The Ticker element is exclusive to Professional and Enterprise plans.
The Ticker lets you design different templates to display different items found in the data bound to it. This is the main difference with the Text Crawler, that only supports one template (or “Items Composition” setting).
Supported data
The Ticker must be bound to any Data Provider that delivers a list of data.
In case you have a Provider that delivers an array of data, all elements in the data array must have:
An individual identifier, that will work as a unique identifier to identify each data object.
A template identifier, that can be shared across elements. This will be used to know which template to use for representing each element.
Other fields represent the actual payload that will be displayed. For example, text strings for news headlines, or numbers representing market variations.
For example, here is the payload of a Local JSON Data Connector:
Setting up items' identifier field
Once the Source of the Ticker is bound to an array, you can specify which field of the array elements will be used as an Item Identifier.
An Item Identifier must be unique to each element. This will allow you to have cycling controls, reporting to a Tally, or restarting the Ticker from the last item shown.
Use the “Item identifier” field in the “Ticker Settings” section of the Ticker inspector panel to select the corresponding field.
Ticker's Templates
Templates are compositions used by the Ticker to render the items of the data source that's bound. The Ticker templates can be composed only using:
Containers
Texts
Images
Post Content to connect social media content to your Ticker.
To do so, simply drag those elements from the Building Blocks list into each Ticker Template.
Having multiple Templates allows you to visually differentiate the items, so you can have a single Ticker that displays regular news headlines, breaking news headlines, and weather info, each one with a different look and feel.
In order to display different Templates, each item in the data needs to have a Template Identifier field, as described before.
In the case your data feed doesn't have template identifiers, you won't be able to render different Templates. In those cases, you'll be able to use a single Default Template.
Here is an example of a "breaking news" headlines template and a “regular" headlines template, each with a slightly different design:
BREAKING NEWS
REGULAR
Setting up Templates
Bind the Ticker to a valid data source
Set the template identifier field
Adding Templates
Select the field that will act as a “Template identifier”.
Bind the template ID, this will allow the Ticker to know what template it should use for displaying each element of the array.
Use the “Add” button to add as many templates as you need.
Click a template name to display the template settings popover.
To use that template, specify the value that the identifier field should be matched against.
Following our example, the “Headline” template will be used for all the array elements which “template_id” fields have the value of “HEADLINE”:
Using the Default Template
The Default Template is utilized when in your API there are no Template Identifiers available, or to render items that do not match other Templates IDs.
The Default template is also beneficial in cases where you can't modify the API to add an ID or Template ID. For example, if you have a third-party data provider that delivers data with a fixed structure that cannot be easily modified, then you would use the default template. This would apply, for instance, if you connect any of our custom data connectors to the Ticker.
When the Default Template is configured in the Ticker, any item in the data that lacks a matching template identifier will automatically use the default template for rendering.
In case you don't need this behavior, you can opt-out by selecting "Use no default template". This way, items that don't match any Template IDs will just be ignored and not rendered.
To use the Default Template:
Bind the Ticker to a Data Provider
By default, a "Default Template" will be selected, however you can opt-out
Elements Tree and stacking order
The order of elements in the tree inside a Ticker Template behaves differently than those outside the Ticker.
While regular elements' order represents their visual depth —like layers—, allowing you to decide how they will overlap, the order of elements inside a Ticker Template is mapped to the horizontal left-to-right stacking order.
So, those elements listed above in the Template subtree will be shown to the left than those listed below. Play around with the elements’ order to compose which things are placed first and which ones last.
Elements' Contextual Properties
Containers, Texts, and Images inspector panels present a couple of different properties when used inside a Ticker, that respond to its “stacking” layout and allow you to fine-tune their design properties.
Position and Rotation properties are not configurable in the context of a Ticker Template, as these could be incompatible with the scrolling animation.
Container
Position, size, and rotation cannot be configured in this context.
Padding allows you to set the spacing between the borders of the Container and its content.
Text
Position, size, and rotation cannot be configured in this context.
Font size can be specified in pixels, and the regular “Font resizing” (fit in one line, fit in container, clip to lines) are not available.
Image
Position and rotation cannot be configured in this context.
Image size is set in pixels instead of percentages.
Ticker animation and behavior settings
Speed: Sets the speed of the Ticker animation. You can use a decimal value, but we recommend using integers for better frame accuracy at the output. This value stands for the number of pixels per frame to be displaced, on an ideal 60 fps output. Keep in mind that hardware specs and browser memory load impact the delivered fps.
Animation Type: As long as the Ticker is visible, it will loop through the items. That animation can behave in two ways:
Batch: The entire group of chained Ticker items will scroll until the last one exits before the first one appears again.
Continuous: Ticker items will loop continuously. The last one will be immediately followed by the first one, without space between them.
Report current item to Tally: When enabled, it will send an API message with the ID of the item currently entering the scene, so you can keep track of which ones are being shown. Use this for custom auditing. For more information, read the Tally Support WebSocket article.
Restart behavior: Defines how the Ticker will behave when hidden and shown again (i.e.: when its parent Overlay goes OUT and then IN). You can choose to start again from the first item or to remember the last item shown and restart from that point onwards.
The 'Remember last shown item' can only be seen in action in the Output; in the Editor, it always starts from scratch.
Binding social media content to the Ticker
The Ticker element supports displaying social media content using the Post Content element. Below find the steps to connect the social content to your Ticker:
Add a Collection Provider (We recommend using it with Global scope)
Assign a Collection. If you haven't created your Collection yet, navigate to the Content Inbox, create it, and start adding content to it using the social posts collected from Discover Content or Flows.
Add a Ticker element to the tree.
Bind the list of "Posts".
Add a "Post Content" element as a child of the Ticker template
Click on the blue button then select "Post" to bind the social media post to the Ticker.
To bind other variables from the social media post (such as handle, username, creation date, source, etc.), add a text element for each one. Note that the Post Content element is specifically for displaying the content of the post.