Embedding Content
This article covers how to embed content from other websites like Youtube videos, music and maps onto your site using embeddable code.
- Click on Add New Section in the editor and select the content category. You should see blocks for embedding content.
- Hover over the content block and click on Edit Section. A panel will appear on the right with options to embed an URL or iframe.
In this example, we'll embed a Linkedin post:
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6790936135448326144" height="880" width="504" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>- Publish and view your site
Responsive layouts
When using iframe's please set the width to
100% to make it responsive on all devices. It will take up 100% of its container.Custom Scripts
Some embeddable code requires you to also insert a script into your app. To do this, click on Settings (top of editor) and select Integrations from the menu.
Example of embedding a tweet from Twitter
- Add this script into custom code
<script async src="<https://platform.twitter.com/widgets.js>" charset="utf-8"></script>- Paste the following code into the content block
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It's just Luannie and myself hustling on <a href="<https://twitter.com/PoryHQ?ref_src=twsrc%5Etfw>">@PoryHQ</a> still. This year alone she has converted 70 pages worth of notes and designs into code. 👩🏻💻🍷<a href="<https://twitter.com/hashtag/buildinpublic?src=hash&ref_src=twsrc%5Etfw>">#buildinpublic</a> <a href="<https://twitter.com/hashtag/nocode?src=hash&ref_src=twsrc%5Etfw>">#nocode</a> <a href="<https://twitter.com/hashtag/hustle?src=hash&ref_src=twsrc%5Etfw>">#hustle</a> <a href="<https://t.co/FL3dLkLz7g>">pic.twitter.com/FL3dLkLz7g</a></p>— Sam 🦄 (@derp_unicorns) <a href="<https://twitter.com/derp_unicorns/status/1381837463774109703?ref_src=twsrc%5Etfw>">April 13, 2021</a></blockquote>