> For the complete documentation index, see [llms.txt](https://docs.norrnext.com/norrcompetition/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.norrnext.com/norrcompetition/best-practices/embedding-html-snippets-on-example-of-music-contest.md).

# Embedding HTML snippets on example of music contest

NorrCompetition supports multiple contest types: **Photo**, **Video**, and **Simple** (no mandatory media upload). Combining the **Simple** contest type with **Custom Fields** allows you to embed third-party HTML snippets and widgets, such as interactive audio players or external embeds.

Supported music and audio embed providers include:

* **SoundCloud**
* **Spotify**
* **Deezer**
* **Bandcamp**
* and any provider supplying embeddable HTML `<iframe>` or audio widget code.

***

## Security Consideration

{% hint style="danger" %}
**Security Warning on Text Filters:** Allowing untrusted users to submit raw HTML snippets containing `<iframe>` or `<script>` tags presents security risks (XSS). In Joomla, HTML filtering is governed by **System > Global Configuration > Text Filters**.

Ensure raw text filtering privileges (e.g. *No Filtering*) are granted strictly to trusted roles (e.g., **Super Users** or verified moderators), while public/guest submitters use the **Safe HTML** or **Text** filter.
{% endhint %}

***

## Step-by-Step Walkthrough

### Step 1: Create a Custom Field for Embed Code

1. Navigate to **Components > NorrCompetition > Fields** and click **New** (see [Creating Field](/norrcompetition/fields/creating-field.md)).
2. Configure the field:
   * **Title:** `Song` (or `Audio Track`)
   * **Type:** `Textarea`
   * **Filter:** `Text Filters` (applies the Joomla Global Configuration text filtering rules) or `Raw`.
   * **Display:** Set to visible.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/sound-contest-create-field-with-text-filters-option-en.png" alt="Create custom field with Text Filters option"><figcaption><p>Creating a Custom Field with Text Filters</p></figcaption></figure>

### Step 2: Create a Simple Contest

1. Navigate to **Components > NorrCompetition > Contests** and click **New** (see [Creating Contest](/norrcompetition/contests/creating-contest.md)).
2. On the **General** tab, set Contest Type to **Simple**.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-create-simple-contest-en.png" alt="Create Simple Contest"><figcaption><p>Creating a Simple Contest</p></figcaption></figure>

3. Open the **Fields** tab and enable the **Song** field.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-assign-field-en.png" alt="Assign Song field to contest"><figcaption><p>Assigning Custom Field to Contest</p></figcaption></figure>

4. To display the embedded audio player directly in the entry list grid:
   * Go to **Layout Options** tab.
   * In the **Entry Field** parameter, select the **Song** field.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-select-entry-field-en.png" alt="Display Song field in entry listing"><figcaption><p>Displaying Custom Field in the Entry Grid</p></figcaption></figure>

### Step 3: Copy the Embed Code from the Audio Provider

Open your audio provider (e.g., SoundCloud) and copy the iframe embed code for the track:

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-soundcloud1.png" alt="SoundCloud Share button"><figcaption><p>SoundCloud: Click Share</p></figcaption></figure>

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-soundcloud2.png" alt="SoundCloud Embed tab"><figcaption><p>SoundCloud: Select Embed Tab</p></figcaption></figure>

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-soundcloud3.png" alt="Copy embed code"><figcaption><p>Copy the HTML Embed Code</p></figcaption></figure>

### Step 4: Create an Entry with the Embed Code

Navigate to **Components > NorrCompetition > Entries > New** (see [Adding Entry](/norrcompetition/entries/adding-entry.md)) and paste the embed code into the **Song** field.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-create-entry-en.png" alt="Paste embed code into entry custom field"><figcaption><p>Pasting Embed Snippet into Entry Custom Field</p></figcaption></figure>

### The Result

The embedded player renders both on the entries list page and on the individual entry details page:

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-list-of-entries-audio-en.jpg" alt="List of entries with embedded audio"><figcaption><p>Contest Entries Grid with Embedded Audio Players</p></figcaption></figure>

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-entry-with-audio-song-en.jpg" alt="Entry details page with embedded audio player"><figcaption><p>Entry Details Page with Player</p></figcaption></figure>

{% hint style="info" %}
**Alternative Layout with Artwork:** If you want thumbnails/album covers in the grid while playing audio on the entry page, create a **Photo** contest instead, and customize the layout via [Template Overrides](/norrcompetition/customisation/template-overriding.md).
{% endhint %}