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 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 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.
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 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.
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 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.
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:
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.
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 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 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.
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 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.
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.
Also, you can use the inbuilt Boxmode tool – a Countdown Timer widget.
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.
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 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.
Chats and chatbots
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.
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