# Embedding HTML snippets on example of music contest

\*\*Note:\*\* after 20 seconds since beginning, the video comes in HD quality.

NorrCompetition works with various media content and allows to upload photos and embed videos as well as create simple content without media. The simple type together with fields can make a little magic: you can embed HTML snippets of any 3rd party service. We will consider creating a contest with music content.

You can embed audio tracks from any online music service that provides a way to embed audio via HTML code:

* Soundcloud
* Spotify
* Deezer
* Bandcamp
* and other

### Theory

We need to create a contest called **Weekend music** and add entries that consist of tracks from Soundcloud and Spotify. Before creating the contest, a special field should be created. This field will be used to allow a user to paste the HTML code.

Warning! Allowing users to paste the code that contains Iframe tags endanger your site and cause the potential risk of being hacked. Iframe allows to run external scripts, so the attacker can execute any malicious code and do everything with your site. We highly recommend not to allow any user groups except site administrators to create content based on the Text Filters filter. Give such privilege to site administrators and to trusted persons only!

### Step 1. Create field

Go to *NorrCompetition > Fields* and [Create field](https://docs.norrnext.com/norrcompetition/fields/creating-field).

Give the field a name **Song**. Set *Text Filters* in the **Filter** param and make the field visible.

*Text Filters* option use text filter settings from the system's global configuration. You can set restrictions there, but by the default the use of Iframe tag is allowed for Super Administrator.

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

### Step 2. Create contest

Go to *NorrCompetition > Contests* and [Create contest](https://docs.norrnext.com/norrcompetition/contests/creating-contest).

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

Select **Simple** type.

<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>Assign Song field to contest</p></figcaption></figure>

The next step is to assign fields to the contest. Check the \*\*Song\*\* field which will be used to embed audio. Now the audio player will be displayed on the entry page.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-select-entry-field-en.png" alt="Display Song field in the list of entries"><figcaption><p>Display Song field in the list of entries</p></figcaption></figure>

However, we should embed players on the list of entries too. To do this, just go to *NorrCompetition > Contests > Edit contest* and click on the **Layout Settings** tab. Then find **Entry Field** param and select *Song* field. Now all entries will get embedded players in the list of entries.

### Step 3. Get HTML code from music provider

Well, it is time to get HTML code. Let's open any sound service and copy HTML snippets of your lovely song.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-soundcloud1.png" alt="Click on Share button below the song in Soundcloud"><figcaption><p>Soundcloud: click on Share button below the song</p></figcaption></figure>

<br>

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-soundcloud2.png" alt="Click on Embed button"><figcaption><p>Soundcloud: click on Embed button</p></figcaption></figure>

<br>

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

### Step 4. Add new entries

Now go to *NorrCompetition > Entries* and [Add new entry](https://docs.norrnext.com/norrcompetition/entries/adding-entry).

<figure><img src="https://norrnext.com/images/docs/norrcompetition/best-practices/music-contest-create-entry-en.png" alt="Create entry: paste HTML code to Song field"><figcaption><p>Edit Entry: paste HTML code to Song field</p></figcaption></figure>

### The result

The example of how the embedded code looks like in NorrCompetition is represented on the screenshots below:

<br>

<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>List of entries with embedded audio</p></figcaption></figure>

<br>

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

If you do not need embedded players to be displayed in the list of entries and want to put logo/photos, just create a photo contest and customize the theme via the [template override](https://docs.norrnext.com/norrcompetition/customisation/template-overriding) by removing a photo from entry page. Finally, you will get the photo in the list of entries and no image in the entry page, but just embedded code.