Skip to main content

Widget Customization

Customize the appearance and behavior of your Earpocket widget directly from your dashboard.

Overview​

Each site has a Widget Settings section on its detail page. Changes you make here are saved to your site's configuration and apply to the widget wherever it's installed.

Dashboard vs code configuration

Settings configured in the dashboard are your site-level defaults. You can also override specific settings via data attributes on the script tag.

Accessing Widget Settings​

  1. Go to your Dashboard
  2. Click on a site
  3. Scroll to the Widget Settings section

Position​

Control where the widget button appears on your site:

ValueDescription
Bottom RightFixed to the bottom-right corner (default)
Bottom LeftFixed to the bottom-left corner
Top RightFixed to the top-right corner
Top LeftFixed to the top-left corner
InlineAnchored within article content

Select a position from the dropdown to update the setting.

Theme​

Choose how the widget adapts to your site's color scheme:

ValueDescription
AutoMatches the reader's system preference (default)
LightAlways uses the light theme
DarkAlways uses the dark theme

Toggle between themes using the theme buttons.

Accent Color​

Set a custom accent color for the widget to match your brand:

  • Use the color picker to select visually
  • Or type a hex value directly (e.g., #0ea5e9)

The accent color is applied to the widget button and interactive elements.

Button Text​

Customize the text displayed on the widget button:

  • Default: Add to Podcast App
  • Maximum: 50 characters
  • Examples: Listen Now, Hear this article, Add to Podcast

Live Preview​

As you adjust settings, a live preview of the widget button appears on the page. This shows exactly how the button will look with your current position, theme, accent color, and button text selections.

Saving Changes​

Click the Save Widget Settings button to apply your changes. The settings take effect immediately on your site.

Next Steps​