Components Simple Syntax
Last updated
Last updated
To display an image in Leopard using simple output parameters, you need to add an output parameter named image and assign the image's URL to the output parameter's value. You can also add an optional alternative text after the URL, with a pipe symbol ('|') as the separator.
To display a video using simple output parameters, you need to add an output parameter named video and assign the video's URL to the output parameter's value.
To display an audio player using simple output parameters, you need to add an output parameter named audio and assign the audio's URL to the output parameter's value.
To display a system message using simple output parameters, you need to add an output parameter named system and assign the text message to the output parameter's value.
To display quick reply options using simple output parameters, you need to add an output parameter named quickreply and assign the options to the output parameter's value. Use the pipe symbol ('|') to separate the options.
To display buttons using simple output parameters, you need to add an output parameter named buttons and assign the button texts to the output parameter's value. Use the pipe symbol ('|') to separate the button texts. If you want to add a title to your buttons, create another output parameter named buttons_title and assign the title text to the output parameter's value.
The JSON for each button option consists of three elements:
To display a clickable list using simple output parameters, you need to add an output parameter named clickablelist and assign the options to the output parameter's value. Use the pipe symbol ('|') to separate the options. If you want to add a title to your clickable list, create another output parameter named clickablelist_title and assign the title text to the output parameter's value.
To display link buttons using simple output parameters, you need to add an output parameter named linkbuttons and assign the link button details (text, url and optional target) to the output parameter's value. Use the pipe symbol ('|') to separate the button details. If you want to add a title to your link buttons, create another output parameter named linkbuttons_title and assign the title text to the output parameter's value.
A card refers to a box that contains at least one of the following components:
An image
A title, subtitle or a body text
Buttons, links or a clickable list
To display a card using simple output parameters, you need to use the prefix card_ when naming the output parameters. For example, to display an image, you would name the output parameter card_image. Then assign the corresponding content to the output parameter's value. Note that all the card components are optional, however, you need to include at least one component to display the card properly.
The table below shows the different card components that are supported:
Output parameter name
Example value
Comments
card_title
This is the title
Plain text as value
card_subtitle
This is the subtitle
Plain text as value
card_bodytext
This is the body text
Plain text as value
card_image
https://address/image.png|alt text
Url of image, use the pipe symbol ('|') as separator for alternative text
card_buttons
Button 1|Button 2|Button 3
Use the pipe symbol ('|') as the separator
card_clickablelist
Option 1|Option 2|Option 3
Use the pipe symbol ('|') as the separator
card_linkbuttons
Link 1,https://link1.html,_blank|Link 2,https://link2.html
Use comma as separator between text, URL and (optional) target; Use the pipe symbol ('|') the as separator between hyperlinks
card_links
Link 1,https://link1.html|Link 2,https://link2.html
Use comma as separator between text and URL; Use the pipe symbol ('|') the as separator between hyperlinks.
Note that the order in which you create the output parameters doesn't affect how the card is displayed in Leopard.
A 'modal' refers to a modal window that disables the main chat window. Users will not able to use the text input field nor the corner buttons to minimize or close the chatbot until they've clicked one of the buttons in the modal window.
To display a modal window using simple output parameters, you need to add multiple output parameters with the prefix modal_, for example, modal_image and modal_title. Then assign the corresponding content to the output parameter's value. Note that all the modal components are optional, however, you need to include at least one button, or else the users will not be able to close the modal window.
The table below shows the different modal components that are supported:
Output parameter name
Example value
Comments
modal_title
This is the title
Plain text as value
modal_subtitle
This is the subtitle
Plain text as value
modal_bodytext
This is the body text
Plain text as value
modal_image
https://address/image.png|alt text
Url of image, use the pipe symbol ('|') as separator for alternative text
modal_buttons
Button 1|Button 2|Button 3
Use the pipe symbol ('|') as the separator
modal_clickablelist
Option 1|Option 2|Option 3
Use the pipe symbol ('|') as the separator
modal_linkbuttons
Link 1,https://link1.html,_blank|Link 2,https://link2.html
Use comma as separator between text, URL and (optional) target; Use the pipe symbol ('|') the as separator between hyperlinks
Note that the order in which you create the output parameters doesn't affect how the modal elements are displayed.
In Leopard, a 'combo' refers to an output that contains more than one message type.
To display a combo using the simple syntax, you need to have at least two different message types added to the same output node.
If you want to order the message types in your combo in a specific way, you can add a special output parameter called combo_order to specify the order of the components. If not specified, the order will be random. The value of the 'combo_order' parameter should contain the type names separated by the pipe symbol ('|') in the order that you want them.
