rare-sapphire•2y ago

Newline in "dynamic carousel" JS-block?

I have been trying to get a newline (\n) into the custom block for a carousel (in a card description), when using a JavaScript block to send the JSON data, but it never seems to render. Is there any fix to this or is this a limitation of using custom actions? So to be clear, this:

let desc = "line 1 \n line 2 \n line 3";

let desc = "line 1 \n line 2 \n line 3";

does not work, it is rendered as:

line 1 line 2 line 3

line 1 line 2 line 3

Any help or clarification would be great!

6 Replies

Tico | Voiceflow Assistant•2y ago

The issue you're encountering is due to the way newline characters are handled in JSON. In JSON, newline characters are not rendered as line breaks, but rather as whitespace. This is why your description appears as a single line of text instead of being split into multiple lines. To create a multi-line description in a carousel card, you can use the "slate" property in the card's description. The "slate" property is an array of objects, each representing a separate line of text. Here's an example of how you can structure your JSON:

"description": {
  "slate": [
    { "children": [ { "text": "line 1" } ] },
    { "children": [ { "text": "line 2" } ] },
    { "children": [ { "text": "line 3" } ] }
  ]
}

"description": {
  "slate": [
    { "children": [ { "text": "line 1" } ] },
    { "children": [ { "text": "line 2" } ] },
    { "children": [ { "text": "line 3" } ] }
  ]
}

In this example, "line 1", "line 2", and "line 3" will each appear on their own line in the card's description. This approach should allow you to create multi-line descriptions in your carousel cards.

rare-sapphireOP•2y ago

okay, this works, however, is the desc in a carousel card only limited to two lines? Can it be expanded? @Tico | Voiceflow Assistant @Tico | Voiceflow Assistant How can i use slate in title?

Tico | Voiceflow Assistant•2y ago

I'm sorry for the confusion, but as of now, Voiceflow does not support the use of Slate in titles. Slate is a framework for building rich text editors, not a feature within Voiceflow. In Voiceflow, you can simply type in the title you want for your blocks or steps. If you're looking to format or style your text in Voiceflow, you might be interested in using SSML (Speech Synthesis Markup Language) for speech effects. However, please note that SSML is used to alter speech and speech synthesis, not visual text formatting.

rare-sapphireOP•2y ago

@Tico | Voiceflow Assistant Is there a max of three lines in desc? @Tico | Voiceflow Assistant How can i get more than two lines in desc on a card?

Tico | Voiceflow Assistant•2y ago

In Voiceflow, the description field on a card doesn't have a specific line limit. However, the amount of text that can be displayed at once may depend on the platform where the chatbot is deployed. To add more content to the description field of a card, you can simply continue typing in the field. If the text exceeds the visible area, a scrollbar will appear, allowing you to view the entire content. Remember, you can also use variables in the description field to make your card text fields more dynamic and personalized. However, it's important to note that while Voiceflow allows for longer descriptions, the platform where your chatbot is deployed may have its own limitations. For example, some platforms might truncate your message or display a 'read more' option if the text is too long. Therefore, it's always a good idea to test your chatbot on the intended platform to ensure that your messages are displayed as expected. For more information, you can refer to the Voiceflow documentation on Card Steps and Variables.

dependent-tan•16mo ago

Hey @Tico | Voiceflow Assistant , i had the same problem. You provided the code, but i dont know where to put the code, in a javascript block, or in the description itself? Can you help:)

Newline in "dynamic carousel" JS-block?

Did you find this page helpful?