Embedding is the process of adding the Live365 Player Widget or the Last Played Widget to your website using your own hosting platform and tools, making it readily available to your website visitors. For many website-building platforms, it is as simple as copying and pasting the codes that we provide.
The iframe embed code is the most universally compatible embed code that can be used on any kind of web-page or web-application that supports HTML. Live365 makes these iframe embedded codes readily available for your station within the Live365 Dashboard under the "Listen" tab.
In this tutorial, we will cover:
Embedding the Live365 Player to your website
The following steps will guide you through the process of embedding your Live365 widgets into a WordPress website. We picked WordPress for the tutorial as it is currently one of the most utilized CMS (Content Management System). If you are using a different website-builder or you are directly editing your website's code, the process will be similar.
- Navigate to the Listen tab from your Dashboard:
- Configure the widget to your preferences. You may select a different Mode (color) and Size. The widget will automatically update and provide you a preview of how it will look on your web-page.
- After configuring the widget preferences Copy the generated code by pressing the Copy button right next to the snippet.
- At this time, we need to switch over to the WordPress website. Access your page and log in to the Administrator control panel. This can be usually be done by adding /wp-admin at the end of your website URL.
- Navigate to Pages then click on the page you wish to add the widget to. It can be your FrontPage, or you can create a separate page on your website.
- The WordPress page editor will open up. Click the "+" button from the top left corner in order to add a new block, then select Custom HTML as a block type.
- Paste (CTRL+V or right click then "Paste") the code you've copied on Step 3 inside the freshly created Custom HTML block. Therefore, you may choose to Preview the result or directly publish the page from the top right corner of the editor.
Your Live365 Embeddable widget should now display on your website in the same format and configuration as you selected in Step 3.
The exact same process can be applied for embedding the Last Played Widget on your WordPress website.
Linking the Live365 Player to an image or button
If you would prefer not to have the player directly available on the Home or Listen page of your website, you can also choose to link the player to an image/button of your choice.
The steps below will walk you through the process of linking your Live365 player to a Listen Now button:
- Navigate to the Listen tab of your Dashboard then click on the Pop-Out button from the top right corner of the Embeddable Player.
- Copy the URL of the page that pops up.
- Switch over to your WordPress page editor and now, instead of a Custom HTML block, we are going to add an Image Block. You can use any image of your choice. For demonstration purpose we are going to use the following Listen Now button:
- Click on the freshly created Image Block, select the URL linking option, and Paste (CTRL+V or right click then "Paste") the URL that you copied on Step 2.
- Enable the Open in a new tab option.
- Publish your changes by clicking the Update button in the top right corner of the WordPress editor.
- Check out the results on your web-page. When clicking the image, the Live365 player should open up in a new tab.
If you have any questions about the processes presented in this help article, please send them our way here.