Moving Icon for Zoom Virtual Agent

Adjusting the placement of a floating interface element like a ZVA (Zone Visual Assistant) typically requires modifying the site’s Cascading Style Sheets (CSS) or accessing the specific configuration settings within the tool's administrative dashboard.

If the element is obstructing other functional components of your website, please consider the following methods to resolve the conflict.

1. Adjust via Administrative Settings

Before altering any code, verify if the service provider offers a native positioning tool.

• Log in to your ZVA or Chat Widget provider’s dashboard.

• Navigate to Settings or Appearance/Customization.

• Look for "Widget Position" or "Offset" settings. Many modern tools allow you to define a specific pixel or percentage offset from the bottom and right/left edges of the screen.

2. Override via Custom CSS

If the dashboard does not provide granular control, you can manually override the position using CSS. You will need to identify the CSS Class or ID of the ZVA container.

Note: To find the ID, right-click the ZVA on your live site and select "Inspect."

Once identified, you can add code similar to the following to your website’s "Additional CSS" section:

CSS

/* Example: Moving the widget 50px higher and 20px further from the right */
#zva-container-id {
    bottom: 70px !important; 
    right: 40px !important;
}

3. Resolving Z-Index Conflicts

If the ZVA is not physically blocking a button but is instead appearing "on top" of a menu or pop-up, you may need to adjust the z-index. This property controls the stacking order of elements.

• To push the ZVA behind another element: Lower its z-index.

• To bring the ZVA forward: Increase its z-index.