In this documentation, we’ll guide you through the seamless process of integrating the MP3 Audio Player Pro into various website platforms, including Squarespace, Wix, and more.
We’ll be utilizing ‘iframes’ to embed the MP3 Audio Player Pro into other platforms. An ‘iframe’, short for Inline Frame, is a powerful HTML element that allows you to embed another HTML document within a parent document. Think of it as a window on your webpage through which visitors can view and interact with content from another source, such as our audio player.
The first step is to create a blank page, with no header and no footer. You will add an MP3 Audio Player widget in it. We will then load this page into an iframe code which you will use on other platforms.
Using Elementor Page Builder #
Step 1 – Creating a New Page in WordPress:
- Access your WordPress dashboard.
- Navigate to ‘Pages’ and select ‘Add New’ to create a new page.
- Once the page is open, initiate the Elementor Page Builder by selecting ‘Edit with Elementor’.
Step 2 – Selecting the Right Template in Elementor:
- In the Elementor editor, locate and click the page settings gear icon.
- Find the ‘Template’ option in the page settings.
- Choose the ‘Elementor Canvas’ template, ideal for a clean slate as it excludes headers, footers, and other elements.
Step 3 – Add an MP3 Audio Player Widget:
- With the Elementor Canvas ready, focus on the design of your page.
- Utilize Elementor’s drag-and-drop widgets to add the MP3 Audio Player Widget.
- Customize the player widget to fit your design preferences.
- Once satisfied, publish your page to make it live.
Step 4 – Generating the iFrame Code:
Use the following template for your iFrame code:
<iframe src="https://yourdomain.com/your-player-page" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="600px" width="600px" allowfullscreen=""></iframe>- Replace https://yourdomain.com/your-player-page with the URL of the page you just created.
- Adjust the height and width in the code to match your desired embed size.
Step 5 – Implementing the iFrame on Other Platforms:
- Simply copy and paste the customized iFrame code into the desired location on any other platform.
- This will embed the MP3 Audio Player Pro onto that site, replicating the appearance and functionality from your original page.
Using Guternberg or Shortcode #
Step 1 – Creating a New Page in WordPress:
- Access your WordPress dashboard.
- Navigate to ‘Pages’ and select ‘Add New’ to create a new page.
- You’ll be automatically using the editor.
Step 2 – Set Up a Full-Width Page (if needed):
- Creating a full-width page with no header and footer varies depending on your theme. If available, select a full-width template or a blank template to remove headers and footers. This option can usually be found under ‘Page Attributes’. If your theme does not offer this option, use a third party plugin that will allow you to create a blank page template with no header and footer. We recommend this one.
Step 3 – Add an MP3 Audio Player Block:
- Click on the ‘+’ icon to add a new block.
- Search for the MP3 Audio Player block, if it’s available as a Gutenberg block. If not, you might need a shortcode block or a custom HTML block to embed your player.
- Place the MP3 Audio Player block (or paste the shortcode/HTML) to appear on the page.
- Customize your audio player within the block settings or shortcode parameters as per your requirements.
- Once you’re satisfied with how it looks, click ‘Publish’ to make your page live.
Step 4 – Generating the iFrame Code:
Use the following template for your iFrame code:
<iframe src="https://yourdomain.com/your-player-page" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="600px" width="600px" allowfullscreen=""></iframe>- Replace https://yourdomain.com/your-player-page with the URL of the page you just created.
- Adjust the height and width in the code to match your desired embed size.
Step 5 – Implementing the iFrame on Other Platforms:
- Simply copy and paste the customized iFrame code into the desired location on any other platform.
- This will embed the MP3 Audio Player Pro onto that site, replicating the appearance and functionality from your original page.
