Feature a scrollable carousel of Elements, allowing users to navigate to their chosen Element.
What is an Element Carousel?
The Element Carousel is a container Element that lets you group and display multiple other Elements as a series of cards. When a Fan engages with a card, it can either navigate them to the corresponding Element further down the feed or open that Element directly in a pop-up modal window.
This is a powerful way to bundle related content, such as a series of polls or quizzes, into a single, horizontally-scrolling component, saving vertical space and creating a streamlined Fan experience.
How do I create an Element Carousel?
To add an Element Carousel, press the [ + Element ] button within an Event to open the Element selection menu, then choose Element Carousel. All Elements appear on the Event timeline and display in the UI according to their configured timing settings.
How do I set up an Element Carousel?
Setting up an Element Carousel involves two main parts: creating the individual Elements that will feature as cards, and then configuring the carousel itself to display them.
Create your content Elements
Before you can build your carousel, you need the content that will go inside it. This can be any other Element apart from an Element Carousel.
1
Create the individual Elements you want to include (e.g., a Poll, a Quiz, a Video Trivia).
2
Save or publish each Element. Once saved, each Element is assigned a unique ID.
3
Copy the ID of each Element. You can find it displayed next to the Element's name after saving.
Add to Element Carousel
1
Add a new Element Carousel to your Timeline.
2
Give the carousel a Title and an optional Subtitle to provide context for your Fans.
3
In the content tab, locate the list called Elements for adding cards. Click to add a new item. This item will represent one card in your carousel.
4
Configure the card:
Name: Give the card a name for your own reference within Studio. To use this name as the Fan-facing title on the card, enable the setting (e.g., Use Name as title). If this is not enabled, the card will display the title of the original Element it links to.
Content Link: Paste the Element ID you copied in the first stage into this field. This links the card to the correct Element.
Card Image: Upload an image to be displayed on the card. You can configure image display settings, such as aspect ratio.
5
Repeat steps 3 and 4 for every Element you want to add to the carousel. You can reorder the cards at any time by dragging and dropping them in the list.
6
Choose an interaction mode: Select how the cards will behave when clicked.
Scroll to Element in Feed: Clicking a card will scroll the user's view down the Timeline to where the original Element is located.
Open Element in Modal: Clicking a card will open the linked Element in a new pop-up window over the current screen.
How configurable is the Element Carousel?
Here is a full breakdown of all Element settings for Element Carousel:
Title - Main headline typically serving as the subject to help audience quickly grasp its context
Subtitle - A subordinate title usually accompanying the main title to provide more context/instructions
Elements - Add a collection of elements
Name - Optional name field. It can be used to override the element title, or to provide a name when just passing an external link
Content link - Input the ID of any published Element within this event, or an external link
Image - If no cover image is associated with the inputted Element ID, the image will be displayed. However, if a cover image already exists, it will be overwritten
Background Size - This defines how image should appear in the container
Auto - The image retains its original size. If the image is smaller than the container, it won’t stretch to fill it.
Contain - The image is resized to fit within the container while maintaining its aspect ratio
Cover - The image is resized to completely cover the container while maintaining its aspect ratio. Parts of the image may be cropped if necessary to fill the entire space.
Background Position - It aligns the background image either vertically or horizontally
Background Repeat - It controls how a background image is repeated within the element. It determines whether the image is tiled or displayed just once. These positions are:
repeat – The background image repeats both horizontally and vertically to fill the container.
repeat-x – The background image repeats only horizontally.
repeat-y – The background image repeats only vertically.
no-repeat – The background image is displayed only once and does not repeat.
Show reactions - Enables users to express their feedback on elements through reaction icons
Pin element - Always appear on the topmost part of page
Container ID - Determines which container the element show appear in
Custom class names - Applies class names to the element. Can be used to target styles in 'Advanced CSS' for any element with the specified classes
Sponsor ID - Corresponds to the unique sponsor ID assigned to an item within the Sponsor collection, found under Experience
Google ad ID - Corresponds to the unique google ad ID assigned to an item within the Adverts collection, found under Experience
More Information ID - Create collections of information screens to display within elements, referencing them using ID's
User Access - Specifies when and how users are permitted to view and interact with element
Public - All users whether signed in or not can view and interact with element
Require Login - Only signed in user are permitted to view and interact with element
Points threshold - Accumulated points can be used to unlock the element
Primary button label override - Override the default button label text
Points Threshold text - Override the default points threshold text
Points threshold - Set the points needed to unlocked elements
How do I get the ID of an Element?
You can get an Element's ID after you first Save or Publish it. The ID appears at the top of the Element's configuration panel, next to its name. Click the copy icon to copy it to your clipboard.
Can I change the order of the cards?
Yes. In the Elements list of the carousel's content tab, you can simply drag and drop the items in the list to change their display order.
Can I have different click actions for different cards in the same carousel?
No. The Mode setting (either Scroll or Modal) is applied to the entire Element Carousel. It is not possible to configure different behaviours for individual cards within the same carousel.
Can the name on the card be different from the Element's original name?
Yes. When adding an item, you provide a Name. To have this name appear on the card in the app, you must check the Use name as title box. If you leave it unchecked, the name is only used for your reference inside Studio, and the card may display the original Element's title or no title, depending on front-end configuration.
