Rich Text Carousel Template
Updated
Rich Text Carousel Template
The Rich Text Carousel Template in Sprinklr Live Chat allows users to apply rich text formatting—such as bold, italics, underline, strikethrough, and hyperlinks—to create visually engaging and interactive assets. Additionally, the Source Code option enables the integration of dynamic data from internal or external API calls, allowing for real-time population of variables like amount, ratings, or status based on API responses.
Key Benefits of Rich Text Carousel Template
Enhanced User Engagement: Rich text formatting makes messages more visually appealing and easier to read, improving user interaction.
Dynamic Content: Integration with APIs allows for real-time updates and personalized content, enhancing the relevance and timeliness of information.
Customization: Users can tailor assets to specific campaigns, customer journeys, and personas, ensuring targeted communication.
Use Case and example
Customer Support: Use rich text carousels to provide detailed product information, troubleshooting steps, or FAQs in an interactive format.
Promotional Campaigns: Create visually appealing promotional messages with dynamic content that updates based on user interactions or external data.
Product Catalog Presentation: Present product catalogs or service offerings with real-time pricing and availability updates, enhancing the customer experience.
To Create a Rich Text Carousel Template in Digital Asset Manager
Click the Digital Asset Management under the Integrate section of your new sprinklr tab.
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 | This carousel element allows you to create a visually engaging experience by combining rich text formatting and interactive features. You can enhance your content with bold, italicized, underlined, or strikethrough text, as well as hyperlinks to direct users to other pages. Additionally, you can display multiple images within a single element, with the option to add descriptive text either above or below each image. The carousel also supports interactive buttons that can trigger specific actions, such as opening an external URL or prompting an automated reply from the customer. Moreover, each button can be tracked using a unique tracking ID, allowing for detailed reporting on interactions. Importantly, the images within the carousel will not be enlarged when clicked in the modal view. |
Add New Carousel Element | Click to add a new carousel element to the template. You can add up to 10 carousel elements. |
Screen Reader Label | You can configure a custom label for Rich text carousel template to enhance accessibility for users. By default, the asset is identified as a "form," and the screen reader announces it as "You have received a form." However, if you prefer a more specific label, such as "Registration Details Form," you can customize it accordingly. |
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>