Skip to main content

Designing a fully bespoke embed experience

When you embed Omni, the visual integration is as important as the data itself. A seamless look and feel builds trust with your users and makes analytics feel like a native part of your application. For example, you could combine white labeling, dynamic theming, and UI controls in Create Mode to deliver a world-class analytics suite that feels like a feature of your own platform. This guide covers how to customize Omni’s appearance and interactivity to match your desired user experience and brand guidelines.

Requirements

Before customizing the interface, check that you have Organization Admin permissions, as most suggestions in this guide will require organization-wide changes.

Branding the interface

The first priority for most teams is replacing Omni’s default branding with their own to maintain a consistent user journey.

Anonymizing the application

To make the application feel like your own, start with white labeling configurations:
  • Vanity domains: Use vanity domains to host Omni on your own subdomain (e.g., analytics.yourcompany.com) to keep users within your brand’s URL space.
  • Custom email sender: Ensure scheduled deliveries and alerts come from your own domain by configuring a custom email domain.
  • Removing the Omni logo: To remove the Omni logo entirely from the interface for a fully white-labeled experience, contact the Omni sales team or your account representative.

Rebranding the AI Agent

If you use Omni’s AI capabilities, you can ensure the agent feels like an integrated part of your application. For example, you can customize the AI name and avatar so users interact with a brand-aligned agent rather than a generic tool.

Colors and visual identity

Omni provides granular control over the colors used in your embedded content, from the application UI to individual data points.

Creating themes that adapt to content and users

You can build custom themes to define the colors, fonts, and other aspects of the Omni UI. When embedding, you aren’t limited to one singular look. You can pass a customThemeId URL parameter or within your SSO token, which allows you to dynamically change the theme based on the specific content being viewed or the unique branding requirements of an individual customer.

Ensuring data visualization consistency

To ensure your charts match your brand’s aesthetic, you can manage how colors are applied to data:
  • Color palettes: Define custom color palettes that reflect your brand’s UI kit.
  • Promoting colors: For specific metrics that must always appear in a certain color (e.g., “Revenue” is always green), use color promotion or define colors in the model directly. This ensures consistency across every dashboard and exploration.

Designing the user journey

Omni provides two main ways to embed: Single Content mode, which keeps users on a specific page, and Create Mode, which opens up editing and building capabilities for users. Each approach can be further customized to guide users while appearing seamlessly integrated into your platform.
Refer to this guide for examples of the most common deployment configurations.

Embedding a specific dashboard or AI chat

Use Single Content mode for templated dashboards or specific insights where you want to provide a fixed, curated experience. The content path you provide governs where the user lands, such as a specific dashboard or directly into the AI chat interface. This mode can particularly benefit from consistent color palettes and dashboard themes to fully blend in with the surrounding pages of your website.

Embedding a self-service user experience

Create Mode grants users the power to build and save their own dashboards. Because this mode introduces more of the Omni interface, you have additional controls to ensure it blends in with the rest of your application:
  • Specifying where users land: The content path allows you to direct users to the content hub, their favorites, or a specific shared folder.
  • Theming the navigation bar: You can apply a custom theme to the navigation elements to ensure the self-service sidebar matches your application’s layout.
  • Hiding navigation: If you want to provide self-service capabilities but keep the user focused on a single view, you can hide the navigation bar entirely.

Interactivity and extensions

For deeper integration, use these tools to bridge the gap between your parent application and the Omni iframe.

Letting Omni talk to your website

Build for interactivity using JavaScript events. This allows your parent application to listen for actions inside Omni (like a user clicking a data point) and trigger actions in your app, or pass filters from your UI directly into the iframe.

Designing custom visualizations

If Omni’s native chart library doesn’t meet a specific requirement, you have lots of options to build exactly what your vision calls for:
  • Apps: Create fully custom html-based content with native apps.
  • Vega-Lite: Build bespoke visualizations for dashboards using Vega-Lite JSON specifications.
  • Spreadsheets: Embed flexible spreadsheet tabs for users who need to perform deep cell-based analysis within the UI.
  • Markdown and HTML: Use Markdown tiles to combine live query data with custom HTML and CSS.