Sheet2Site Documentations

What is Sheet2Site?

Sheet2Site is a tool that will help you create a beautiful website from Google Sheets with pictures, text, filters and links. Make a website without writing code from just one Google Sheet.

What sites you can make?

You can make grid style sites, for example a list of cities, events, tools, equipment, etc.

Difference between Free and Paid

You can start using Sheet2Site for free but your website will have icon "Made with Sheet2Site".

Should I create a new webiste or Embed to existing?

If you already have an existing website you can embed Sheet2Site page to your website with a code snippet. It will keep your logo, navigation bar footer. It will be on a separete page like: yourwebsite.com/directory
Or you can create a entire website from scratch using templates. Each site will have navigation bar, header, filters, cards and details pages.

Why should I use Sheet2Site?

Because if you have an idea and you know basics of Google Sheets you can easily and quickly create a website and make your idea live without procrastination and pain

Getting Started

1. Install Sheet2Site Google Sheet Add-on:

Install

2. Choose a template and wait until all data will be copied to your sheet:

3. Press "Update website".

You will open a link like this:
https://sheet2site.com/api/v3/?key=1beTW17FZrUiRcyF3BRpemBhXbtROOh91iDTbfWX4YGA&g=1.
It's your website. This link will not change, so you can save it to use it the future.

4. Try to change the text in a "Header" tab to understand how it works:

5. Push changes to your website from a Google Sheet press "Update Website" or open the link if you saved it previusly, wait 15 secs and reload the page again.

Connect Custom Domain

After purchasing Pro or Premium plan please add 2 records in DNS setting of your domain provider.

1) Add A Record

Type: A Record
Host: @
Value: 88.99.210.154

2) Add CNAME Record

Type: CNAME Record
Host: www
Value: yourwebsite.com

Instructions:

How long does it take?

Connecting custom domain may take up to 24h but usually faster. Please be patient. I will message you after domain will be connected.

Please send me a screenshot once you are finished.

Subdomain

If you want instead of root domain yourwebsite.com connect a sub domain like jobs.yourwebsite.com you can do it with the following steps:

You need to add only A Record record in the DNS settings of your domain provider with following parametrs:

Type: A Record
Host: jobs
Value: 88.99.210.154

Do I need to buy custom domain?

Yes, you do. You can register domains on namecheap or on anyother domain provider.

.com domains are generally cheap and cost like $11 / year.

I have already an existing website on my own domain

You can connect your subdomain like jobs.yourwebsite.com and you can still keep your current home page yourwebsite.com that will work independently.
Or you can embed sheet2site into your page using code snippet.

Embed

If you already have a website and want to embed your spreadsheet data in a visual way you can easily do it by adding a code snippet

Sheet2Site Embed support all major website builders such as Squrespace, Wix, WordPress, Weebly. It aslo support custom website build with code.

It will keep your logo, navigation bar footer. It will be on a separete page like: yourwebsite.com/directory

Quick Test

To quickly check how it will looks on your website add this code snippet to your website with a sample data. It's just an sample, so you can't edit it.

How to embed Sheet2Site to your webiste?

Here is how you can create your own embed site with your own data:

Sheet2Site Google Sheet add-on must be installed Install
Template must be created
Menu Add-ons -> Sheet2Site -> Embed in your website

Copy code snippet

Paste it into your website builder as embedded code. Let me know if you need any help.

Basics Concepts

Each Sheet2Site website consists of 1 Google Sheet. The website is updating automatically if there are any changes made in the sheet. The website is consist of parts like "Header", "Cards", "Description" and other. Each of this part is represented in a tab in the bottom of this Google Sheet. In tabs you can customize or hide some specific part of your webiste.

Tabs:

Layout - The live preview of your website where you can see how it will looks like. Here you can choose template for each of parts of your website or hide them.
Design - Colors and fonts of your website
Navbar - Navigation bar that located in the top of your website that allows you to connect multiple subpages and add the logo
Header - Header's main and secondary titles, hero image, call to actions
Filters - Filter settings for cards
Cards - The database of items of your website. It could be goods, items, job vacancies, events etc.
Extra Sections - Top and bottom extra section with text and image
Map - You can create an embedded map with locations
Footer - Footer settings of your webiste with links such as "Made by" or any other.
Settings - Here you can add integrations with Google Analitics, chat. Add SEO data, favicon icon and other.
Detaile Pages - List of detail pages of your website where you can add more infor about some specific item and it will be avalible on a link like: yourwebsite.com/detailpage
Advanced - Here you can add custom HML and Javascript for your website. For example you can add sharing buttongs.

Layout

In the Layout tab you can select a template of each parts of your website live preview of your website where you can see how it will looks like. Here you can choose template for each of parts of your website or hide them.

To open a link of your website you can click "Update Website" green button

Design

Colors and fonts of your website. To change colors of your website, just as easy to change background color in Google Sheet:

Font Style
Header's background color
Header's button color
Header's button text color
Card's button color
Card's button text color

Link name: How user will see it in the navbar
Type of link: Link or button
Link destination / Sheet2Site URL: Sheet2Site link will link to a sheet2site subpage. This will be shown as yourwebsite.com/subpage. Also works with Google Forms and Typeform. External links will take visitors to another site
Link shown in address bar when clicked: This is a preview of how your sheet2site URL will look e.g. yourwebsite.com/subpage.

Header template

To change header template please go to the Layout tab and select the header template

Header titles

Call to action

You can add call to action buttons in the header. You can add a button with:

A link to external site
Mailchimp email subscribe form
A link to a detail page
A link to Typeform pop-up
A link to Google form pafe

In the Header tab Header Button Link and Header Button Link you can add your call to action button. It looks like this:

Cards

This is a database of the items of your website. It could be goods, items, job vacancies, events etc. It consist of title, secondary title, links to external websites or detail pages, images links, tags and filters categories:

You can add extra information to your card that will will be pop-up when the user will click on the card.

It's also works in embedded websites.

Just add this text information into Cards tab->Optinal data 3.

Filters

There are two types of filters:

Single filters
Multi filters

You can switch or hide them in the Layout tab.

Single Filters

Users can filter your cards by one single creteria. For example a brand name.

How to use:

Layout tab -> Filters -> Single Filter
Filters tab -> Add filter button names only unique
Cards tab -> Filtering by this column -> Add filters with the same names as you named the filters buttons in the previus steps

Multi filters

Users can filter your cards based multiple creterias. For exampe "Brand Name" AND "Type" AND "Style" AND "Price"

How to use:

Layout tab -> Filters -> Single Filter
Filters tab -> Add unique filter button names.
Cards tab -> Filtering by this column -> Add filters names for each card (comma separeted) with the same names as you named the filters buttons in the previus steps. Exaple: Audio-Technica, Over-ear, DJ

Templates

Check all available templates

What is a template?

Think about the customization of your website as Lego blocks. You can select different headers, cards, maps, text section that can be combined with each other, rather than standalone templates that are not editible.

I have built templates from these blocks, showing what you can build with Sheet2Site like Real-Estate, Events, Jobboard, Affiliate. But please don't be limited only to these kind of websites. Feel free to create anything that you want.

Can I change a template if I already choose it and start work on my site?

Yes. You can switch between templates in Layout tab.

Images

To be able to add images to your website you need to host them somewhere. Here are some options:

Find in Google

The easiest way is just to find some images in Google Images, select image that you like make a right click and select Copy Image Address

Upload to ImgBB

ImgBB is a free hosting that you can upload your image and use on your website.

Upload the image
Emded codes: BBCode full linked
Copy the link. it should looks like this [url=https://ibb.co/N6Fb3D1][img]https://i.ibb.co/8DmtBvz/download-1.png[/img][/url]
Get only this part: https://i.ibb.co/8DmtBvz/download-1.png

Find on Unslpash

Unsplash is great website where you can find some beautiful, free images and photos that you can download and use for any project

Another cool thing that Unsplash support image editing on the fly by adding special parametrs into URL, so you don't need to use any software to edit your image.

Example: https://images.unsplash.com/photo-1525183995014-bd94c0750cd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&h=400&q=80&blur=80

&fit=crop: apply cropping to the image/
&w=750: width=750px
&h=400: heigh=400px
&q=80: quality of compression: 80%
&blur=80: apply 80% blur effect to the image.

Find on unDraw

undRaw is a open-source illustrations for every project you can imagine. You can even customize a color of your illustration.

Host on your Google Drive

It was not built to host images on the webiste, but you can still do it with with a bit of tricks:

Upload the image to Google Drive
Share
Copy the link and open it in the new window (this link will not work)
Press download
Get the link. it should looks like this https://drive.google.com/uc?authuser=0&id=16tNzEGELfXdanDyfkuuH9hsO0o0dUkSy&export=download

Mailchimp

To integrate Mailchimp to your Sheet2Site website you need to get the Mailchimp subscribe url.

Open your Mailchimp account
Lists -> Select a list (or create a new list)
Signup forms
Find copy/paste onto your site (code snippet). It should looks like this:

Find the url in form action tag
Copy the link (without quotes). Looks like this:
https://whentosurf.us15.list-manage.com/subscribe/post?u=b9909498bfcf0094d3b867d70&id=58a5b633c3`
Paste it to your Google Sheet -> settings tab -> Call to action button Link:

Typeform

You can add a embeded Typeform that will pop-up when a user will click a link or a button

To add a typeform please add a typeform link like https://andreyazimov.typeform.com/to/fM7ndm in your Google Sheet navbar tab

Demo (click post a job in the top right corner)

Import Typeform to Google Sheet

Also you can automatically import result of your Typeform to Google Sheet

Open it from your Workspace, then click on Connect. Now you can see our integrations, so click on Connect in the Send responses to Google Sheets box.

You can add embeded Google Form to your website to be able to collect data from users. For example you want to make a post a job form for your vacancy website.

This form will be in your domain subpage like example.com/post-job.

To add a Google Form to your website please add it to the navbar tab

Dynamically Pre-fill Google Forms with URL Parameters

The cool thing about Google Forms is that you can pre-fill your form with some specific value in the link. Let's say you list of items and the ordering form and when the user when click on the item he will open the form with prefilled item id

How to pre-fill Google Form link

Create a new form forms.new or open an existing one
Click 3 dots in the top right corner
Get pre-filled link
Select field in your form that you want to pre-fill
Press Get link
Press Copy link in the bottom left corner pop-up

You should get a link like this: https://docs.google.com/forms/d/e/1FAIpQLSeS97tfbZT1wrU0AM_gMBv_67_FkujKrQtSL-i5hlzwcE5X1g/viewform?usp=pp_url&entry.866939081=id-123456

where &entry.866939081= is your filed and id-123456 is a pre-filled value.

Demo

How to turn on email notifications for new responses in Google Forms

To know when some will submit the form you can active email notifications, otherwise you will need to open this form regulary to check if someone submit it or no.

How to enable Google Form email notifications if someone will submit the form

Create a new form forms.new or open an existing one
Responses
Click 3 dots
Get email notifications for new responses

Javascripts

You can add custom scripts to your website. It could be pretty useful to extend standart functionallity. For example:

Sharing buttons - to make visitors share your website in social media.
Discourse - allows users write comments on your website
Intercom - Live chat to talk to your users and send campaigns.
Facebook Pixel - snippet of JavaScript code that allows you to track visitor activity on your website. Could be usefull if you are running facebook ads.
Mailchimp pop-up window - if subscribe form in header is not enought you can add a pop-up that can be triggered when user spend on your website X seconds.
and much more...

How to add javascripts to your website

Open your Google Sheet
Advanced tab
Custom Script

Javascript example (shareing buttons):

<script async src="https://platform-api.sharethis.com/js/sharethis.js#property=5d3b5f21f7ef3b00138e888b&product=" sticky-share-buttons"></script>

You have a possibility to choose where you want to add this script:

Before head tag close
Before body tag close

CSS Style

You can add custom css style. This mean that you can customize design of the website for your own neads. Just add style tag inside that custom script cell it will work.

For example let's say that you want to have different header image on mobile (not the same as on desktop)

<style>
@media (max-width: 601px) {
  .header {
    background: url('https://i.ibb.co/mTBwY60/Artboard.png') repeat !important;
  }
}
</style>

Or another example might be that you want to have a sticky nav bar that will be attached to the top of the page while you are scrolling:

<style>
@media (min-width: 1200px) {
.navbar {
    top: 0 !important;
    box-shadow: 0px -3px 25px #CCCCCC;
    height: 65px;
    position: fixed;
    background-color: black;
}}
</style>

How to add custom CSS style to your website

Open your Google Sheet
Advanced tab
Custom Script

Text Formatting with HTML Syntax

To make your content look better, you can format it with basic HTML Syntax. You can add titles, lists, images, links and more by inserting these HTML tags in your Google Sheet, which will be displayed on your website.

For example let's say that you want to format your vacancy description:

You can add this code snippen to your decription:

<div>
    <h3>We would like to hear from you if you have...</h3>
    <ul>
        <li>A deep understanding of Agile frameworks and Lean principles, at the level of the principles and values,
            to enable appropriate application as well as innovation</li>
        <li>A strong ability to understand complex systems, relentlessly managing the technical and business risk
            landscape, anticipating and mitigating emerging issues </li>
        <li>Experience facilitating and leading continual planning processes in a complex and exciting environment
        </li>
        <li>Proven experience on achieving goals and hitting deadlines, based on company-wide objectives, regardless
            of the obstacles</li>
        <li>An ability to facilitate, catalyse and lead organisational change and transformation, drawing on change
            management, organisation culture, organisation development and systems thinking</li>
        <li>A high level of emotional intelligence, excellent communication skills, ability to listen with empathy
            and enable people to act by increasing insight</li>
        <li>You’re excited to be part of the vibrant Delivery Community at Improbable, challenging and improving
            processes to increase the effectiveness of a team or division.</li>
    </ul>
</div>

Chat Integration

Register in Crisp Chat
Create a website
Open settings page
Choose your website
Setup instruction
Copy Website ID
Open your Google Sheet. Main-tab page.
Paste to Crisp Chat ID

You can use their iOS and Android mobile apps to stay in touch with your users

Amazon Affiliate

With Sheet2Site you can build Amazon Affiliate Websites. You can read more about Amazon Affiliate Program.

You can start with Business Template, but it's up to you what template will be better for you idea.

You need to find a niche of goods that you would like to sell. Let's say you want to sell books.

Example: thebooksbywomen.com

After you added all the books to content tab including: Name, Author, Image, Genre, Link

The link of a book should have your tag like: https://www.amazon.com/Yes-Please-Amy-Poehler/dp/006226835X/?tag=kalinasapps02-20/?tag=kalinasapps02-20

And finally you need to add your Amazon Affiliate ID to the settings tab that looks like this: 3e0ebe95-36bb-4b10-9a0c-e9c442d4d19

Google Analytics

To be able to aconnect Google Analytics to your website you need to setup a property and get a Get Tracking ID. Please check official documentation.

Tracking ID should looks like this: UA-51392658-9

After you get it please open your Sheet, settings tab and paste your Tracking ID to Google Analytics ID

To check if it's working open "Realtime" -> "Overview" and visit your website. You should see at least 1 visitor:

Links tracking

Sheet2Site allows you to see the stat of most clicked links from your website via Google Analytics.

After you setup Google Analytics open your website and click on some of your links (maybe 10-20).

How to check outgoing links:

Behavior
Events
Pages
Change the date that incuded today in the date picker (top right corner) to make sure that data is included:

Select home page / in the table
Outgoing Link:

You should see all links that users clicked:

Data should updated in a couple of mins or less. You should see in your GA dashboard of links where clicks were performed.

Maps

You can add an embedded map to the bottom of you page with all the items

To add a map please go to the map tab in your Google Sheet and switch state to ON.

Maps settings:

Zoom Level - how close you want to show your map from 1 to 15, where 15 is the maximum zoom
Map center Long - your maps longitude cordinates
Map center Lat - your maps lattiture cordinates

Import JSON data into Google Sheet

A lot of good structured data is available through APIs like weather, ratings, currency rates and many more. APIs give you this data in JSON format and now it's possible to import JSON data directly into Google Sheet.

To be able to do it you need a custom function that called ImportJSON

Open your Google Sheet -> Tools -> Script Editor
Rename it to ImportJson.gs
Delete the placeholder content
Copy this script
Paste to your script and save it (click save icon)

Go back to your sheet and try to call the function from your cell:
=ImportJSON("http://date.jsontest.com", "/date", "noInherit, noTruncate")

You should see something like this:

More information how to use it here. Thanks to @bradjasper who created it.

Detail pages

For SEO is important to not just have a one page website. Google likes websites with more pages and good content. To be able to do it, you can create more pages which will show detailed information about an item (goods, vacancy, event, etc).

Examples:
shop.com/rolex-oyster
joboard.com/front-end-engineer-in-amazon

You can create as much detailed pages as you want from 1 sheet. Just add titles, descriptions, links, images and buttos.

Detail Page Google Sheet

About page

You can add about page to your website to tell visiters more information about you and your website.

All your style, navbar links, footer will be populated from the Home page, so you don't need to copy paste it each time. Just change it in the home sheet.

How to create About page:

Copy About page template
File -> Publish -> Publish to the web
Go to "Advanced tab"
Add the link of your Home Google Sheet to Home sheet link (only for About page)

Go to your home Google Sheet to Navbar tab and add sheet2site link.

Payments

The best way to know if people like your product is they're actually pay for it. Here are some ways how you can charge your clinets. You can add them as call to action button link.

PayPal

PayPal button is probably the easiest way to get money. You can create a simple link with your name and the amount of money. Example: https://www.paypal.me/andreyazimovpay/9.99usd.

To create such a link open PayPal.me and follow the instructions

Gumroad

Gumroad is great payment systems for creators. You can charge your clients for single time payment products or with reccurent payments. Each product will have a special like like https://gumroad.com/l/awesomejobboard

With Gumroad you can withdraw money to PayPal.

To start using Gumroad please register there and add a product and a price.

Please read their official documentation about getting paid and other details.

Basic / Premium Plans

What is Basic / Premium?

Basic / Premium is a paid plan of Sheet2Site that allows you to build more custom websites connected to your domain without Sheet2Site branding. These plans have following features:

Brand new template design - customized specifically for your business like affiliate, job board, real estate, cafes, events, etc.
Search - by titles and description of the items (cards)
Navbar with subpages
Custom domain
10 Subpages inside domain
Unlimited items per page
Removed "Made with Sheet2Site"
2x faster page loading
SSL (HTTPS)
Google Analytics
Chat to talk with your users
Custom scripts

Difference between Basic and Premium

The only difference is that Premium account allows to create 3 sites connected to 3 custom domains, while Pro only 1 website connected to 1 custom domain.

Troubleshooting

If your website worked before but now you see that some part of the webiste is missing like header or you see something like this:

This means that you changed the order of tabs in the Google Sheet. Please make sure that your all tabs of your Google Sheet are organized in the following order:

Content - Setting - Filters - Text section - Navbar - Design - Sponsored - Map - Updates

Can't find information / confused?

In case there is something missing in this doc or if some of the instructions are confusing please contact me through the chat in the bottom corner…