The Annotation Node is excellent for providing users with additional information in the front end. With customizable options for displaying this information, you can create an engaging and informative user experience.
In this tutorial, you see the process of setting up an Annotation Node.
Step 1: Add the Annotation Node to Your Bot
Click on the “+” menu to display the features.
Step 2: Add a title
You can enter a title for this Annotation Node, this is optional,
Step 3: Configure the Display Method
Choose whether the extra information should be displayed upon a Click or a Hover action.
Step 4: Customize the Icon
You have the option to add text to the icon, select its position, or even deactivate it.
Step 5: Create the Annotation
To add the Annotation itself, click “Create” and input the information you want to display in the front end. You can format the text as desired.
For demonstration purposes, let’s create a second annotation with different settings.
Step 6: Set Up a Second Annotation
Create another Annotation, this time adding text to the icon and selecting the “Click” option for displaying information.
Step 7: Preview the Annotations
Click “Preview” in the top menu to view the front end from your client’s perspective.
In the front end, you’ll see the two Annotations we created. The First one, set to “Hover,” displays information when the mouse Hovers over the icon. The Second Annotation, featuring added text and the “Click” option, reveals the information upon Clicking.
And that’s it! With the Annotation Node, you can effortlessly enhance your user experience by offering additional information in an interactive manner.
