Step 2: Customize Your Audio Player Appearance

Now that your audio content is ready, it’s time to make the player fit seamlessly into your website. In this step, you’ll learn how to customize the Audio Player’s appearance, adjust its style, and align it with your brand’s look and feel.

Select Widget Layout

Here you can choose how your player appears on your website. Two layout options are available: Embed and Floating.

The Embed layout places the player in a fixed location on your page. You can adjust its width in pixels or as a percentage to fit your design:

The Floating layout stays visible even as visitors scroll. Here you can configure:

1

Position – Choose where the floating player appears on the screen.

2

Width – Set the widget width. This option is available for all floating positions except Bottom Center.

3

Minimize Button – Enable this option to let visitors minimize the player. Once selected, you can also toggle Minimize by Default to start with the player minimized:

4

Close Button – Allow visitors to close the player. After enabling, the When to Show Again option will let you control when the player reappears:

Adjust Player Style

In the Style section, customize the player to match your website. You can select a Color Scheme – Light, Dark, or Custom:

Light and Dark apply standard light/dark color themes. There, you can also select an Accent Color and Font. Leaving the font as Default applies your website’s font:

Custom lets you create your own color scheme. When this option is selected, you can customize the following settings:

1

Background Type – Choose Transparent, Color, or Image. Depending on your selection, additional settings appear, e.g., Background Color.

2

Text Color – Customize the color of text inside the player.

3

Accent Color – Set the color used for the main player controls and highlights.

4

Font – Choose the font for player text, either default from your website or another from the list.

Great job! You’ve successfully customized your Audio Player appearance.

Next, let’s move on to advanced settings to finalize the setup and make sure it works exactly the way you need. ✨