Hi @Prasad Tlns1 ,
To display a message when hovering over the Virtual Agent widget icon, you can add a custom tooltip to the icon using some HTML and CSS. Here's how to do it:
Open the Service Portal designer and navigate to the page where the Virtual Agent widget is located.
Select the widget container that contains the Virtual Agent widget.
In the widget container properties, add a CSS class to the "CSS Classes" field. For example, you can add the class "va-widget-container".
Save the changes to the widget container properties.
Open the "Theme" record that is applied to the portal page.
Click on the "CSS" tab to edit the CSS for the theme.
Add the following CSS code to the end of the CSS file:
.va-widget-container .sn-aside__icon:before { content: "Hover Text Here"; position: absolute; left: -50px; top: -50px; background-color: #000; color: #fff; padding: 5px; border-radius: 5px; opacity: 0; transition: opacity 0.2s ease-in-out; }
.va-widget-container .sn-aside__icon:hover:before { opacity: 1; }
8. Replace "Hover Text Here" with the message you want to display when hovering over the Virtual Agent widget icon.
9. Save the changes to the CSS file.
10. Preview the portal page to see the message displayed when hovering over the Virtual Agent widget icon.
If my response helps you to resolve the issue close the question by ✅Accepting solution and hit 👍thumb icon. From Correct answers others will get benefited in future.
Thanks,
Ratnakar
