Connect any website with Google Spreadsheet using just HTML?

If you want to display something from Google Sheets at your website and you don't know how to code, the easiest solution is to use our handlebars library.

In this article we're gonna use this spreadsheet: https://docs.google.com/spreadsheets/d/1mrsgBk4IAdSs8Ask5H1z3bWYDlPTKplDIU_FzyktrGk/edit

And this is url to our API: https://sheetdb.io/api/v1/58f61be4dda40

To display the content, you need to add data-sheetdb-url="URL_TO_YOUR_API" to one of your html elements like <div> or <ul>. Content from within will be rendered as many times as there are rows in the spreadsheet (excluding the first row, which are column names). Each time a new row is rendered, you can refer to any value using the braces notation: {{column_name}}. Of course you can use html to style the result.

Check out the example below:

<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Age</td>
      <td>Comment</td>
    </tr>
  </thead>
  <tbody data-sheetdb-url="https://sheetdb.io/api/v1/58f61be4dda40"
         data-sheetdb-sort-by="age"
         data-sheetdb-sort-order="desc">
    <tr>
      <td>{{id}}</td>
      <td>{{name}}</td>
      <td>{{age}}</td>
      <td>{{comment}}</td>
    </tr>
  </tbody>
</table>
<script src="https://sheetdb.io/handlebars.js"></script>

And this is unstyled result:

We used additional attributes to sort the result by age in descending order. The only required attribute is data-sheetdb-url. Here is the list of optional attributes:

• data-sheetdb-limit – The number of rows that should be returned
• data-sheetdb-offset – Row from which it should start (how many rows to skip)
• data-sheetdb-search – You can search for specific data in your sheet. If you want to use more than one condition join them using & symbol. Example: search="name=Tom&age=15"
• data-sheetdb-sheet - Specify the sheet (tab) you want to work with
• data-sheetdb-sort-by – The column you want to sort by
• data-sheetdb-sort-order – sort in asc or desc order
• lazy-loading – if you add this attribute, the api call will be executed only when the user reaches the point of the table

There are also attributes for slots and query strings. Read below to find our what they can do for you.

Query strings

Imagine you only want to display one row per one URLs. Let's use the same spreadsheet but Large tab this time. We will use url parameters to determine whitch id user wants to display. If we do not specify id, the content will not be displayed. We also want to make sure that we will display only one row so we will use limit attribute. Here is our code:

<div data-sheetdb-url="https://sheetdb.io/api/v1/58f61be4dda40"
  data-sheetdb-limit="1"
  data-sheetdb-sheet="large"
  data-sheetdb-query-string="id">
    <img src="{{img}}"><br>
    {{name}} ({{id}})<br>
    Score: {{score}}
</div>

Pay attention to the url. If there are no query attributes, script does not render any content. But when you add for example ?id=5 or ?id=29 the content will be downloaded from the API. Try to change it for this page and look what will happened after page reloads.

You can also make a simple form that will add id attribute like this:

<form>
  <label for="sheetdb-id">Enter ID:</label>
  <input for="sheetdb-id" type="text" name="id">
  <button type="submit" type="button">Submit</button>
</form>

You have to be explicit what you want to filter by using data-sheetdb-query-string="id" attribute. Without this code script will download all the content (in this example limited to one by attribute data-sheetdb-limit="1").

You can use it to display your products or other content. You can even put URL's or HTML inside spreadsheet, this is easy CMS to work with.

Slots

If you want to use content of spreadsheet in different places you can use the Slots feature. Just add data-sheetdb-save="name_of_the_slot" to save its content and in different places you can use data from that slot. Just remember to add data-sheetdb-slot="name_of_the_slot" to the parent elements. Let's try it.

<div data-sheetdb-url="https://sheetdb.io/api/v1/58f61be4dda40"
  data-sheetdb-limit="1"
  data-sheetdb-sheet="large"
  data-sheetdb-search="id=18"
  data-sheetdb-save="current_user">
    <img src="{{img}}"><br>
    {{name}} ({{id}})<br>
    Score: {{score}}
</div>

... any other code

<div data-sheetdb-slot="current_user">
    Your email address is: {{email}}
    <!-- this div knows email thanks to the slot named `current_user` -->
</div>

{{name}} ({{id}})
Score: {{score}}

... any other code

Your email address is: {{email}}

If you want to submit data to a spreadsheet check out this example: submit data to a spreadsheet with HTML form.

Have question?

If you have any questions feel free to ask us via chat or .