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

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.

---

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).

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.

Creating a Custom Field with Text Filters

Step 2: Create a Simple Contest

1. Navigate to Components > NorrCompetition > Contests and click New (see Creating Contest).

2. On the General tab, set Contest Type to Simple.

Creating a Simple Contest

1. Open the Fields tab and enable the Song field.

Assigning Custom Field to Contest

1. 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.

Displaying Custom Field in the Entry Grid

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:

SoundCloud: Click Share

SoundCloud: Select Embed Tab

Copy the HTML Embed Code

Step 4: Create an Entry with the Embed Code

Navigate to Components > NorrCompetition > Entries > New (see Adding Entry) and paste the embed code into the Song field.

Pasting Embed Snippet into Entry Custom Field

The Result

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

Contest Entries Grid with Embedded Audio Players

Entry Details Page with Player

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.