Embedding Tables and Charts

Learn how to embed your spreadsheet Tables and Charts anywhere on the web.

Intro

Use embed to showcase your Rows Tables and Charts on a website, wiki or other internal tools with ease. You can embed any element from a spreadsheet - a Table, Chart, or Form - into any website that supports HTML or tools that accept iframes.

The perfect way to add a pricing calculator to your website, showcase charts in a Notion or Confluence doc, or share live data in a blogpost in Ghost.

Embeding data from a spreadsheet

To embed any element from your spreadsheet, follow these steps:

  1. Click Share at the top right-hand corner of the editor. Alternatively, click “Embed” in settings menu in the right-hand corner of a table/chart
  2. Click Embed.
  3. Select the element that you want to embed.

ℹ️ Your spreadsheet needs to be shared with the link or published to the world before you can embed it. To do that, go to Share and enable Share with anymore or Publish it in the Publish to the Community tab.

  1. Click <> Copy code You can use Copy link to paste directly into tools automatically embed via the link - e.g. Notion.
  2. Paste the embed code on your website, wiki, or destination tool.

embed gif update

You can adjust the height and width of the embed by changing its parameters in the embed code snippet.

embed-example

Embeds of spreadsheets that are Published to the world will have an Open full version option that allows viewers to use and duplicate the spreadsheet to their Rows accounts.

If you want to stop the embed, remove the embed code from the website (or other tools where it was added) or remove the sharing permissions of the spreadsheet.

Adjust it to your style

Calculator embed code

After adding the embed to your website, you can customize it to blend into your website experience perfectly. These are the most common adjustments:

Border: Add a border around your calculator by turning the border element to 1px. To customize the color of the border, replace the default hex code of the border (#EAEAEA) with your own color.

Width: By default the width of your embed will adapt to the width of the screen. To set a maximum width, simply replace width = 100% with the pixel length of want -  width = 820

Height: Same goes for adjusting the height. The standard height is 450px.

Responsiveness: Most website publishers - like Ghost or Wordpress - will make your embed mobile responsive by design. But if you’re doing your own implementation of the page or use a service that is not responsive, use the viewport property to make your content adjustable to the width of the screen.

Embeds in Notion and Confluence

💡 See our in-depth articles on embedding Rows Tables and Charts in Notion and Confluence.

Embeds on mobile devices

The majority of website publishers like Wordpress, Squarespace or Ghost already makes embed scale up on mobile devices. This called being "responsive" and it's on by default on those platforms

But if you are publishing Embeds on your on webpage on your server, or on a super-custom service, the webpage may not display for mobile devices by default.

📱 To make make it work, in addition to the embed snippet, add the following tag to your HTML file: <meta name="viewport" content="width=device-width, initial-scale=1.0">. You should add it at the top.

Advanced: Embeds and performance

💻 If you have multiple embeds and want to optimise the performance of your webpage, here’s a guide on iframe lazy loading.