Carousel and Rich Text Carousel Templates
Updated
Carousel Template
A carousel is a list of card assets that are stacked side by side and can be scrolled horizontally.
You can create a carousel template in Digital Asset Manager to send it on Sprinklr Live Chat. Your customers can easily send a message in the conversation thread by selecting one of the options on this template. A carousel can have 10 cards (carousel elements), and each card can have 5 buttons.
After creating a carousel template in the Digital Asset Manager, it can be sent by creating an auto-response rule in Rule Engine.
To Create a Carousel Template in Digital Asset Manager
Click the New Tab icon
. Under the Sprinklr Social tab, click Assets within Engage.
In the top right corner of the Asset Management window, click Create Asset in the top right corner and select Omni Chat Templates from the dropdown.
On the Create New Asset window, enter a Name and optional Description for your asset under the Basic Details section.
Under the Asset Specific section, select Carousel from the Template Type dropdown and Sprinklr Live Chat from the Channel dropdown. For more information, see Carousel Template — Field Descriptions .
Under Asset Details, select Campaigns, Sub Campaigns, Status, Available from, Visible from, Expires on, Tags, Restricted, Brands, Persona, Customer Journey Stage, Automated Tags, and Information.
Fill in the required fields under Asset Sharing and Properties.
Click Save in the bottom right corner.
Carousel Template — Field Descriptions
Term | Description |
Hide Attachment Option | If you check the box, your customers will not be able to send any attachments before/after selecting a response from this template until you (brand) send a message again. |
Disable Manual Response | If you check the box, your customers will not be able to send any message before/after selecting a response from this template until you (brand) send a message again. |
Disable multiple submissions: User will only be able to submit once. This will not apply to URL buttons. | Check the box to make the card buttons disabled for clicking if already clicked once. So, the users will not be able to click any button other than the URL button if they have already made the selection once. The options will be greyed out once clicked as shown in the GIF below. |
Enable automatic scroll | You can enable automatic scroll for carousels by setting the duration for automatic scrolling in milliseconds. This feature ensures seamless navigation through the carousel content without manual intervention. Additionally, users will notice indicators in the form of dots representing the number of elements within the carousel. Hovering over any element will trigger a pause, allowing users to pause the automatic scrolling temporarily for closer inspection or interaction with specific content.
|
Upload Image | Add an image for Carousel Element 1. |
Title | Provide a title for your Carousel Element 1. You can bold, italicize, underline, and strikethrough the text. |
Description | Enter the description for your carousel element. You can bold, italicize, underline, strikethrough, and hyperlink the text. |
Button 1 | Buttons contain click and action properties that define the type of action set on user click operation. Enter the following details: Label: Enter a label for button 1. It should not exceed 20 characters. Tracking ID: This ID will be used in the button click reporting Action: Select action as Text, URL, or Phone call. When the Text button is clicked, the label of the button is captured as the user text response. When the URL button is clicked, no response from the user is captured, instead they are redirected to the configured URL in a new tab. Check the box to open url in same tab. Clicking on the Phone Call button, the users will be presented with a menu allowing them to choose how they would want to make the call. Please make sure to prefix the international dialing code before the number. |
Add New Button | Click to add a new button to your template. You can add up to 5 buttons. |
Add New Carousel Element | Click to add a new carousel element to the template. You can add up to 10 carousel elements. |
Button stacking direction | It allows you to specify how buttons are arranged within a layout. You can choose between three stacking directions: Row, Grid, or Column. When selecting the Grid option, you have further customization options by specifying the number of columns. This can be set to either "Automatic," where the system determines the optimal number of columns based on the available space, or you can manually select a number from 1 to 4 columns. This flexibility enables you to tailor the button layout according to your design preferences and the available space on the interface. |
Rich Text Carousel Template
For a Rich Text Carousel asset, you can use rich text formatting, for example, bold, italicize, underline, strikethrough, and hyperlink the text. You can also utilize the Source Code option to create customized and dynamic asset by integrating data from internal or external API calls. For instance, variables such as amount, ratings, or status can be dynamically populated from API responses.
Moreover, you have the flexibility to design interactive elements by making desired buttons clickable and defining actions. When clicked, these buttons can either open an external URL or trigger a text reply from the customer's side. Additionally, you have the option to pass a tracking ID, enabling comprehensive reporting on button clicks.
To Create a Rich Text Carousel Template in Digital Asset Manager
Click the New Tab icon
In the top right corner of the Asset Management window, click Create Asset in the top right corner and select Omni Chat Templates from the dropdown.
On the Create New Asset window, enter a Name and optional Description for your asset under the Basic Details section.
Under the Asset Specific section, select Rich Text Carousel from the Template Type dropdown and Sprinklr Live Chat from the Channel dropdown. For more information, see Rich Text Carousel Template — Field Descriptions.
Under Asset Details, select Campaigns, Sub Campaigns, Status, Available from, Visible from, Expires on, Tags, Restricted, Brands, Persona, Customer Journey Stage, Automated Tags, and Information.
Fill in the required fields under Asset Sharing and Properties.
Click Save in the bottom right corner.
Rich Text Carousel Template — Field Descriptions
Term | Description |
Hide Attachment Option | If you check the box, your customers will not be able to send any attachments before/after selecting a response from this template until you (brand) send a message again. |
Disable Manual Response | If you check the box, your customers will not be able to send any message before/after selecting a response from this template until you (brand) send a message again. |
Carousel Element 1 | Enter the description for your carousel element. You can use rich text formatting, for example, bold, italicize, underline, strikethrough, and hyperlink the text. You can also add multiple images in one element and add text either above or below the image. Note You can add source code to add buttons and also pass tracking ID. The images would not be enlarged in the modal view on clicking. |
Add New Carousel Element | Click to add a new carousel element to the template. You can add up to 10 carousel elements. |
Sample HTML for a Rich Text Carousel Template
<p style="margin: 0;"><span style="color: #ea1917; font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">New</span></p>
<div style="display: flex; flex-direction: column;">
<div style="margin-top: 6px; font-size: 10px; color: #646470;">ABC123</div>
<div style="margin-top: 6px; font-size: 12px; font-weight: 500;">New Product Card by ACME</div>
<div style="margin-top: 6px; display: flex; font-size: 10px; color: #646470; height: 12px;">
<div style="font-size: 8px; color: white;"><img style="width: 20px; height: 12px;" src="https://www.acme.com/acme5-common-gp/images/products/energy-label/label-energy-grade-g.png" alt="Product Image" /></div>
<div style="border-left: 1px solid #dbdbdb; height: 100%; margin-left: 6px; display: flex;"> </div>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="margin-left: 4px; font-size: 11px; color: #f3bf24; display: flex; justify-content: center; align-items: center;">★</div>
<div style="margin-left: 4px;">4.6 (1000)</div>
</div>
</div>
<div style="display: flex; flex-direction: column; align-self: center;"><img style="width: 100%; height: 100px; margin-top: 12px;" src="https://fastly.picsum.photos/id/864/400/400.jpg?hmac=cUOiZzc6stHqf-AA55Z9d55EsQCuf2MEt0oI6eCxxIU" alt="Product Image" />
<div style="margin-top: 6px; display: flex; align-self: center; font-size: 10px; font-weight: 400;"><img style="margin-top: 6px;" src="https://sprcdn-assets.sprinklr.com/1178/7535ef0d-cf39-42a0-b964-12330a29ac56-894398480.png" alt="Signature" /></div>
</div>
<div style="margin-top: 6px; display: flex; flex-direction: column;">
<div style="font-size: 12px; font-weight: 600; align-self: flex-start;">₤5000</div>
<div style="display: flex;">
<div style="font-size: 10px; text-decoration: line-through; color: #646470; align-self: center;">₤6000</div>
<div style="margin-left: 4px; font-size: 10px; color: #646470; align-self: center;">Save ₤1000</div>
</div>
</div>
<div style="margin-top: 8px; display: flex; flex-direction: column;"><button id="button_1_id" class="button" style="margin-top: 8px; display: flex; width: 100%; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; justify-content: center; text-decoration: none;"> Learn More </button> <button id="button_2_id" class="button" style="margin-top: 8px; display: flex; width: 100%; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; justify-content: center; text-decoration: none;"> Product Support </button> <button id="button_3_id" class="button" style="margin-top: 8px; display: flex; width: 100%; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; justify-content: center; text-decoration: none;"> Buy Now </button></div>
</div>