Embedding Tables and Charts in Softr
Learn how to embed your spreadsheet Tables and Charts in Softr.
Use embed to add your Rows table, charts, forms and calculators inside Softr. You can embed any element from a spreadsheet - a Table, Chart, or Form - and have a live connection between your Softr.io application and Rows spreadsheet.
To embed any element from your spreadsheet, follow these steps:
- Inside the spreadsheet 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
- Click Embed.
- Select the element that you want to embed.
⚠️ Your spreadsheet needs to be shared privately with the link or published to the world before you can embed it. To do that, go to Share and enable Share privately with the link or Publish it in the Publish to the Community tab.
- Click Copy code
- In Softr, add a Custom code Block to your app.
- Replace the html code "Embed your custom code here" with the embed url copied from Rows
- That's it. Use the Preview option to see the embed before Publishing the app
After adding the embed to your Softr application, 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.
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 simply remove the Block from the Softr doc or remove the sharing permissions of the spreadsheet.