---
title: Displaying HTML with BrightSign Author
slug: develop/displaying-html-with-brightsign-author
docTags: 
createdAt: 2025-03-11T07:03:32.131Z
---

This page covers how to integrate HTML pages into BrightSign Author presentations. To add an HTML page to a presentation, select the HTML5 widget in the bottom of the **Content** window and drag it into the content panel above. [This page](docId\:AkrM58NDS_BN6AyhWZRax) describes how to use that widget.

## HTML Guidelines

### Zones

- You can have multiple zones containing HTML content in a BrightSign Author presentation.
- HTML content can be inserted into a **Video or Image** zone or an **Image** zone.

### Z-Ordering

- HTML content will show at the highest Z-level of graphics zones, meaning that an HTML zone will cover all other zones that contain images and text. This behavior does not extend to touch screens.
- HTML content can be placed in front of or behind zones containing video content, if you drag the **Graphics** zone(s) before or after the **Video** zone(s) (under the Zone menu in the **Zone Properties** panel). See Image 1 below.
- If the HTML page contains video and the **Enable native video playback** option is enabled in the HTML5 state, the HTML page will *always* display over other video zones.

::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/-DdpFgSyGkB1qXkLTKVnm_screenshot-2023-09-07-at-104742-am.png" size="62" width="792" height="647" position="center" darkWidth="792" darkHeight="647" showCaption="false"}

### Content Sourcing

HTML content can originate from a remote server, a local server, or the local storage (SD card) of the player. Presentations containing HTML content can also be downloaded onto the local storage from the BrightSign Network.

### Using Custom Fonts

To use custom fonts, specify the font in your script. If the font file is in the same directory as your JS and CSS files, it will be used in BrightSign Author. 

### Exporting an HTML5 Presentation

Exporting a presentation that contains multiple HTML pages also exports in full all asset folders associated with those pages. If your pages share common asset folders, the entire contents will be duplicated multiple times. This can become problematic if your asset folders contain large content files, so you may need to prune and/or rearrange asset folders that are duplicated after export.

### Chromium Video Playback

The HTML5 widget has an **Enable Native Chromium video playback** option in versions 1.19.2 and later of BrightSign Author. This feature is only available for XC5 players and is explained on [this page](docId\:AkrM58NDS_BN6AyhWZRax).

:::hint{type="info"}
Partners using a custom CMS can use [HTML Playback by Player Series](docId\:Wx7RHJmrG74EQxGXRwqtD) for more guidance on setting this option in their CMS.
:::

## Caching and Storage

BrightSign Author allows you to configure common browser caching and storage functions on the player. To enable these functions in your BrightSign Author presentation, select **Enable Limit Storage** under **Admin > Application Preferences**, allocate the space as you wish, and select **Apply**. You can allocate space for the following functions:

- **HTML Data**: The amount of space dedicated to the HTML application cache
- **HTML Local Storage**: The amount of space dedicated to JavaScript variables and data
- **HTML Indexed DB**: The amount of space dedicated to IndexedDB content

::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/MDV7nRyJ55A0DDEbluBbz_htmllimitoptions.png" size="72" width="2022" height="1533" position="center" darkWidth="2022" darkHeight="1533" showCaption="false"}

## Using HTML with Portrait Orientation

To create a digital-signage canvas that is portrait oriented, simply create a portrait presentation and then insert an HTML5 widget.

## Integrating Touchscreen Content

You can enable touch-screen events for an HTML page by checking the **Enable mouse and touch events** box when creating an HTML5 state .

## Disguising Network Latency

When the BrightSign player loads HTML content from a URL, there may be a delay based on network latency. You can add a preload image to sidestep this issue. Note that this solution is not necessary if all HTML assets are located on the local storage of the player.

1. Set BrightSign Author to **Interactive**
2. Drag and drop an image file into the main panel
3. Set the **Initial State** box while editing the [Image State](docId\:aC3srsjbmpI1w2gN0Y3El).
4. Specify the timeout for three seconds (or more if desired) in a [Timeout Event](docId\:p2IAPuAXjbsLp4yNaqlet)**.**
5. Set the **Timeout** **Event** to transition to the HTML5 state.

## Displaying Scrollbars

The scrollbar behavior will be the same as it is in the current version of Chromium.

To display scrollbars, reference this simple CSS file from your HTML page:

::File{src="https://api.archbee.com/api/presign/0prk6SO2dy9LdU77jB8D1/hS5XNhD9KKx90CPYxZmBD_forcescrollbars.css" label="ForceScrollbars.css" isUploading="false"}

## Debugging Webpages

See [this page](docId:4qlK1krr1cnx7xypWXRY5).