Hi All,
How can I edit the CSS of the Proactive Triggers popover message box displayed next to Virtual Agent chat icon?
We are using the recommended Agent Chat Configurations to deliver VA to our Service Portal and without access to the legacy widget HTML, Client Script, and CSS fields it's been difficult to customize the VA chat experience.
Essentially, we would like to recreate the appearance of the legacy widget:
We currently have Proactive Triggers activated (according to SN's recommended method to recreate this feature from HI portal case) which is displayed on the portal as:
We have been able to target and update the border-radius attribute using the following code in the Theme CSS:
Which results in:
Which is closer to our desired result, but now we need to remove the popover tail and update the positioning of the popover message.
When I've tried to target this element using CSS class selectors (commented out code at bottom of Theme CSS screenshot) I was able to make changes in Chrome Developer Tools, but the changes were not reflected from the code being updated in the Theme CSS (even when utilizing '! important' or '! default' on all declarations).
Is there a specific place where I need to be looking to make these adjustments? Are there Theme CSS variables available for the popover or Proactive Triggers that I am overlooking (unable to find in the documentation)?
If anyone could offer insight on how to update the height, content-alignment, removing tail, and positioning of the Proactive Triggers popover that would be much appreciated!
