The embed element can be used to insert an entire or part of an external page onto the page in the editor. The embed element is an iframe, which means that only the URL of the page you want to display has to be inserted.
In this article
- How to use the Embed element
- What can be embedded
- Settings of the source page
- Dynamic height
- Element settings
- Embed PDF
- Examples from popular websites
How to use the Embed element
Drag the embed element into a column on the page. A pop-up will open automatically. Paste the URL and if it’s correct (contains https://) a clickable PREVIEW button will appear with a part of the embedded content so you can check if it works.
If it works, click SAVE to add the embed element to the page. The content will be visible immediately. The size can be adjusted by dragging the white square on the right bottom corner of the element. The size also depends on the settings of the block, column, and the margins/paddings.
What can be embedded
Almost every URL can be embedded depending on the settings of the source page (see explanation below). It is possible to embed videos from platforms other than YouTube or Vimeo, but the iframe of the embed is not built specifically for video which means it can behave differently from the video element.
There are also many popular websites that provide their own embedded links. Here is an example of what the format would look like:
Since this code can’t be added in the embed element, you will have to extract the source (src) url from this code. In the example above the src is: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.7649010212067!2d-73.9551796848607!3d40.72319167933064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25944850a0d67%3A0xfce4100aedba9622!2sFoleon!5e0!3m2!1sen!2sus!4v1557259598865!5m2!1sen!2sus.
You can add this source in the URL field and click on preview.
Google Maps Embed Link:
To embed a Google maps, you can find the place you want to share on Google Maps and find the embed code following these steps:
- Click on menu in Google Maps.
2. Click on ‘Share or embed map’.
3. Select the tab ‘Embed a map’ and copy the HTML code.
You can paste the HTML code and extract the source (src) URL from there. This URL can be added to the field in the embed element.
With dynamic height, you can make your iframes responsive. Dynamic height will enable the embedded content to grow or minimize information when a resize message is triggered.
If using self-hosted content, you will need to adjust the code for the embed. If you are using another platform, like Infogram, it should already be coded correctly.
Soundcloud Embed Link:
To embed Soundcloud, find the right audiofile in Soundcloud and click on ‘Share’.
Then click on the tab ‘Embed’ and copy the Code. From this code you can extract the source (src) URL. Paste that source into the embed element in the editor.
Instagram Embed Link
To embed a post on Instagram, you open the particular post and click on the three dots below:
Click on ‘Embed’ to get the embed code of the Instagram post.
Copy the embed code and find the source (src) URL. Copy the source and paste it in your embed element and add '/embed' behind the source URL to embed the Instagram post in your publication.
Twitter Embed Link
To embed a Twitter post, open Twitter en find the post you want to embed. Click on the share icon below the post (next to the 'like' icon):
Then choose 'Copy link to Tweet' from the pop-up:
This will give you an URL similar to: 'https://twitter.com/GetFoleon/status/1217772160254644225?s=2' but with the details of the post you want to embed.
Now add the following part in front of the URL you just copied: 'https://twitframe.com/show?url='. This is what the end result of your URL will look like:
Now you can use this full URL you created in an embed element, to embed the Twitter post in your publication.
At the moment you can only embed Twitter posts, it is not possible to embed a Twitter 'Timeline'.
Facebook Embed Link
To embed a Facebook post, open the post in Facebook. Click on the three dots under the post:
Then you can click ‘Embed’.
Copy the embed code from Facebook and find the source (src) URL. Paste the source code into the embed element in your publication.
Link and Embed a PDF Document
To link to or embed a PDF file, it has to be available in the media library. This way the publication knows where to find the PDF. Drop in an Image element to open the media library and upload your PDF document.
Once uploaded, select All Media on the left and click on your document. Next click the direct link icon in the bottom right hand corner of your screen.
This will bring you to another tab in your browser with the PDF opened and there you will find the CDN link in the URL bar. Copy the URL.
Drop in a Button element in your publication, link it to the CDN URL.
To embed this PDF directly into your publication you can drag and drop an embed element into your page.
Select preview and if satisfied click save.
Settings of the source page
Not all websites can be embedded, this depends on the settings of the source website. For example: the source page can be set to x-frame-options: SAMEORIGIN. This means that the website can only be displayed on a domain that is the same or contains part of the source page.
By clicking on the cartwheel icon the General Settings of the embed element open. At the general settings the URL can be adjusted by clicking on EDIT URL. The options Scrolling means that you can choose to enable or disable scrolling within the iframe. Under Size the size of the iframe container can be entered and adjusted by amount of pixels.
The Alignment determines whether the iframe is aligned on the left, middle or right of the element.
By clicking on Border you can add a border to all sides of the iframe or choose to add it to certain sides only. The border color and thickness can also be adjusted here.
With the option Spacing it is possible to add up to 50px to the bottom of the element to separate the element form the actual iframe.