Fetching contributors…
Cannot retrieve contributors at this time
154 lines (129 sloc) 4.61 KB


Edit on GitHub

The snippet is our "we are here for you" for all those, who don't want to play with any programming languages or development but want to have all the Sheetsu super powers on their websites.

Snippet allows you to interact with a Google Spreadsheet from your website with just HTML.


Add below code before closing </body> tag.

<script src="//"></script>


If you are using Google Analytics, add it right after the Google Analytics script.

Read data from Spreadsheet

  This code will get 3 first rows from
  Google Spreadsheet and display them
  in a table on a website
  <tbody sheetsu="" sheetsu-limit="3">

<script src="//"></script>

Above HTML will produce this result:

  This code will get all rows from
  Google Spreadsheet where role is parent
  and display them with picture, name, email
<div sheetsu="" sheetsu-search='{"role": "parent"}'>
  <img src="{{picture_url}}">
    Name: {{name}}
    Email: {{email}}

<script src="//"></script>

Above HTML will produce this result:

Name:Peter Griffin

Name:Lois Griffin

  1. Add sheetsu="YOUR_API_URL" to the parent element.
  2. Add handlebars ( {{ and }} ) with column name to any child element, with column name.


You can use an additional sheetsu-search attribute to show only results which are matching your search criteria.

The value of the sheetsu-search attribute should be a key-value object (JSON) with column name and value you want to use for search.

Remember to use single quote ' around JSON and double quote " with JSON key, value names.

Limit & offset

Attributes you can use to manipulate results are sheetsu-limit and sheetsu-offset.

(We add a little bit of CSS styling to the results on the right)

Save data to Spreadsheet

  This code will display form, which will
  save record to the Google Spreadsheet
  (check it here: )
<form sheetsu="">
  <input type="text" name="full_name">
  <input type="text" name="email">
  <textarea name="message"></textarea>

  <input type="submit">

<script src="//"></script>

Above HTML will produce this result:

<textarea name="message" placeholder="Your message" rows="3" style="position: relative;"></textarea>
  1. Add sheetsu attribute to the <form> element.
  2. Add <input> (or <textarea>) tags, where name attribute is column name from a spreadsheet.

After submit redirection

Optionally you can add sheetsu-after-submit attribute with the URL you want to redirect your users after they submit the form. Without this attribute, they get redirected to