Part 8 – Building A Simple Website & Web Player

TABLE OF CONTENTS

• Building A Simple Website (Website add-on required)
  • Logos & Colours
  • Contacts & Social Media
  • Replacing Template Content with Your Own
  • Adding Some Shows to Your Schedule
• Customising Your Web Player
  • Customise Options
  • Embedding Your Web Player on 3rd Party Websites

Now that Santa Baby Radio is up and running it is time to turn our attentions to how listeners will be able to access and listen to the radio station.

Building A Simple Website (Website add-on required)

In order to access the tools in this episode, you will need to have added the optional Radio Website CMS add-on for your Myriad Cloud station or be on a Myriad Cloud Ultimate subscription.

 

Once the website add-on is enabled, you can access and modify the template radio site as required.

Let’s start by looking at the template website. On the Dashboard, click on the Visit Website button.

The default template provides the basic structure for the site, but we need to change the colours, logos and content for our station.

So let’s get started!
 

Logos & Colours

Let’s start by adding some logos to the website. These logos will be used on the website, the web player, the mobile apps and anywhere else where branding is displayed.

Go to Settings > Station and set the Logo Image & App Icons.

 

 

Click on the Set Logo / App buttons and select the image from the media library. If you have not already uploaded the image, click on the Click or Drop Here button and browse for the image to upload.

Select the image file and click on Open.

The Logo Image will update accordingly.

Repeat for the App Icon.

 

Fill in the other details for your Station.

 

If you are have purchased the full Broadcast Radio Website add-on, you can ignore the colours section on this page (see below). If you are using a 3^rd party platform for your website, use this setting to set the default colours for the landing page and web player.

When you are happy, click Save.
 

If you have purchased the Broadcast Radio Website add-on, you can set overall colours for your site by following these steps:
 

 

1. Click on the Edit Colour Scheme button.
   
   
    
2. Use the options to set colours that match your branding. In this example we will pick some festive colours.
   
   
   
   
    
3. You can also change the logos and images on the main menu sections and the homepage.
   
   
    
4. If you scroll down the Advanced Settings section, you can change the background image on the landing page.
   
   
   
   
    
5. Upload a suitable image to replace the default background.
   
   
    
6. Play around with the other options until you have a look you are happy with.
   
   
    
7. When you are happy, click on Save.
   
   
   
    

The website will immediately update to reflect your colour and logo changes.

 

 

Contacts & Social Media

To connect your social media accounts and email address to your website, follow these steps:
 

1. Click on the Settings tab and select Social.
   
    
   
    
2. Fill on your social media and contact details and click on Save.

 

Replacing Template Content with Your Own

We can now start to replace the content on the template website with real content for the station.
 

In this example, we will only change the content on the Homepage, but the same process applies to all of the pages in the template site.

 We will start by looking at the Homepage template.

 

This is what it looks like to visitors of the site. The edit page follows a similar layout with each highlighted section have a matching Element with the text, images and other details needed to create the end webpage.

To access the homepage for editing click on Web Content > Pages then select the Homepage from the list.

This will open the Homepage for editing.

 

 

• Introduction Text Element – A simple text element that you can type or paste text into.
• On-Air Show Element – Special element that shows the currently on-air show based on the schedule.
• News Headline Element – Shows the latest news items added to your website.
• Presenter Element – Shows a set number of present profiles.
• Hero Element – Mixed graphic and text element designed to break up a webpage.
• More Text Elements – Add more text to complete the webpage.

Please note that the Header and Footer Elements are configured in the Settings > Website section.

As this is webpage only needs some basic information, we will remove the News and Presenter elements and update the other elements with suitable information.

To edit text elements, click on the element and type or paste in text. You can also use the options to format font, size and other common text related options.

 

 

The updated element looks like this:

And the resulting updated webpage looks like this:

 

 

We will leave the On Air element as it is so it will display the details for the current show.

It looks a little empty, so lets add an image underneath the introduction text.

Underneath the final text section, click on the Add Block button and select the Image Element.

Click on the Upload option and upload a suitable image.

 

The image will be displayed below the text.
 

 

 

To remove the News & Presenter element, select them and click on the Options button  and select Remove Block. Repeat for all elements you want to remove.

 

Next, let’s update the Hero Image element to have a more festive picture and text. Select the element and click on Replace.

 

 

You can select something from your Media Library or upload a new image.

 

To change the text, select it and type in your new text.

Our finished homepage looks like this in the edit window. Click on Publish to publish the changes.

  

And the finished webpage looks like this:

We have only touched the surface of is possible with the Broadcast Radio Website CMS, for full details please visit - https://help.broadcastradio.com/support/solutions/articles/101000535093-setup-check-list-for-broadcast-radio
 

Adding Some Shows to Your Schedule

You can add radio shows to your Broadcast.Radio platform which are used to display the schedule on the following services:

• Web Player (on the Schedule tab).
• Websites (on Schedule page and on Play / On Air elements).
• Mobile Apps (on the schedule tab).

To add a show to you published schedule, follow these steps:

1. Click on Web Content > Assignments and then drop down the option list on the Default Assignment and select Edit.
   
    
   
    
2. There will be some default shows listed in the assignment grid.
   
   
    
3. Select a Show and then click on Remove From Schedule, click Yes when asked to confirm. Repeat for all the default shows to give you a blank assignment grid.
   
   
    
4. To add your first Show, drag over the hours you want to add your Show to, in the example, we have selected 7am to 11am on Monday.
   
   
    
5. The Show options will open on the right hand side.
   
   
   1. Time – Set the start and end time for the show.
   2. Repeat – Choose which day to repeat. In this example we have selected all 7 days of the week so the show will be on the schedule from 7am to 11am every day.
   3. You can select an existing show or Add a new show. We will choose this option.
      
       
6. Select the Add New Show option and fill in the details for the show. Click on Publish when you have added the details.
   
   
   
    
7. The Show will be added to the week as specified, click on Save to save the Show to the selected hours of the week.
   
   
    
8. Repeat for all the other hours of the week.
   
   
   
    
9. If you want to edit a show or add an image, click on Web Content > Shows
   
    
   
    
10. To view your Schedule, return to your website and then click on the Schedule option on the main menu. The shows will be listed automatically on the website.
    
    
    
    You can also see the schedule in your Web Player.
    
    
     

Customising Your Web Player

All Myriad Cloud packages include the customisable Web Player which can be accessed via your Broadcast Radio website or embedded on 3^rd party websites.

As we have already set the colours, logos and the Schedule, the Web Player will be mostly configured but there are a few more options that are worth considering.

Customise Options

To customise your Web Player, follow these steps:

 

1. Login to your Broadcast.Radio portal, click on Settings > Station Settings > Player.
   
    
   
    
2. The right hand side shows a preview of your Web Player with the current settings.
   
   
    
3. There are a range of options to allow you to configure your Web Player.
   
   We recommend testing these settings and refereeing to the preview Web Player on the right, to see how the settings effect the player design. No changes will be uploaded until you click on the Save button.
   
   
    
   1. Set an alternative logo for the top of the Web Player.
   2. Set an alternative background colour.
   3. Choose a layout (Tabbed, Full Page, Player Only or Expanding)
   4. Set the colours for the Web player. You can set Text, Background and Highlight colours for the Player and Menu.
   5. Show the album art on the player.
   6. Show the volume controls (and set the size).
   7. Show the Title and Artist of the current Song, or Show Title if song is not playing. You can click on the  button to set default text. You can also change the colour options for the Now Playing text.
   8. Shows optional SongFacts™ if available.
   9. Set the number of song titles to display in the Recently Played tab.
   10. Allow users to vote (thumb up / down) for the current song.
   11. Enable a button on the player which sends a message to your email address.
   12. Enable the Catchup tab using your Mixcloud account (you must of entered your account details in the Social section).
   13. Set the format for the Schedule tab on the player (Now / Next, 1 x Day or 7 x Day)
   14. Enables autoplay (blocked by most browsers).
   15. Select the shape option - portrait, large square, fluid (stretches to fit) and mini (player only). Click on the code box to copy the embed code.
   16. Generate a link that can be used to launch the Web player from 3^rd party sites or applications.
       
        
4. Click on he Save button to save your Web Player. This will update the Web Player design on across your platform.
   
    
5. There is also a Customisable Broadcast Radio Player section which allows you to create a web player with the settings included in the embed code. This allows you to launch different Web player designs for different situations.
   
   

Embedding Your Web Player on 3^rd Party Websites

Once you are happy with your design, scroll down to the Embed section, select the Widget Size you want and then click into the code box to copy the embed code.

  

You can now paste this code into an HTML widget on your 3^rd party website.

If you would prefer to launch the Web Player from a ‘Play Button’ or an HTML hyperlink, can get the code from the Link section.

The options are:

• Pop-up – The player will open in a separate pop-up window (recommended).
• New Tab – Player will open in a new tab.
• Get Link – Generates a unique HTML Link which will launch the player when triggered (allowing you to attach it to images etc).

 

As before, click in the code box to copy the code.

In the next episode, we will setup the optional Mobile apps and Alexa Skill for Santa Baby Radio.