Multiple font size and color for text in quick replies template

I am using quick replies template and would like to use different font size and color for text, how this can be used.

For example text = “line1” + “\nline2”

I want line1 to be displayed in bigger font compared to line 2 and then line2 in color red.

Below is java script that I am using:

var quickReplies = [“button1”,“button2”,“button3”];
var replyValues = [“button1”,“button2”,“button3”]; ;
var message = {
“type”: “template”,
“payload”: {
“template_type”: “quick_replies”,
“text”: “This is first line. \nThis is second line”,
“quick_replies”: []
}
};

for (i = 0; i < quickReplies.length; i++) {
//if only text needs to diplayed
var quickReply = {
“content_type”: “text”,
“title”: quickReplies[i],
“payload”: replyValues[i]
};
/* Uncomment this if both text and image needs to displayed for the quick reply button
var quickReply = {
“content_type”:“text”,
“title”:quickReplies[i],
“payload”:“payload2”,
“image_url”: "url of the image
};
*/
message.payload.quick_replies.push(quickReply);
}
print(JSON.stringify(message));

@peu.dutta,

We are checking this and we will update you asap.

Regards,
Yoga Ramya.

Hi @peu.dutta,

Apologies for the delay.

You can customize the templates UI as per your requirement through chatWindow.css file.

In the WebSDK folder, in SDKApp\sdk\UI folder path, you can find the chatWindow.css file in which you can make changes related to the styling of the bot.

You can see the style classes with reference to the template name and change the attributes accordingly.

image

Let us know if you need any further clarification.

Regards,
Yoga Ramya.