### A DatoCMS plugin to embed Ausha podcast players. Paste an Ausha embed code and get a live preview with configurable display options (color, playlist, layout).

(Image content)

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## Ausha Player

A DatoCMS plugin to embed Ausha podcast players. Paste an Ausha embed code and get a live preview with configurable display options (color, playlist, layout).

(Image content)

## Features

-   **Embed paste & parse**: Paste any Ausha embed code, the plugin extracts and stores a clean, structured JSON value
-   **Live preview**: See the Ausha player rendered directly inside your DatoCMS editor
-   **Per-record customisation**: Override accent color, playlist visibility, and layout (horizontal/vertical) directly from the field editor toolbar
-   **Bilingual**: Full English and French interface, auto-detected from DatoCMS locale
-   **Clean output**: Stores a structured JSON object ready to consume in your frontend

## Installation

Install the plugin from the [DatoCMS Plugin Marketplace](https://www.datocms.com/marketplace/plugins/i/@breaking/datocms-plugin-ausha-player.md).

## Usage

### Setting up the field

1.  Add the plugin to your DatoCMS project
2.  In your model, add a new field (JSON type)
3.  Under "Presentation", select "Ausha Player" as the field editor
4.  Save your changes

### Embedding a player

1.  Copy the embed code from your Ausha dashboard (`<iframe ...></iframe>`)
2.  Paste it into the plugin field
3.  Click "Embed" — the player preview appears immediately
4.  Use the toolbar above the preview to customise color, playlist visibility, and layout
5.  Click "Clear" to remove the embedded player

## Configuration

Customisation options are available **per record**, directly in the field editor toolbar that appears above the player preview:

-   **Color**: Override the player accent color (hex, e.g. `#751CBF`). Leave empty to use the embed default.
-   **Playlist**: Force show or hide the episode list. Leave empty to use the embed default.
-   **Layout**: Force horizontal or vertical layout. Leave empty to use the embed default.

## Using the value in your code

The field stores a JSON object with everything you need to render the player:

```json
{  "src": "https://player.ausha.co/...",  "title": "My Podcast",  "height": 220,  "rawEmbed": "<iframe ...></iframe>",  "color": "#751CBF",  "playlist": "true",  "layout": "horizontal"}
```

`color`, `playlist`, and `layout` are optional — absent or empty means the embed default is used.

```jsx
// In React/Next.js<iframe  src={record.aushaPlayer.src}  title={record.aushaPlayer.title}  height={record.aushaPlayer.height}  style={{ width: "100%", border: "none" }}  allow="autoplay"/>
```

## Development

This plugin uses **pnpm v10** as the package manager.

```bash


# Install dependenciespnpm install# Start development serverpnpm dev# Build for productionpnpm build
```

## Credits

Made by [Breaking Web](https://www.breakingweb.com/)

## License

MIT