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
- Element settings
- Embed PDF
How to use the Embed element
Drag the embed element into a column on the page. A pop-up will open automatically in which the URL can be pasted. When the URL is correct (contains https://) the PREVIEW button will be shown and be clickable. This will show a part of the embedded content so you can check if it works.
If it works and is shown correctly, click SAVE to add the embed to the page. The content will be visible immediately. The size of the embed itself 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 build 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 the format they will be in:
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.
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 in the embed element to embed the post in your publication.
Another way to embed the URL is to add /embed to the URL of the Instagram post.
So if the URL of the post is: https://www.instagram.com/p/BxhHHReD4EO just add /embed to the URL so it looks like this: https://www.instagram.com/p/BxhHHReD4EO/embed/.
Twitter Embed Link
To embed a Twitter ‘Tweet’, go to the Tweet on Twitter and click on the down arrow and choose ‘embed tweet’.
Copy the embed code from Twitter and find the source (src) URL. Paste this code into an embed element in your publication to embed the Tweet.
Facebook Embed Link
To embed a Facebook post, open the post in Facebook. Click on the three dots under the post:
Then you can choose ‘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.
Note: we don't advice to embed PDF documents (or any other static documents with text on it) because this can compromise the responsiveness of the publication.
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 Gettings 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.