...
Click on the link icon to open a pop window.
In the Link Info tab. , fill in the details such as display text, Link type, URL, etc.
The Link Type has 3 options to choose from: URL, Link to anchor in the text, E-mail.
...
The protocol field dropdown has an option utterance (not a web protocol) along with different web protocols.
...
Using the Utterance protocol, you can define a hyperlink to trigger an utterance.
In the below example, we have used a link to trigger the “Hello world” utterance.
...
Double click on the say node to edit it. Select the Text tab.
Select a word in the Chat text field of the Text tab.
Click on the link icon.
Select utterance:// from the protocol dropdown.
Give the utterance in the URL field.
In the chatbot, clicking on the link will return the utterance “Hello world“ and the corresponding intent will be triggered.
...
In the Target tab, you can choose how the link should be opened.
...
Choose a file and click on the “Send it to the Server” button. This action will send the file to the server and the corresponding URL of the file will be changed in the Link info tab.
Insert Horizontal line (Line break)
You can display the text from the text bubble in separate bubbles using the horizontal line.
...
This text will be converted into two bubbles.
...
Image
You can use an image to view it in the chatbot. Click on the image button in the text tab for the same.
...
Please refer to this documentation on How do I upload an image?
If you already have an image uploaded in the database, you can browse the image or paste the corresponding URL in the URL field of the Image Info tab of Image Properties popup box.
...
Adjust image resolution to fit the chat bubble width
If you want to adjust the resolution of the image to fit within the chat bubble in the chatbot, you should place the below CSS code in the Bot View Template > Custom CSS.
Say node in Experience Designer
| Code Block |
|---|
.endbubble.msg>p>img{
width: 100% !important;
height: 100% !important;
} |
Flow studio
| Code Block |
|---|
.msg>p>img {
width: 100% !important;
} |
Screen Tab
You can add an image to show with within the bot says. The contents of this tab will be rendered by smart displays.
...