Loom integration
Loom records screen and camera videos and gives each one a share page and an embed code. On Framer and Webflow we paste that code into an Embed or Code Embed element, and on Astro or Next.js we show a thumbnail first and load Loom’s player on click. The same videos work for async design reviews and handoff between your team and ours.
| Complexity | Low |
|---|---|
| Method |
|
| Typical setup | 1 to 2 hours per page |
| What we do | We embed your Loom videos with a lightweight thumbnail first, check privacy settings and trim the player to fit the design. |
| Category | Design and handoff |
Setup by platform
How we set up Loom
Framer
- Embed
Framer’s Embed component takes Loom’s embed code in its HTML tab. Framer’s help says to set the video to anyone with the link and remove the style attribute from the outer div, so the player fills the component.
Framer developmentWebflow
- Embed
Webflow’s Video element doesn’t list Loom as a source, so Loom’s responsive embed code goes in a Code Embed element. URL parameters like hideEmbedTopBar=true or hide_owner=true trim the player to fit the page.
Webflow developmentAstro
- Embed
- API
An Astro component shows the video’s thumbnail and swaps in Loom’s embed iframe when the visitor presses play. The thumbnail URL and duration come from oembed() in Loom’s @loomhq/loom-embed SDK.
Astro developmentNext.js
- Embed
- API
@loomhq/loom-embed has oembed(), which returns the embed HTML, a thumbnail_url and the duration, and linkReplace(), which turns Loom links inside a selector into players. We use it in a client component behind a thumbnail.
Next.js development
Use cases
What teams use it for
Walkthroughs on landing pages
A founder or product lead explains the product in two minutes, next to the call to action instead of on a separate page.
Case studies and help pages
Short demos inside case studies, onboarding and help articles, where a recording explains a flow faster than screenshots.
Async design review and handoff
Walkthroughs of Figma files and staging links, so feedback and handoff notes don’t wait for a call.
Before you add it
What to watch out for
Performance
The player is a full iframe
Loom’s embed loads its own player as soon as the page renders, even if nobody presses play. We show a thumbnail first and load the iframe on click, so it doesn’t slow down LCP.
Consent and GDPR
A third-party embed
The player is served from loom.com, so the visitor’s browser connects to Loom, and restricted videos rely on Loom’s login cookies to play. Loading on click and naming Loom in your privacy policy keeps it in line with your consent setup.
Security
Check the video’s privacy setting
Embeds follow the video’s own setting. Public videos play for everyone; Open to workspace and Restricted videos need a Loom login. Workspace admins can also turn off public links.
FAQ
Questions about Loom
Why does the embed say it can’t be played here?
Usually the video isn’t set to Public, so the viewer needs a Loom login. Loom’s support notes that Firefox’s cookie protection can also hide that login from embeds of restricted videos.
For anything on a public page, we set the video to Public before launch.
Can we hide the Loom branding?
Partly: embed URL parameters hide the top bar, title, owner avatar and share button. Custom branding, with your logo, player colours and no “Made with Loom” pop-up, is for Business, Business + AI and Enterprise plans, and only workspace admins can set it.
Can a Loom autoplay on the page?
Loom supports autoplay=1 and muted=1 parameters, but browsers restrict autoplay, which Loom says it can’t always bypass. On landing pages we keep walkthroughs click to play, with a clear thumbnail.
Keep exploring
Other integrations
- FigmaHow Figma designs, components and variables move into a Framer, Webflow, Astro or Next.js build.
- StorybookA workshop for building, testing and documenting UI components on their own, outside the pages.
- After EffectsMotion designed in After Effects and shipped to the site as Lottie for vector animation, or as video for everything else.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call