Webinar listing using a Google Sheet

settings 1. Initial Setup

In this tutorial, we'll create a dynamic webinars listing page using Google Sheet spreadsheet as a CMS. When we add a new item to the spreadsheet, it will automatically appear on the webinars listing page.

We'll start with Bootstrap's "Album" template and modify it for our webinars listing.

Here's our modified version of that template: View on GitHub

table_chart 2. Spreadsheet Setup

Here's our Google Sheet spreadsheet we'll use to populate the webpage: https://docs.google.com/spreadsheets/d/1rtazbhcYh9PBFFnMGoIl-TJ2zuFZJ_tu5_niAuG8kBQ/edit#gid=0

code 3. Implementation

Copy your Spreadsheet API URL (it should look something like https://sheet2api.com/v1/FgI6zV8qT121/use-case-webinars).

Here's the template code we'll modify to make our page dynamic:

<div class="row">
    <div class="col-md-4">
        <!-- webinar item start -->
        <div class="card mb-4 box-shadow">
            <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%223...">
            <div class="card-body">
                <p class="card-text">WEBINAR TITLE</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group mr-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Register</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                    </div>
                    <small class="text-muted">DATE, TIME</small>
                </div>
            </div>
        </div>
        <!-- webinar item end -->
    </div>
</div>

Here's the dynamic version that loops through our spreadsheet data:

<div class="row" data-spreadsheet-api="https://sheet2api.com/v1/FgI6zV8qT121/use-case-webinars">
    <div class="col-md-4">
        <!-- webinar item start -->
        <div class="card mb-4 box-shadow">
            <img class="card-img-top" src="{{image}}">
            <div class="card-body">
                <p class="card-text">{{title}}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group mr-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Register</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                    </div>
                    <small class="text-muted">{{date}}, {{time}}</small>
                </div>
            </div>
        </div>
        <!-- webinar item end -->
    </div>
</div>

<script src="https://sheet2api.com/v1/template.js"></script>
</body>

Here's how your dynamic page should look:

security 4. Security Setup

Let's secure our API by configuring the proper permissions:

1. Go to your account page and find your Spreadsheet API
2. Click "Configure API"
3. Under "API Permissions", enable only "Read" access
4. Click "Save" to apply the changes