How to Embed a Loom Video Into Your SaaS Product
Where can you embed a Loom video?
Most websites and platforms allow you to embed your Loom video, but in rare circumstances, this may not be possible.
When embedding a video is not an option, we recommend using a GIF thumbnail, as it’s accepted by most platforms.
What are the main ways to embed a Loom video?
A number of different methods are available for automatically embedding Loom videos on your website, depending on the platform:
- Direct integrations with Embedly, iFramely and Userpilot – There are common 3rd party services that Loom integrates with directly.
- Loom Chrome extension – If you have the Loom Chrome Extension installed, you have the ability to convert your Loom link into embedded video players for select applications such as Github, Gmail, Jira, Salesforce, and more.
- Loom embed SDK – Developers can use this tool to automatically convert Loom links into embedded video players.
- Embed manually– Copy the code and paste it into your website or product to embed your loom video. This is applicable only if your site supports IFrame embed.
How to embed your Loom video on any webpage
Once you create the Loom recording you want to use, you’ll need to click “Share” at the top right-hand corner of the screen.
Select the “ Embed” section from the available options, then choose either Responsive size or Fixed Size HTML code and click on the “Copy Embed Code” button.
Paste the code into your website text editor’s HTML block.
Once this is done, the Loom recording will be embedded into your webpage.
However, the downside is that you may need a developer’s help when embedding a video with this option.
How to embed a Loom video in your product experience without a developer
Embedding a video with the help of a developer can be costly and time-consuming.
The good news is that there are several product growth tools on the market that can help you integrate your microvideos into different UI elements in less than a minute.
As mentioned earlier in the article, there are various use cases for in-app videos. Here are the most common two options:
Embed a Loom video inside a modal
You can embed your Loom videos on a pop-up modal triggered for specific events.
Have a look at Story Chief’s frictional welcome screen. The welcome page is built on a modal with a Loom onboarding video embedded into it.
Embed a Loom video inside your resource center
Enriching your resource center with video tutorials is always a great idea. Once integrated and clicked, the video will be played directly in the app.
Userpilot has an always-on resource center where users can easily browse through knowledge base articles and video tutorials. Product videos are embedded in relevant sections and are played in-app to provide a seamless experience.
Here’s an example of how it works.
Embed a Loom video using Userpilot – Step by step guide
Any video can be embedded in your product within minutes, thanks to Userpilot.
There are 2 ways to embed a video using Userpilot: embed code and direct integration between Userpilot and Loom.
Option1: Embed your Loom using code
Step 1 – Select a video
Go to the video page you want to embed, click on the Share button and then click “Copy Embed Code”.
Step 2 – Create a UI pattern
Use the Chrome extension and select the type of UI pattern you would like your Loom video to be embedded in. You can embed Loom videos in your modals, slide-outs, and tooltips.
Step 3 – Embed the code
Hover the mouse pointer over the section you want to add your video and click on the ‘+’ button. Then select the “Video” option from the panel.
Paste the embed code in the box that just popped up.
You’ll be able to see the video now in the UI element added.
Embed your Loom video directly using predefined integrations
You can directly add a video by using Userpilot’s native integration with Loom.
Step 1 – Add a new block
Once you select the UI pattern (this can be a modal for example), add a new block and select “Embeds”.
Step 2 – Select the integration
Select Loom from the list of integrations. Once this is set up, the video will be displayed directly in the app.
Conclusion
Creating and sharing Loom recordings is now easy!
With multiple options available, you can embed videos in the best way possible and allow customers to watch videos directly in your apps, without interrupting what they are doing and being redirected to another page.
Tools like Userpilot make it easy to embed videos in one click, without input from a developer.
Book a Userpilot demo and learn more about how you can enhance your product experience by adding video tutorials in your UI patterns and educational resources.
