Free5 minutesintermediate

Globe Customization Options

Understand the 3D Globe's visual style and the customization options available for shared globe pages and HTML widgets.

globecustomizationbrandingwidgets
Last updated: January 15, 2025

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:

ElementDescription
Dark map baseMapbox dark theme with country borders
Visitor markersDiceBear avatar markers at visitor locations
Activity feedSide panel showing recent visitor activity
Top stats overlayLive visitor count, page views, and bounce rate
Music playerAmbient background music with genre selection

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

Enterprise Plan

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

SettingDescription
Remove Zenovay brandingHides the "Powered by Zenovay" footer on shared pages
Custom primary colorApplies your brand color as CSS variable for UI accents

How White-Label Works

When a shared globe link is loaded:

  1. The share token is verified
  2. White-label configuration is fetched for the associated website
  3. Custom CSS variables are applied (e.g., primary brand color)
  4. Branding visibility is set based on the configuration

White-label settings are managed through your domain settings in the Zenovay dashboard.

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

WidgetDescription
RealtimeLive visitor count with pulsing indicator
Preview24-hour visitor timeline with line chart
Chart30-minute bar chart with country breakdown

Widget Customization Options

Widget appearance is configured through the Widget Settings panel in your domain settings:

SettingDescription
Primary colorMain accent color for the widget (hex color)
Secondary colorSecondary color for charts and fills (hex color)
ThemeLight, dark, or system theme
Text sizeFont size for the main display number
Hide brandingRemove "Powered by Zenovay" footer (Enterprise)

Applying Widget Settings

  1. Go to your domain settings
  2. Navigate to the Widgets tab
  3. Toggle widgets on or off
  4. Select a widget type tab (Realtime, Preview, or Chart)
  5. Adjust colors, theme, and text size
  6. Preview the widget in real-time
  7. 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 music player can enhance the experience during live demos
  • 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

Next Steps

Was this article helpful?