⛏️

Embedding Content

This article covers how to embed content from other websites like Youtube videos, music and maps onto your site using embeddable code.
  1. Click on Add New Section in the editor and select the content category. You should see blocks for embedding content.
    1. notion image
  1. 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.
    1. notion image
      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>
  1. Publish and view your site
    1. notion image
 

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.
 

Need to insert a script?

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.
notion image
Example of embedding a tweet from Twitter
  1. Add this script into custom code
<script async src="<https://platform.twitter.com/widgets.js>" charset="utf-8"></script>
  1. Paste the following code into the content block
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">It&#39;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&amp;ref_src=twsrc%5Etfw>">#buildinpublic</a> <a href="<https://twitter.com/hashtag/nocode?src=hash&amp;ref_src=twsrc%5Etfw>">#nocode</a> <a href="<https://twitter.com/hashtag/hustle?src=hash&amp;ref_src=twsrc%5Etfw>">#hustle</a> <a href="<https://t.co/FL3dLkLz7g>">pic.twitter.com/FL3dLkLz7g</a></p>&mdash; Sam 🦄 (@derp_unicorns) <a href="<https://twitter.com/derp_unicorns/status/1381837463774109703?ref_src=twsrc%5Etfw>">April 13, 2021</a></blockquote>