How to Whitelabel Metabase for Your SaaS Product

Whitelabeling Metabase means removing or replacing Metabase's own branding — the logo, color scheme, typography, and product name — so the embedded analytics experience appears to be a native part of your product. When done correctly, users have no visible indication they're using a third-party analytics tool; they see your brand throughout.

Full whitelabeling is available in Metabase Enterprise. Partial branding customization (colors, logo) is available in Metabase Pro.

---

What You Can Customize

Metabase Pro (Partial Branding)

• Logo — replace the Metabase logo in the top navigation with your own

Metabase Enterprise (Full Whitelabeling)

Everything in Pro, plus:

---

Configuring Branding in the Admin Panel

Most branding settings are in Admin → Settings → Whitelabel.

Replace the Logo

Upload your logo as an SVG or PNG. The logo appears in the top navigation bar of the Metabase UI and on the login page.

Recommended logo specifications:

Set the Brand Color

The brand color controls the primary accent — buttons, active states, links, and chart highlights. Use a hex color value:

#1A73E8  (example: Google Blue)
#FF5A00  (example: orange accent)

Ensure sufficient contrast against white backgrounds for accessibility (WCAG AA minimum: 4.5:1 ratio for text).

Set the Application Name (Enterprise)

The application name replaces "Metabase" wherever it appears in the UI — page titles, loading messages, error messages, and emails. Set it to your product name or a descriptive name like "Analytics."

Application name: "Analytics"
→ Page title: "Analytics – Sales Dashboard" → Loading message: "Loading Analytics..." → 404 message: "Analytics couldn't find that page"

Custom Font (Enterprise)

Specify a Google Font by name:

Font: "Inter"  →  loads from Google Fonts
Font: "DM Sans" Font: "IBM Plex Sans"

For self-hosted fonts, you'll need to use the Custom CSS approach (below) to load them via @font-face.

---

Removing "Powered by Metabase" from Embedded Dashboards

By default, embedded dashboards show a small "Powered by Metabase" badge in the bottom-right corner. This badge is removed automatically for Enterprise plans with whitelabeling enabled.

In the embedded iframe URL, you can also pass #hide_download_button=true to hide the download button that appears on charts.

---

Custom CSS (Enterprise)

For fine-grained control over the appearance of embedded dashboards, Metabase Enterprise supports injecting custom CSS. This is configured in Admin → Settings → Whitelabel → Custom CSS.

Custom CSS applies to all Metabase pages, including embedded dashboards. Common uses:

Hide Specific UI Elements

css
/<em class="italic"> Hide the Metabase navigation sidebar entirely </em>/ .Nav { display: none !important; } 
/<em class="italic"> Hide the "New" button in embedded contexts </em>/ .NewItemMenu { display: none !important; } 
/<em class="italic"> Hide chart download buttons </em>/ .DashCard .CardVisualizationControls { display: none !important; }

Override Dashboard Styling

css
/<em class="italic"> Remove dashboard card borders </em>/ .DashCard { box-shadow: none !important; border: 1px solid #E5E7EB !important; } 
/<em class="italic"> Change dashboard background </em>/ .Dashboard { background-color: #F9FAFB !important; } 
/<em class="italic"> Adjust card header font </em>/ .DashCardTitle { font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; }

Custom Chart Colors (Alternative to Admin Setting)

css
/<em class="italic"> Override specific chart colors </em>/ .dc-chart .stack._0 rect { fill: #2563EB !important; }

Note on CSS customization: Metabase's internal CSS class names can change between versions. Custom CSS should be tested after each Metabase upgrade and may require updates. Use the most specific selectors possible and add !important where needed to override Metabase's defaults.

---

Embedding-Specific Branding Parameters

The embedded iframe URL accepts several appearance parameters via URL hash that affect how the embedded dashboard looks:

javascript
const hashParams = [ "bordered=false", "titled=false", "hide_parameters=organization_id", ].join("&"); 
const embedUrl = ${METABASE_SITE_URL}/embed/dashboard/${token}#${hashParams};

---

Matching Your Brand Colors in Charts

Metabase's default chart palette may not match your product's visual design. In Enterprise, you can set a custom chart color palette in Admin → Settings → Whitelabel → Chart Color Palette.

The palette accepts up to 9 hex color values. Metabase cycles through these colors when rendering multi-series charts:

#2563EB, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #F97316, #84CC16, #6B7280

For single-series charts, Metabase uses the brand color set in the branding panel.

---

Email Branding (Enterprise)

Metabase sends emails for:

With Enterprise whitelabeling, these emails use your logo and application name instead of Metabase's. Configure the outbound email settings in Admin → Settings → Email and the branding in Admin → Settings → Whitelabel.

---

Login Page Customization

For self-hosted deployments where users log in to Metabase directly (rather than via SSO), the login page can be branded with your logo and colors. This applies to the page at /auth/login.

When using JWT SSO or SAML, users typically never see the Metabase login page — they authenticate through your identity provider and are redirected directly into Metabase.

---

Testing Whitelabel Appearance

Use Metabase's built-in preview mode to see how branding changes look before publishing:

---

Whitelabeling Checklist

Before launching your whitelabeled embedding:

---

Plan Requirements Summary

Summary

Whitelabeling Metabase removes the visual indication that customers are using a third-party tool. Partial branding (logo, brand color) is available in Pro; full whitelabeling — including removing the "Powered by Metabase" badge, setting a custom font, and applying custom CSS — requires Enterprise. The most impactful whitelabeling changes for embedded analytics are removing the badge, setting the brand color, and using bordered=false&titled=false in embed URLs to let your surrounding UI provide the visual framing.