IFRAMELY

Generate iframely embeds from URLs!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

var existing = document.getElementById("roamjs-iframely");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/iframely.js";
  extension.id = "roamjs-iframely";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Usage

This extension integrates with iframely, a uniform back-end and front-end service for all your app's rich media and URL data. You could generate embed friendly cards here.

To use this extension, type {{iframely:[url]}} into a block. Replace [url] with the actual url that you are looking to embed into Roam. The iframely extension will generate the embed friendly card and place within Roam!

There are multiple different view types for iframely embeds. You could configure a default one for all the ones in your graph through the roam/js/iframely page. You could configure individual ones by creating a child block of the iframele block that says view with the value as a child of that block. The valid values include:

  • summary - Wraps rich media into a compact summary layout.
  • card - Wraps rich media into a summary card. Works for players, images and some apps.
  • iframe - Explicitly activates Iframely's async iFrames. Embed will be wrapped into Iframely iFrame and include required display helper.
  • off - Disables any required or configured Iframely HTML helpers powered by Iframely's iFrames.

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right. If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

ROAMJS DIGEST

Add your email below to stay up to date on all RoamJS features, fixes, and news!

Other Extensions