Understand the 3D Globe's visual design and learn about customization options available for shared globe pages and embeddable HTML widgets.
Globe Visual Style
The 3D Globe uses a dark Mapbox theme that provides a clean, professional look for visualizing real-time visitor data. This style is consistent across all users and is designed for optimal readability of visitor markers and overlays.
What the Globe Displays
The globe view includes several built-in visual elements:
| Element | Description |
|---|---|
| Dark map base | Mapbox dark theme with country borders |
| Visitor markers | DiceBear avatar markers at visitor locations |
| Activity feed | Side panel showing recent visitor activity |
| Top stats overlay | Live visitor count, estimated visitor value, and top referrer sources |
| Music player | Optional ambient lo-fi background music you can toggle on or off |
Responsive Design
The globe automatically adapts to your screen size:
- Desktop: Full-featured view with all overlays visible
- Tablet: Adjusted layout with appropriately sized controls
- Mobile: Compact controls and optimized touch targets
No manual responsive configuration is needed - the globe handles this automatically.
White-Label for Shared Globe Pages
Scale PlanScale and Enterprise customers can customize the appearance of shared globe pages using white-label settings. This applies to public globe share links (/share/globe/TOKEN).
Available White-Label Options
| Setting | Description |
|---|---|
| Remove Zenovay branding | Hides the "Powered by Zenovay" footer on shared pages |
| Custom primary color | Applies your brand color as CSS variable for UI accents |
How White-Label Works
When a shared globe link is loaded:
- The share token is verified
- White-label configuration is fetched for the associated website
- Custom CSS variables are applied (e.g., primary brand color)
- Branding visibility is set based on the configuration
White-label settings are managed in the Agency dashboard (/agency) in the Zenovay app. They apply across all shared globe pages for your workspace's websites.
HTML Widget Customization
Zenovay provides embeddable HTML widgets that are separate from the 3D Globe. These widgets display simple visitor statistics and can be customized.
Widget Types
| Widget | Description |
|---|---|
| Realtime | Live visitor count with pulsing indicator |
| Preview | 24-hour visitor timeline with line chart |
| Chart | 30-minute bar chart with country breakdown |
Widget Customization Options
Widget appearance is configured through the Widget Settings panel in your domain settings:
| Setting | Description |
|---|---|
| Primary color | Main accent color for the widget (hex color) |
| Secondary color | Secondary color for charts and fills (hex color) |
| Theme | Light, dark, or system theme |
| Text size | Font size for the main display number |
| Hide branding | Removes the "Powered by Zenovay" footer when your workspace has white-label branding removal enabled (Scale and Enterprise) |
Applying Widget Settings
- Go to your domain settings
- Navigate to the Widgets tab
- Toggle widgets on or off
- Select a widget type tab (Realtime, Preview, or Chart)
- Adjust colors, theme, and text size
- Preview the widget in real-time
- Copy the generated iframe embed code
Widget settings update the preview immediately so you can see exactly how the widget will look before embedding it.
Best Practices
For Presentations
- The dark globe theme works well on large screens and projectors
- Use fullscreen mode for maximum visual impact
- The ambient lo-fi music player can enhance the experience during live demos
For Shared Links
- Scale and Enterprise white-label removes Zenovay branding for a professional client-facing experience
- Custom primary colors help maintain brand consistency on shared pages
For Embedded Widgets
- Choose colors that complement your website's design
- Test both light and dark themes against your site's background
- Use the system theme option to automatically match visitor preferences