Branding

Learn how to customize the BeyondWords Player to fit your brand or use case

The BeyondWords Player comes with default UI styles that you can use out of the box and you can customize the colors, call-to-action, controls, and add an image to some styles.

You can use our default player styles, or you can use the player in headless mode to build your own fully customized player UI.

Style

playerStyle

The following styes are available:

• standard this is our primary player style, carefully crafted to suit article header placement (recommended).

• small this is a smaller version of the standard style, perfect for a more subtle or space-constrained placement.

• large this is the largest style, perfect for showcasing podcasts or audio content as the main focus on a page.

Colors

The player can be set to either a light theme or a dark theme, and each theme has its own color settings.

For each theme you can customize the following properties:

• backgroundColor

• iconColor

• textColor

Each property has a default color. However, you can set each property to any CSS color, including named colors, HEX, RGBA and even linear gradients.

Call-to-action

callToAction

You can customize the default "Listen to this article" call-to-action on the player according to your preferences.

Not available in the large player style.

Skip controls

skipButtonStyle

You can choose whether listeners should be able to skip forwards and backwards between segments "paragraphs", or based on specific time intervals in seconds, or even tracks (for playlists).

• auto choose this option to enable dynamic skipping by segments when the player is initialized with a single audio, or by tracks when initialized with a playlist (default).

• segments choose this option to enable skipping backwards and forwards between paragraphs.

• seconds choose this option to enable skipping backwards and forwards in seconds. The default value is set to 10 seconds.

To adjust the skip duration for seconds, simply append the desired number of seconds. For example, use seconds-15 to skip 15 seconds backward and forward, or use seconds-15-30 to skip 15 seconds backward and 30 seconds forward.

Image

Only available in the large player style.

The default image for the large player style is a square thumbnail of the content image. You can override this and upload your own image to appear on the player instead.

Intro and outros

introsOutros

You can customize your audio experiences by uploading an audio intro and outro to play whenever someone starts or finishes listneing to an audio. This could be sonic branding, like a sound effect, or a message from the publisher.