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.

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.

Create a new field with Text Filters option

Step 2. Create contest

Go to NorrCompetition > Contests and Create contest.

Create Simple Contest

Select Simple type.

Assign Song field to contest

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.

Display Song field in the list of entries

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.

Soundcloud: click on Share button below the song

Soundcloud: click on Embed button

Soundcloud: Copy HTML code

Step 4. Add new entries

Now go to NorrCompetition > Entries and Add new entry.

Edit Entry: paste HTML code to Song field

The result

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

List of entries with embedded audio

Entry page with Soundcloud player

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