How to Embed a Loom Video Into Your SaaS Product

This article covers different ways of doing it so you can easily pick the easiest one.

TL;DR

• Most websites and platforms allow you to embed Loom videos, although some may block the ability to insert the videos directly. If this is the case for you, you may still be able to embed GIF thumbnails.
• There are several options to embed Loom videos into your app: through the Loom Chrome extension, the Loom EmbedSDK tool for developers, 3rd party services that Loom integrates with (Userpilot included), and manually.
• You can embed Loom videos in different UI elements such as modals, tooltips, and knowledge base using Userpilot’s direct integration with Loom.
• Generally, if you want to embed a Loom video into your app, you need to ask your developer to copy the embed code and paste it into your website’s source code.
• Tools like Userpilot let you incorporate video tutorials in your onboarding flows and other product experiences without writing a single line of code.

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:

1. Direct integrations with Embedly, iFramely and Userpilot — There are common 3rd party services that Loom integrates with directly.
2. 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.
3. Loom embed SDK — Developers can use this tool to automatically convert Loom links into embedded video players.
4. 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.

Storychief’s modal shows embedded tutorials to help users get started.

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.

Play in-app video tutorials in the Userpilot Resource Center.

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.

Choose one of the UI Patterns offered by Userpilot.

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.

Paste the Embed code in the box to display the video.

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”.

Embed videos on your product modals using Userpilot.

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.

Embed Loom videos in one click thanks to Userpilot’s native integration with Loom.

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.