Skip to content

Build an FAQ with Sheetson and Bootstap 4

What are we going to build?

We will build a simple FAQ section that can be embeded in your website. The stack we use is:

  • Bootstap 4
  • jQuery
  • HandlebarsJS

Sheetson FAQ Example View demo

What do we need before we get started?

To get started, please make sure you have prepared below requirements

  • Make a copy of this Google Sheet
  • Follow our Getting Started guide to get spreadsheet ID and sheet name
  • A computer with Internet connection
  • Your favourite text editor

## Importing libraries and stylesheets Let's say we have a basic HTML structure as below:


    <div id="faq">Loading FAQs...</div>

Add below scripts/links inside <head> tag of your HTML file in order to use Bootstap 4, JQuery and HandlebarsJS.

<link rel="stylesheet" href=""/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script src="" ></script>

Defining HandleBarsJS template

Continue after adding above files, we will add below code which is still inside <head> tag.

<script id="item-template" type="text/x-handlebars-template">
        <div class="container py-3">
    <div class="row">
        <div class="col-10 mx-auto">
            <div class="accordion" id="faqExample">
              {{#each this}}
                <div class="card">
                    <div class="card-header p-2" id="heading{{rowIndex}}">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{rowIndex}}" aria-expanded="false" aria-controls="collapse{{rowIndex}}">
                              Q: {{question}}

                    <div id="collapse{{rowIndex}}" class="collapse" aria-labelledby="heading{{rowIndex}}" data-parent="#faqExample">
                        <div class="card-body">
                            <b>Answer:</b> {{answer}}

Fetching data & bind to HTML

Right before closing </head> tag, paste below code to set up JQuery to make API call and bind data to the template we defined earlier. Remember to replace YOUR_API_KEY and YOUR_SPREADSHEET_ID with real credentials acquired from earlier steps.

<script type="text/javascript">
      fetch('', {
        withCredentials: true,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY',
          'X-Sheetson-Spreadsheet-Id': 'YOUR_SPREADSHEET_ID'
      }).then(r => r.json())
      .then(data => {
        var template = Handlebars.compile($('#item-template').html())
      .catch(error => console.log(error))

Save the file and you can open it using Chrome or Firefox.