Google Sheets ➔ Carrd table

A FREE Carrd plugin template to update your Carrd table remotely via a Google Sheets spreadsheet.

Any update on your Google Sheet will automagically be reflected in the Carrd table, saving you time having to update in 2 different places. This is great if you prefer to manage your data only on Google Sheets, but want the style customizability of a Carrd table. The Carrd table is populated by placeholder text like {title} and {cell}, which the plugin will convert into your Google Sheet data. See public Google Sheet here. Tutorial here.

• See more plugins

• Download template now

Made by @jasonleowsg.

TUTORIAL

How to set up this Carrd plugin template and Google Sheets spreadsheet

1. Start creating your spreadsheet in Google Sheets and your Carrd table.
- You might already have a Google Sheet with data filled in. If not, you can refer to the example Sheet here that I used for the demo.
- + Add a Table element to your Carrd site. Replicate the same Headers in the Table element as you have in your Google Sheet.
- Add Rows in the Table element. It needs to have the same number of Rows as data rows (exclude the header row) you have in your Sheet. For example, for the Table element in my demo, here's my settings for the Table:Headers: - 1 heading per line
📕 {title}
✍️ {title}
📅 {title}Rows: - 1 cell per line. Skip a line to start a new row. I got 4 rows, 3 columns:
{cell}
{cell}
{cell}{cell}
{cell}
{cell}{cell}
{cell}
{cell}{cell}
{cell}
{cell}🚨NOTE: The number of Headers and Rows in the Table element must match exactly as it looks in your Google Sheet.


2. Set up the Google Sheet for publishing:
- Make sure the Google Sheet is set to "Anyone with the link can view" for public access.
- Note down the name of the sheet where your data is. Usually on a new Google Sheet, it's "Sheet1".
- Note down the document ID from the URL of the Google Sheet. For example, if the URL looks like this:https://docs.google.com/spreadsheets/d/1gMxvkdd9lxAKBy1ruu5-yB-Ld4KdrMoqIZhWDu9-Y5o/edit?gid=0#gid=0Then the document ID is 1gMxvkdd9lxAKBy1ruu5-yB-Ld4KdrMoqIZhWDu9-Y5o- When in the Google Sheet page, go to the menu, click on Extensions → Apps Script. This will open a new window in Google Apps Script, for step #3...


3. Create a Google Apps Script:
- Go to script.google.com and create a new project.
- Use the following code, paste it into the code field in the project.


4. Deploy the script as a web app:
- In Google Apps Script, click on "Deploy" > "New deployment"
- Choose "Web app" as the type
- Set "Execute as" to your account
- Set "Who has access" to "Anyone"
- Click "Deploy" and copy the provided URL for web app
- NOTE: Google Apps Script has quota limits.


5. Set up your Embed element in your Carrd site:
- Click on the Embed element sheet2table plugin in the Sheet2table plugin Carrd template. Select all and copy all the code.
- Paste the code in the Embed element in your Carrd site. Name the Embed "sheet2table plugin"
- In the code, look for GOOGLE_APPS_SCRIPT_URL and change the URL for the Google Apps Script.
- Likewise for GOOGLE_SHEET_ID - change it to the ID of your Google Sheet (see step #2)
- Likewise for SHEET_NAME - change it to the Name of your Google Sheet (see step #2)
- Likewise for TABLE_ID - change it to the element ID (under Settings tab) of the Table element. In Carrd, it's usually "table01".
- Don't forget to uncheck the "Defer script tags" option setting below!
- Publish site, and Google Sheet to Carrd table integration is live!


6. Style your table in Carrd
- Click on the Table element.
- Style it using the native Carrd editor settings! That's the beauty of this plugin. Data from Google Sheets, but style it on Carrd.
 

Made by @jasonleowsg.