> For the complete documentation index, see [llms.txt](https://docs.podigee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.podigee.com/documentation/create-and-publish/publishing-and-distribution/configure-the-web-player.md). # Configure the web player Choose the style, colors, panels, extensions, and platform buttons of the Podigee web player. Use this task to set how the Podigee web player looks and what it offers on your podcast website and in embeds on other websites. The settings apply to the podcast and to every episode. ## Before you start * You need the owner, admin, or editor role for the podcast, with permission to edit the podcast. * In the classic view, the podcast needs at least one published episode. Without one, the tab shows **Please create an episode with an audio file to be able to configure the web player.** * The full color picker is available on Scale and above, or an older plan that includes it. The curated color list is available on Grow and above, or an older plan that includes it. ![Web player tab of a podcast in the classic view with the notice Please create an episode with an audio file to be able to configure the web player](https://2032417310-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbqUKO6lljHGzkEAzliPI%2Fuploads%2Fgit-blob-01d16834b69a1da4d0002738d7b03b85855077cd%2Fdoc-distribution-010-classic-no-episode-notice.png?alt=media) Without a published episode, the Web player tab shows this notice and no settings. {% tabs %} {% tab title="Classic view" %} Each change on the **Web player** tab saves automatically. The tab has no save button. When you can use the Podigee workspace, the tab can show a note about the new player under its heading. The note shows also when the podcast has no published episode yet: * With a Podigee style: "Your player has a new design". Select **Open in the new view**. * With **Custom CSS** or **External theme** on an older player: "Try the new player". Select **Try it in the new view**. The button makes the Podigee workspace your default view and opens the player settings there. ### Choose the style and colors 1. Open the podcast and select the **Web player** tab. The tab describes itself as **Configure your web player for website and embedding**. 2. Select a style in **Style**. Ordinary players use **Standard**, including saved Legacy, Minimal, and Simple choices. Account themes and custom styles remain available when your account includes them. 3. Set **Highlight** when your plan includes it. The curated list offers 12 colors. The full picker offers any color. Other plans use the default highlight. Account themes can have separate **Highlight**, **Background**, and **Text** fields. ### Remove the Podigee logo For the **Standard** theme, the checkbox **Choose if you want to have the Podigee logo in the player** removes or shows the logo. The whitelabel player is available on Creator and above, or an older plan that includes it. On other plans, the checkbox opens an upgrade dialog. ### Add custom CSS or an external theme When your account includes them, the **Style** list also contains **Custom CSS** and **External theme**. The external theme is available on Creator and above, or an older plan that includes it. Custom CSS is available only on older accounts that include it. Use these styles only when you can maintain the theme yourself. A custom style uses your own Cascading Style Sheets (CSS) file and, for the external theme, an optional HyperText Markup Language (HTML) file. 1. In **Style**, select **Custom CSS** or **External theme**. 2. In **CSS URI**, enter the address of your CSS file. 3. For **External theme**, enter the address of your HTML file in **HTML URI**. 4. In **Theme to be overwritten**, keep the selected base. A new custom style uses **Standard**. An existing style can show **Legacy** or **Standard (old version)**. Keep that base until you adapt your CSS or HTML to the new player. 5. Optional: in the sections **On website** and **Embedded**, set **Webplayer height (px)**. [Custom themes](https://docs.podigee.com/api-reference/web-player/custom-themes) in the API Reference describes the files, the hosting rules, and the template. ### Set the start panel and extensions The player has two contexts: the podcast website and embeds on other websites. The tab shows them as the sections **On website** and **Embedded**. Set each context separately. 1. Open the section **On website** or **Embedded**. 2. In **Start panel**, choose the panel that opens first: **None**, **Download**, **Playlist**, **Chapters**, **Episode information**, **Share**, or **Transcript**. 3. Under **Active extensions**, select or clear **Subscribe Bar**, **Chapters**, **Download**, **Episode information**, **Share**, **Playlist**, and **Transcript**. The **Standard** theme does not show **Download**. ### Show platform buttons The player can link to the platforms where your podcast is listed. The tab shows one checkbox per connection. Select the checkbox of each platform that the player shows. The platforms appear in the **Subscribe** menu. Standard can also show up to three platform icons next to **Subscribe**. Choose Featured platforms in the Podigee workspace. The classic view has no checkboxes for Facebook, Google, Steady, or X (Twitter). For YouTube, use the checkbox **YouTube Video**. A connection without a stored URL has a disabled checkbox. Its tooltip tells you to configure the platform on the **Exports** tab first. ### Expected result The player on the podcast website and in embeds uses the chosen style, colors, panels, and buttons. Open an episode page to check. ### If you cannot complete the task * A color option is missing: the plan does not include it. The curated list needs Grow and above. The full picker needs Scale and above. * The colors are missing: the style is **Custom CSS** or **External theme**. Your CSS sets the colors. * A platform button is missing or its checkbox is disabled: submit the podcast to the platform first, or store its URL on the **Exports** tab. {% endtab %} {% tab title="Podigee workspace" %} ### Complete the task 1. Open the podcast and select **Reach** under **Publish** in the sidebar. The page **Reach** opens. 2. Select the card **Player**. The card **Your player** shows the player settings. 3. If your plan includes your own player files, choose the **Design**: **Podigee design** or **Your own CSS and HTML**. See [Use your own CSS and HTML](#use-your-own-css-and-html). When your plan does not include your own player files, the page shows the **Design** choice only while your files are in use. Read [Use your own CSS and HTML](#use-your-own-css-and-html) first. When your files build on an older player, the page shows the row **Theme** with **Your own files** in place of these settings. See [Switch older own files to the new player](#switch-older-own-files-to-the-new-player). 4. Under **Appearance**, choose a **Color tone** for Standard. The preview next to the fields plays a sample episode and updates when you change the settings. 5. Set **Highlight color** when your plan includes it. Choose from the curated list or use the full picker. Other plans use the default highlight. With the full picker, select **Reset** to use the default color. Account themes can have **Primary color**, **Background color**, and **Text color** fields. Custom CSS and external themes set their colors in their own files. 6. Turn on **Hide Podigee branding** to remove the Podigee logo from your player. This switch is available on Creator and above, or on an older plan that includes branding removal. 7. Under **Panels on your website** and **Panels in embeds**, turn each panel on or off. Themes other than Standard also show **Download**. 8. Under **Platforms in the player**, choose a state for each linked platform: * **Featured**: an icon next to **Subscribe**, up to three. Fewer icons can fit on a small screen. * **Listed**: a link in the **Subscribe** menu. * **Hidden**: no link in the player. Featured is available for the current Standard layout and custom CSS that uses that layout. Retained older layouts and themes with custom HTML offer Listed and Hidden. Saved Featured choices remain stored. Only platforms with a public link appear. To add a missing link, select **Open Channels**. 9. Changes save automatically. Wait for **Saved** at the bottom of the page. When a color or branding option is not in your plan, it shows a notice with a button. Colors are included from Grow, and branding removal from Creator. If you manage the plan of the show and the owner can buy that plan directly, the button is **Upgrade to Grow** or **Upgrade to Creator**. If the plan cannot be bought directly (for example, billing is not set up), the button is **See plans** and opens the plans page. If you do not manage the plan of the show, the button is **Ask \[owner name]** or **Ask the show owner** and opens an email to the podcast owner. ### Use your own CSS and HTML Your own player files are available on Creator and above, or an older plan that includes them. 1. In **Design**, select **Your own CSS and HTML**. The color tone and highlight color fields close. When no file address is saved, Podigee saves nothing until you enter one. Saved addresses apply right away. 2. In **Address of your CSS file**, enter the full address of your CSS file, for example `https://www.example.com/player.css`. The player loads this file in place of its own styles. 3. Optional: in **Address of your HTML file**, enter the address of an HTML file. It replaces the layout of the player. 4. Wait for **Saved**. To go back, select **Podigee design**. The player uses a color tone again, and the addresses of your files stay saved. When your plan does not include your own player files, you cannot select your files again after this change. [Custom themes](https://docs.podigee.com/api-reference/web-player/custom-themes) in the API Reference describes the files. ### Switch older own files to the new player When your **Custom CSS** or **External theme** builds on an older player, the page shows the row **Theme** with **Your own files** and "Your files build on an older player, so the new player cannot use them." The card **Try the new player** lists what the new player gives you. To keep your files and change their addresses instead, select **Change their addresses in the classic view** below the row **Theme**. You can go back to your files only while your plan includes Custom CSS or the external theme. Without them, the classic view does not list these styles. Decide before you select **Switch now**. 1. Select **Switch to the new player**. The dialog **Switch your player to the new design?** opens. 2. Read the points: the new design shows right away, in the Cream tone or in your saved tone when one is saved. Your files no longer change the player, and the addresses of your files stay saved. 3. Select **Switch now**, or **Cancel** to keep your files. Podigee shows "Your player now has the new design. Pick a color tone and the panels you want." To go back to your files after the switch, use the classic view. The dialog also says this: "To go back to them, use the classic view." 1. In the classic view, open the **Web player** tab of the podcast. 2. Read the notice about your saved files. In **Style**, select the style that the notice names. The addresses of your files are still saved. The change saves automatically. When your plan includes your own player files, you can also select **Your own CSS and HTML** under **Design** in the Podigee workspace. Your saved files then come back on the older player that they were written for. When you use the same files again, they build on the older player that they were written for. To put new files on the new player, select **Standard** in **Theme to be overwritten** in the classic view. The card **Embed the player on your website**, below the settings, gives the embed code of the podcast. To copy the code, refer to [Embed the player on your website](/documentation/create-and-publish/publishing-and-distribution/embed-the-player-on-your-website.md). ### Expected result The save state at the bottom of the page shows **Saved**. The player on the podcast website uses the panels under **Panels on your website**. Embedded players use the panels under **Panels in embeds**. What is different from the classic view: * The workspace offers Standard theme tones and Featured platform choices. The classic view has platform show/hide checkboxes. * The workspace sets your own CSS and HTML files on the new player, and switches files that build on an older player to the new player. * The account-theme list, **Theme to be overwritten**, the player height, the start panel, and changes to own files that build on an older player remain in the classic view. * The page opens for a podcast that has no published episode. ### If you cannot complete the task * The page shows "Only people who may edit this show can change these settings.": the fields are read-only. Ask a person who can edit the show. * The save state shows **Couldn't save**: read the notice on the page. * The page shows **Player settings could not be saved** with "Use a 6-digit hex color like #DB4615.": enter the color as a hexadecimal value with 6 digits, for example `#DB4615`. * The page shows **Player settings could not be saved** with "This highlight color is not included in your current plan.": pick one of the colors of the curated list. * The page shows **Player settings could not be saved** with "Enter the address of your CSS file.": **Your own CSS and HTML** is selected and the CSS address is empty. Enter the address, or select **Podigee design**. * The page shows **Player settings could not be saved** with "Enter full web addresses, such as .": enter the complete address with `https://`. * The page shows **Player settings could not be saved** with "Your plan does not include your own player files.": the plan of the podcast owner does not include them. Select **Podigee design**. * The color tone and highlight color are missing: **Your own CSS and HTML** is selected, or your files build on an older player. Your CSS sets the colors. {% endtab %} {% endtabs %} ## Saved highlights and older players Both interfaces use the show account's color permissions. Standard keeps a saved highlight when the plan permits it. Otherwise, it shows the default color and retains the saved value. A later plan change can make that saved color available again. Existing compact iframe embeds and customer themes keep their compatible player. New embed code uses the player script. ## Next step [Embed the player on your website](/documentation/create-and-publish/publishing-and-distribution/embed-the-player-on-your-website.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.podigee.com/documentation/create-and-publish/publishing-and-distribution/configure-the-web-player.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.