The HTML iFrame widget is one of the most versatile Boxmode features. It allows you to use third-party code inside your Boxmode project to add additional functionality to your site. This feature is available for users with the Growth plan. Learn more about using widgets in Boxmode in our Help Center.

To use the HTML iFrame, find it under Basic elements on the Left Panel. Then drag and drop it onto the canvas to add it to the page. Once you do, a pop-up with a text field will appear. That’s where you add the custom code.

This article will help you find tools and solutions to fit a variety of needs.

Media and audio

YouTube Player

YouTube videos are easily embedded and are perhaps one of the most popular embeds on the internet. You have the option to either embed a single video or an entire playlist of YouTube videos.

To get the embed code, go to the page of the video or playlist you’d like to embed, click on Share, then select Embed from the list of options shown.

To learn more about embedding from YouTube, visit YouTube’s help center.

SoundCloud

SoundCloud is the world’s largest platform for user-generated music and audio content. Their player, instantly recognized by its design, has an embed feature that lets you add audio to your webpage. 

Go to a track’s page, click Share, and then click Embed to get the embed code. You can customize the player with different colors, change its size, and adjust additional settings from the window that appears.

Caution!

Not all music on SoundCloud can be embedded in this way since privacy settings by certain users will prevent it.

Learn more about this feature on SoundCloud’s site.

Spotify

Spotify is a giant in the audio streaming industry and by far the most popular choice among consumers. You can embed a song, podcast, album, or playlist to your site, as well as a Follow Button for an artist.

To embed a song, podcast, or playlist, choose the title you want to use, click Share, and then select Copy Spotify URI. Afterward, navigate to Spotify for Developers to get the player code with the title you wish to embed on your site. 

To embed an artist Follow Button, go to an artist’s page, click on Share, and then navigate to Spotify for Developers to generate an embed code. With both embeds, users can adjust the size and layout of the widget.

Learn more about Spotify widgets on Spotify’s developer portal.

Google Podcasts

Podcasts are a form of audio entertainment that has skyrocketed in popularity in recent years, and Google Podcasts are one of the more popular choices for browsing and listening to them. For podcast owners, Google has added the option to embed their podcast onto a webpage. You will need to register your podcast in Google Podcasts Manager to use this feature.

If you are already registered, go to your show’s page in Google Podcast Manager and click on Settings. From there, click on Share podcast, and choose the language used in this widget. When you’re done, click the embedded snippet button to copy the code.

For more detailed instructions on how to embed Google Podcasts, go to their Help Center.

Elfsight Player

Elfsight is a developer of widgets, apps, and embeds for website owners. Their audio player offers another way to embed audio to your site.

To use their audio widget with your music, create an account and go to the Applications tab. You will be redirected to an editor where you can customize the widget’s look and even add a download button. You can upload a music file from your computer or a cloud storage service like Google Drive or Dropbox.

Get step-by-step instructions for using the audio player feature on Elfsight’s Help Center. Visit Elfsight’s site to learn more about their audio player.

Google Drive Player

Alternatively, you can also embed an audio file using Google Drive as the repository.

To use this feature in Google Drive, upload an audio file to your Drive, then right-click, select Get link, and change the file’s permission so that it’s accessible to anyone with the link.

The URL you have will be similar to this:

https://drive.google.com/file/d/999/view?usp=sharing

In this URL, change “view?usp=sharing” to “preview.” Then, paste the link where noted in the code below:

<iframe frameborder="0" width="400" height="150" src="LINK"></iframe>

Paste this code into the HTML iFrame’s text field and save to embed the audio file.

Sound Buttons 

A service called SoundButtons will allow you to add a button to your site that will play a custom sound when pressed. 

To add any of its buttons to your site, navigate to that button’s page, and find the HTML code below the social media sharing buttons.

Explore the sounds available on SoundButtons on their categories page.

Instagram Feed

Instagram does not offer a dedicated widget for embedding a feed onto a webpage. However, Instagram does offer an API that other developers have used to create this capability in other tools, such as EmbedSocial.

To use their widget with your Instagram feed, create an EmbedSocial account, go to the dashboard, and pick Instagram as a source to connect the two accounts. Afterward, find the Instagram widget and copy its code.

Booking and calendars

YouCanBook.Me

YouCanBook.Me is a service for generating and managing bookings for individuals and teams. It natively connects to your calendar and other services through Zapier, which will allow you to automate certain processes. 

To embed a booking page with your website, register an account, go to your dashboard and create a booking page. In the editor, click Share & embed. Copy the code from the pop-up window that appears.

You can get detailed instructions on how to work with YouCanBook.Me in their help center. Learn more about the service on their site.

OpenTable

If you operate a restaurant or cafe, you’re probably already using OpenTable. The OpenTable’s widget allows restaurant owners to automate booking intake and simplify the process for customers and managers alike. 

To use it on your site, go to the OpenTable’s reservation widget page. Enter your location into the search form, add it to the widget, adjust the settings to manage its look, and copy the code.

Learn more about OpenTable on the provider’s website.

Reservio 

Reservio is an online service for creating and managing bookings of any kind. 

To use their button on your site, go to the dashboard and click Add button. Next, select one of six available button designs, edit the text on the button, and copy the code that you see as a result.

Check out the step-by-step guide on how to use a Reservio booking button. Also, learn more about Reservio if you’re interested.

Google Calendar 

Google Calendar is a web application for setting up and tracking meetings, events, and more. For website owners, the solution is a great way to add a live calendar to their sites and offer site visitors the opportunity to save events.

To embed a calendar to your site, open Google Calendar and log in to your Google account. Click on Settings, then pick the calendar you want to embed. Navigate to the Integrate calendar section, and scroll down to find the Customize button. Click on it to adjust the settings and copy the resulting code.

Time and Date

You can embed a countdown timer using a tool called Time and Date.

To embed the timer, go to Time and Date and scroll down to see a settings panel. Here, you can adjust the time and date the timer will be counting down, the design of the timer and the widget overall. Once you’re satisfied with the design, click on Show HTML for Countdown Timer and use the code that appears.

Note:

Also, you can use the inbuilt Boxmode tool – a Countdown Timer widget.

Business tools

Mailchimp

Mailchimp is one of the most popular email tools for marketers working with small and large businesses alike. Their embed form is an email collections tool. With its help, you can actively collect users’ email addresses and enter them into your email marketing funnel. 

To use Mailchimp, you will need to sign up for an account, use their Form builder to create the perfect form for your site, and change all the necessary settings. After that, copy and paste.

You can learn more about Mailchimp’s embedded forms on their site. Alternatively, you can use Boxmode’s Form widget to collect data and send it to Mailchimp.

Google My Business

Google My Business (GMB) is a very popular tool for marketing retail businesses. You can embed a listing from GMB to your site and help visitors navigate to your business. 

To use a GMB listing on your site, go to Google Maps, find your business, and click Share. In the form that appears, click on Embed a map, and click copy.

You can learn more about how Google My Business works on the vendor’s website.

Travelpayouts

Travelpayouts is an affiliate network working to market travel brands. With this service, website owners can get paid for promoting travel brands in different niches: flights, car rentals, insurance, and more. 

To use their embed code with Boxmode, use the code below:

<html> 
  <body> 
    <script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>
  </body> 
</html>

However, instead of

<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>

use the code from your account on travelpayouts.com.

You can learn more about Travelpayouts on the company’s website. Learn more about how to use the Travelpayouts Affiliate Network in their Help Center.

Chats and chatbots

Collect.chat

Collect.chat is a platform for building chatbots from templates using simple drag and drop tools, like Boxmode. Users can set up chatbots in different languages, track and record conversations, and integrate them with other marketing tools. 

To embed a Collect.chat chatbot, create an account, then build and design a chatbot that suits your purposes. Make sure you set the bot type as Embed in the settings panel. Afterward, navigate to Build, then Share from the dashboard, and copy the iFrame code. 

You can learn more about Collect.chat on their site and how to install a chatbot in the provider’s Help Center.

Covid statistics

Covid Stats Widget

If the project you’re making a website for has to do with social responsibility, the news, or anything related to the COVID-19 pandemic, consider adding a Coronavirus stats widget. 

Elfsight (mentioned above) have also created a widget that displays current COVID-19 statistics worldwide and regionally. It tracks the total number of cases, recoveries, and deaths from the virus. 

To use the widget, register an Elfsight account, go to this page to design the widget, adjust the information it features, and get the code. 

Now that you know how to use the HTML iFrame widget and what third-party services to use it with, why not try it out?

Go to Editor