Embedding third party widgets

Roam allows you to embed third-party widgets from other websites - such as a weather widget or social media feed - using the content block Code Snippet. Code Snippet is available to use on any page or article on your Roam website.

Note: not all websites offer their functionality as embeddable so you might have to do a bit of research when embedding a widget.

Pro tip: If you know which functionality you’d like on your website (live weather reports, for example), but aren’t sure which widget to choose… head to Google! Key in “best weather feed embeds” and read through customer reviews to help you make your decision. Keep an eye out for when the widget was last updated; the older the widget, the more likely you are to deal with bugs and glitches.  

How to embed:

1. Add the code snippet content block to a page

Select the page you wish to add your widget or create a new page. Click on code snippet from the page builder content blocks list.

2. Copy embed code

Next head over to the website you wish to copy the embed code from in a new tab or browser. In the gif below, we're grabbing an embed code from the social feed website Curator.io.

All websites will have their own style of where and how to find an embed code. However, the end result should always be a small block of code in a text format that you can copy the exact same way you would any text document.

Copy the code block and head back to your Roam platform browser.

3. Paste embed code

Now that you've copied your code, go back to the code snippet content block you've added to your Roam page. Paste your embed code into the code snippet content block and save.

Pro tip: steer clear of old embed widgets that look like they haven't been updated in the past few years - it's likely they're buggy and will provide a sub-optimal user experience on modern devices.

Quick note: sometimes third parties have rules in their code that override the size set in Roam. This can usually be adjusted with a little code know-how, so if you aren't getting the size you want, we recommend reaching out to a strategic digital partner to help you with the adjustment.