Customization

Customizing the color scheme of Delight XR can be done globally per HTML document via the use of meta tags. This enables you to easily customize the appearance of the player to match your corporate identity.

Example

 <head>
    ...
    <!-- Color scheme customization -->
    <meta name="dl8-customization-primary-color" content="#00e573">
    <meta name="dl8-customization-secondary-color" content="#000090">

    <!-- White label customization -->
    <meta name="dl8-customization-brand-name" content="Company Name">
    <meta name="dl8-customization-brand-logo" content="company-logo.svg">
    <meta name="dl8-customization-brand-watermark-logo" content="watermark-logo.svg">
    <meta name="dl8-customization-brand-url" content="http://...">
    ...
  </head>

dl8-customization-primary-color

Defines the primary color of the Delight XR theme. Bright, saturated and memorable colors work best because it is used as the main accent and highlight color. The value is an RGB hex string.

dl8-customization-secondary-color

Defines the secondary color of the Delight XR theme. It is mainly used to complement the strong accent color as a slightly darker muted background tone and to style secondary buttons and headlines. The value is an RGB hex string.

dl8-customization-brand-name

Defines the name of your brand or company. It appears in several interfaces like the wizard and some dialogs. The default is the standard Delight VR brand name.

dl8-customization-brand-logo

Defines the logo of your brand or company. It appears in the top right in the embed and top left inside the viewer when no custom watermark logo is present. Logos with clear silhouettes in lighter tones work best. The width should be around 32 to 90 pixels and the height should not exceed 32 pixels. Consider using vector graphics files (.svg). The default is the Delight VR logo.

dl8-customization-brand-watermark-logo

Defines the watermark brand logo of your brand or company. It appears in the top left corner inside the viewer and should be roughly squared in size. Logos with clear silhouettes in lighter tones work best. The width and height should be around 32 pixels. Consider using vector graphics files (.svg). The default is the Delight VR watermark logo.

dl8-customization-brand-url

Defines the URL of your brand or company. By clicking the brand logo users are guided to the given brand URL. The default is the Delight VR website.

dl8-customization-no-brand-logo

Add this meta-tag if you don’t want the brand logo to appear in the embed.

dl8-customization-no-brand-watermark-logo

Add this meta-tag if you don’t want the watermark to appear in the player.

dl8-customization-no-content-badge

Add this meta-tag if you don’t want the content type badge in the embed to appear in the bottom left corner.

dl8-customization-no-compass

Add this meta-tag if you don’t want the compass to appear on the right side.

dl8-customization-no-vr-button

This meta tag hides the VR button displayed in the bottom right corner of the player UI.

dl8-customization-no-settings-button

This meta tag hides the settings button displayed in the bottom right corner of the player UI.

dl8-customization-no-fullscreen-button

This meta tag hides the fullscreen button displayed in the bottom right corner of the player UI.

dl8-customization-no-controls

This meta tag hides the video player control bar at the bottom of the player UI. This includes the seeking bar, sound control, time and duration labels.

dl8-customization-no-title

This meta tag hides the title at the top of the player UI.