Made with Supademo
How to Add an iFrame to the Website Builder
Get Started
Create step-by-step product demos and tutorials for your company for free. No credit card required.
Embedding with iFrame: A Complete Guide
Absinthe Team
Updated: May 14, 2025
Description
Learn how to embed a wide range of content, from YouTube videos to Spotify playlists, Google Maps to Figma files — using the iFrame element in the Absinthe Website Builder. This guide includes step-by-step instructions and categorized chapters to help you get the most out of iFrames.
Steps
1
How to Add an iFrame to the Website Builder
2
Add an iFrame
Click “Add Element,” go to Content Elements, then choose iFrame to embed content like YouTube, Spotify, SoundCloud, social posts, and more.
3
Select an iFrame
Pick an iFrame element to embed external content like videos, calendars, maps, or social posts directly into your site.
4
Video step
5
How to Embed a YouTube Video
6
Choose a YouTube Video
Go to YouTube and select the video you want to embed on your page.
7
Get the Embed Code
Click Share under the YouTube video, then choose Embed to copy the embed code.
8
Access the Embed Code
Click Embed in the Share menu to view and copy the embed code for the video.
9
Copy the Embed Code
Select the entire embed code and copy it. You can paste it into any text editor to extract just the embed link.
10
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
11
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
12
Insert the Embed Link
Go back to the Absinthe Website Builder, select the iFrame element you added, and you’ll see a link input field on the right-hand side. Paste your embed link there.
13
Paste the iFrame URL
Paste the embed link into the URL field on the right-hand side to display your content within the iFrame.
14
Video step
15
Adjust and Finish
Drag, drop, and resize the iFrame as needed, and you’re all set! ✅
16
How to Embed Spotify Tracks, Playlists, or Albums
17
Find Content on Spotify
Go to Spotify and search for the artist, track, playlist, or album you’d like to embed.
18
Get the Embed Option
Click the three dots next to the artist, song, playlist, or album. From the menu, choose Share, then select Embed to access the embed code.
19
Copy the Embed Code
In the pop-up window, click Copy to grab the embed code for your selected Spotify content.
20
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
21
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
22
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
23
Paste the URL
Paste the Spotify embed link you copied into the URL field on the right-hand side.
24
You’re Done!
That’s it, your Spotify embed is live! You can use this method to add artists, songs, playlists, albums, or even podcasts to your page.
25
How to Embed SoundCloud Tracks or Playlists
26
Get the Embed Code
Go to the SoundCloud page for the song or playlist you want to embed, then click the Share icon to access the embed options.
27
Access the Embed Code
In the pop-up, click the Embed tab to view the embed code for the selected SoundCloud track or playlist.
28
Copy the Embed Code
After adjusting any settings like autoplay, comments, or layout, copy the iFrame embed code provided in the embed tab.
29
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
30
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
31
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
32
Paste the URL
Paste the embed link you copied into the URL field on the right-hand side.
33
All Set!
Your SoundCloud embed is now ready. You can use this method to add tracks, playlists directly to your page. 🎶
34
How to Embed Vimeo Videos
35
Open the Vimeo Video
Go to the Vimeo video you want to embed, make sure it’s publicly accessible and shareable.
36
Click the Share Icon
Just below the video, click the Share icon to open the embed options.
37
Open the Embed Tab
In the pop-up, click the Embed tab to view and customize the embed code.
38
Copy the Embed Code
Once you’re in the Embed tab, copy the full embed code provided. You’ll use this in the iFrame element.
39
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
40
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
41
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
42
Paste the URL
Paste the embed link you copied into the URL field on the right-hand side.
43
You’re Done!
Your Vimeo video is now ready to go, simply paste the embed link into the iFrame and it’ll appear right on your page. 🎥
44
How to Embed Google Maps
45
Choose a Location
Search for the place you want to embed on Google Maps, or drop a pin manually to mark a specific location.
46
Click the Share Icon
Click the Share icon in the left panel to open sharing options for the selected location.
47
Select “Embed a Map”
In the pop-up window, click on the “Embed a map” tab to access the embed code.
48
Copy the Embed Code
Click Copy HTML to copy the full embed code for your selected map.
49
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
50
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
51
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
52
Paste the URL
Paste the embed link you copied into the URL field on the right-hand side.
53
You’re Done!
Paste the embed code into your iFrame, and your Google Map will be live on the page 🗺️✅
54
How to Embed Typeform Surveys or Forms
55
Copy the Typeform Link
Go to your Typeform dashboard, open the form you want to embed, and simply copy its shareable link, no need to dig for embed code.
56
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
57
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
58
You’re Done!
Drag, drop, and resize it as needed.
Note: The form will be fully interactive in Preview mode, but not directly inside the Website Builder. ✅
59
How to Embed Calendly
60
Copy the Calendly Link
Simply grab the shareable link of the Calendly event you want to embed, no need for embed code.
61
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
62
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
63
You’re Done!
Paste the Calendly link into the iFrame, then drag, drop, and resize it to fit your page.
It’ll work interactively in Preview mode, just not inside the Website Builder. 📅✅
64
You’re Done!
Paste the Calendly link into the iFrame, then drag, drop, and resize it to fit your page.
It’ll work interactively in Preview mode, just not inside the Website Builder. 📅✅
65
How to Embed Google Calendar
66
Access Calendar Settings
Click the gear icon at the top right of Google Calendar, then choose “Settings” from the dropdown.
67
Access Calendar Settings
Click the gear icon at the top right of Google Calendar, then choose “Settings” from the dropdown.
68
Select Your Calendar
On the left sidebar, choose the calendar you want to embed from the list under “Settings for my calendars.”
69
Copy the Embed Code
Scroll to the “Integrate calendar” section to find the embed code. You can customize its size, color, and view before copying it.
70
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
71
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
72
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
73
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
74
You’re Done!
Then drag, drop, and resize it as needed. Your calendar will appear live on your site, interactive in Preview mode! 🗓️✅
75
How to Embed Twitter (X) Posts or Timelines
76
Get the Tweet Link
Go to the tweet you want to embed, click the Share icon, and select Copy link to Tweet from the menu.
77
Generate the Embed Code
Go to [https://embedcodesgenerator.com](https://embedcodesgenerator.com), paste the tweet link, and it will generate the embed code for you automatically.
78
Copy the Embed Code
Once the embed code is generated, click to copy the full code,
79
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
80
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
81
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
82
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
83
You’re Done!
Then drag, drop, and resize as needed. Your tweet or timeline will appear live, interactive in Preview mode! 🐦✅
84
How to Embed Instagram Posts
85
Generate the Embed Code
Head to [https://embedcodesgenerator.com](https://embedcodesgenerator.com), paste the Instagram post link, and it will generate the embed code for you.
86
Copy the Embed Code
Once the embed code is generated, click to copy the full code,
87
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
88
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
89
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
90
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
91
You’re Done!
Then drag, drop, and resize it as needed. Your Instagram post will appear live, interactive in Preview mode! 📸✅
92
How to Embed LinkedIn Posts
93
Get the Embed Option
Go to the LinkedIn post you want to embed, click the three dots on the top right of the post, and select “Embed this post” from the dropdown menu.
94
Copy the Embed Code
In the pop-up window, click Copy Code to grab the full embed snippet for the LinkedIn post.
95
Paste and Extract the Link
Go to Notion or any text editor and paste the full embed code. Notion makes it easy to spot and copy the actual link, but any editor works fine.
96
Copy the Embed Link
In Notion, you can either select the link manually or hover over it and click the copy icon that appears as a tooltip.
97
Select the iFrame
Click the iFrame you added to the Website Builder, the link input will appear on the right-hand side panel.
98
Paste the URL
Paste the link you copied into the URL field on the right-hand side.
99
You’re Done!
Then drag, drop, and resize as needed. Your post will be interactive in Preview mode, perfect for adding a professional touch! 💼✅