Agent Badge Overlay – VideoEngager

Applies to: Administrators, Supervisors, and Agents using VideoEngager

In This Guide

What the Agent Badge Overlay does
How to activate the feature
How to upload or update an agent badge
Badge image requirements (size, metadata, transparency)
Styling and repositioning the badge with CustomCSS
QA, training tips, and troubleshooting

What the Agent Badge Overlay looks like

The Agent Badge Overlay adds a verified badge to the live video call, so the customer can clearly see that the person on video matches the identity shown on the badge.

Quick Guide (for Admins & Supervisors)

Make sure the Agent Badge Overlay feature is activated for your organization (see Feature Activation below).
Open the User Management section in the VideoEngager admin sidebar.
Find the agent whose badge you want to configure and click Edit.
In the agent details form (name, email, role, etc.), click Upload new Agent Badge.
Select the badge image file and confirm the upload.
Save your changes. The badge will now appear as an overlay in the agent’s video interface.

Tips:

Use a square image up to 256 × 256 px for best results.
A transparent background (e.g., PNG) is recommended for clean visual integration.
If the badge doesn’t show up, verify the image meets the requirements and try re-uploading.

Feature Activation & Access (Admin)

1. Activate the Agent Badge Overlay feature

To enable the Agent Badge Overlay for your organization, contact your VideoEngager administrator or send an email request to: contact@videoengager.com.

2. Who can upload or change badges?

Recommended: Restrict badge management to Admins or Supervisors to ensure consistent branding.
Admins can open User Management, edit any agent, and upload/update badges.

3. Where the badge appears

By default, the badge is displayed as an overlay in the agent’s video UI.
The default position is the top-right corner of the video area.
Position and size can be customized via CustomCSS (see Styling section below).

Badge Image Requirements

To ensure compatibility and a clean visual result, make sure each badge image follows these rules:

Dimensions: Maximum 256 × 256 pixels.
File metadata: The image must not contain metadata that could trigger firewall or security filters.
Transparency: A transparent background (e.g., PNG) is optional but recommended.

Recommended workflow:

Export the badge from your design tool as a square PNG up to 256 × 256 px.
Strip metadata if necessary (e.g., via an image optimizer or “Save for Web” option).
Test upload for one agent and verify the badge appears correctly in a test call.

Styling & CustomCSS

The Agent Badge Overlay is styled with the CSS class .agentBadgeOverlay. You can adjust its position and size using the CustomCSS feature in your deployment.

Default Position

By default, the badge is positioned in the top-right corner of the video area.

Positioning Examples

Bottom-right corner:

.agentBadgeOverlay {
  top: unset !important;
  bottom: 5% !important;
}

Bottom-left corner:

.agentBadgeOverlay {
  top: unset !important;
  bottom: 5% !important;
  right: unset !important;
  left: 5% !important;
}

Resizing the badge

You can change the on-screen size of the badge regardless of the original image dimensions:

.agentBadgeOverlay {
  width: 256px !important;
  height: 256px !important;
}

Best practice: Keep the badge small enough not to block the customer’s video feed or critical UI controls.

QA & Training Checklist (optional)

Checklist Item	Status
Agent badge is visible in the configured position during a test call	☐
Badge does not hide customer video or core call controls	☐
Badge branding (logo, name, colors) follows corporate guidelines	☐
Agents understand when and why the badge is shown to customers	☐

Coaching tip: Use the badge as part of your trust-building script (e.g., “You’ll see my verified company badge in the corner of the video.”).

Troubleshooting

Issue	Likely Cause	Fix
Badge is not visible during calls	Badge not uploaded or changes not saved	Edit the agent in User Management, re-upload the badge, and click Save. Confirm in a new test call.
Badge upload fails or is blocked	Image exceeds size limits or contains metadata blocked by security/firewall	Ensure the image is max `256 × 256` px and re-export it without metadata. Try again or test with a simple PNG logo.
Badge appears distorted or cropped	Non-square image or aggressive CSS scaling	Use a square image and adjust `width`/`height` in `.agentBadgeOverlay` to a consistent size (e.g., `128px`).
Badge covers important UI elements	CustomCSS position overlaps controls	Move the badge (e.g., to bottom-left) by updating the CSS (see Styling & CustomCSS section).

🔗 Related Articles