Documentation

What is Sheet2Site?

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

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

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

How is it working?

Getting Started

Basics Concepts

Each Sheet2Site website consist of Google Sheet with all content and settings and the website that is updating automaticaly if any change were made in the sheet

All content is managed from one Google Sheet that consists of the following tabs:

• Content - items data base
• Settings - settings of the website
• Filters - filters settings
• Text section - extra text area in the bottom of the page
• Navbar - settings of the navigation bar that allows you to connect multiple subpages
• Design - styling and design settings
• Sponsored - area after header that allows you to create one big iamge with header and description for your premium user who needs to be highlighted in the top
• Map - You can create an embedded map and add items on it with cordinates (lat and long)
• Updates - News what's new in Sheet2Site

Content

This is the data base of your items (cards) it consists of the following columns:

• Title - header text of the card. Can be empty
• Description - detailed info about card. Text or number.
• Link - User will go here if click on card. Can be empty
• Image - link to the image of the card. If you find some images in the Google click copy image address or you can use free hosting services to upload your images. Can be empty
• Small text-1 - extra text. Can be empty
• Small text-2 - more extra text. Can be empty
• Filtering by this - used for filters. See filters section for more detailed info
• Button name. It's using the link to click from C colunm

Settings

Settings tab is the place with the main settings for your website. You customize and edit following things:

• Title - header's title. Big text in the top of your page
• Description - sub title. Smaller text in the top of your page
• Background image - Link to the header image. Resolution should be high like 1024 x 960
• Image sharing - Link to the image that show up when you sharing in facebook and twitter
• Logo Link - Resolution 136x19. better to use SVG forrmat + home page url
• Card-width (px).
• Card-height (px).
• Overlay-color
• Overlay-opacity
• Made by link
• Made by name (company name)
• Small circle - image in the right buttom corner. Like chat
• Link for small circle chat image. - sser will go here after click
• Call to action button Text - if emty no buttom displayed
• Call to action button Link
• Google Analytics ID
• Crisp Chat ID
• Favicon link - In png or ico format
• Background image height - Should be 33 - 100
• New Design - switched between new and old designs

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?

Yes. You can switch between templates in the Design tab. Just change Header Template and Card Template and you will have a different template style. All templates are supporting switch between each other, so you don't need to start from scratch each time.

Images

To be able to add images to your website you need to host them somewhere

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

Unsplash

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.

unDraw

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

Google Drive

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

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

ImgBB

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

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

Colors

You can customize the color of:

• Header's background color - settings tab - Background color overlay
• Header's button background color - design tab
• Header's button text color - design tab
• Card's button background color - design tab
• Card's button text color - design tab

To define a color in you should use codes (hex) of colors like #d600ff (pink)

You can find a lot of cool colors here. Click on the color palette you like and copy a specific hex color.

Text Formatting with HTML Syntax

To makes 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. Here are some examples:

• Header: <h2>This is big header</h2>.
• Paragraph of text: <p>This a paragraph of text. Add more.</p>.
• Line break <br> you can add extra space between texts or images.
• Lists:
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
• Image: <img class="w-80" src="https://www.incimages.com/uploaded_files/image/970x450/siliconvalley_55230.jpg"></img>
• Links: <a href="https://instagram.com/andreyazimov">Instagram</a>

Demo:

• About page with text and image
• Sheet

Filters

There are two types of filters: single and multi

Single filters

Users can filter your items (cards) based on a single condition. Let's say you have a list of cities for travel and you want filter cities that have people or cars.

Demo

To better understand how to work with single filters. Please take a look on this sheet (content and filter tabs)

1. Open filter tabs and change status to ON
2. Add filter button names only unique.
3. Open content tab
4. In the 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 items (cards) based on a multiple conditions. Let's say you have a list of caffes and you want filter all cafes that have an AC and Sockets and 10 MB Wi-Fi

Demo

To better understand how to work with single filters. Please take a look on this sheet (content and filter tabs)

How to add multi filters:

1. Open filter tabs and change status to ON2
2. Add filter button names only unique.
3. Open content tab
4. In the filtering by this column add filters with the same names like you named filters buttons in the previous steps, but comma separated like AC, Sockets, 10 MB Wi-Fi for each item. You can try to use spaces in filter names but better not use it.

Call to action

You can add call to action buttons in the header. It could be a button or Mailchimp email sign up form. See how to integrate Mailchimp bellow

In the settings tab Call to action button text and Call to action button Link you can add your call to action button. It looks like this:

Second all to action

You can add more links/a call-to-action button in the navigation bar in the top. You need to specify whether it is a link or button.

If you want to add the link to external website, for example PayPal or any other that is not Sheet2Site please insert "-" (a dash symbol) in Subpage Sheet2Site website URL and do NOT leave it empty.

Demo:

• Website
• Sheet

How it looks like in navbar tab:

How it looks like on the page:

Also you can specify color of navbar from design tab. It can be dark or light

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.

Subpages

One you connect your custom domain or subdomain you can add more subpages like example.com/about, example.com/jobs that are all linked in the navbar that allows users to navigate through all of them. There is a maximum of 10 subpages allowed per website.

To add a subpage to your website you need to create another sheet2site website from the template and connect it all togather in the navbar tab in the Google Sheet of your home page with following format:

• Subpage name: About
• Subpage link: ./about
• Subpage Sheet2Site website URL: https://www.sheet2site.com/api/v2/?key=1PZz5ISSPVqh1-4I1qE4AHykr2Ee335SFWE0vwuLliUc
• Type. Example: link. You can choose: link, button, detailed.
  • link - Will be shown in the navbar. Use it for subpages (Sheet2Site URLs) and external URLS
  • button - Will be shown in the navbar. Works same as a link but in button style. You can read more about second call to action
  • detailed - Will NOT be shown in the navbar. You can read more about detailed pages

What it looks like in navbar tab:

Demo:

• Home page
• About page
• Google Sheet

Detailed 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: example.com/sennheiser-25, example.com/react-developer-in-google.

These detailed pages are not shown in the navbar and you can have unlimited ammount of such pages.

To add a detailed page to your website you need to create another sheet2site website from the template and connect it all togather in the navbar tab in the home page Google Sheet with following format:

• Subpage name: -. Just a dash symbol. Don't leave it empty.
• Subpage link: ./sennheiser-hd-25
• Subpage Sheet2Site website URL: https://www.sheet2site.com/api/v2/?key=1Cx0itLfuk70WZDlE5rhp1T6pIGzJNYonMiSnnWBC69w
• Type: detailed. Will NOT be shown in the navbar.

How it looks like in navbar tab:

Demo:

• Detailed page
• Google Sheet

Mailchimp

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

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


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

Google Forms

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.

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

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

1. Create a new form forms.new or open an existing one
2. Click 3 dots in the top right corner
3. Get pre-filled link
4. Select field in your form that you want to pre-fill
5. Press Get link
6. 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.

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

Chat Integration

1. Register in Crisp Chat
2. Create a website
3. Open settings page
4. Choose your website
5. Setup instruction
6. Copy Website ID
7. Open your Google Sheet. Main-tab page.
8. Paste to Crisp Chat ID

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

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

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).

Go to:

1. Behavior
2. Events
3. Pages
4. Pages
5. Select home page / in the table
6. Outgoing Link
7. Change the date that incuded today in the date picker (top right corner) to make sure that data is included

Data should updated in 30 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

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


6. 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.

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.

What is custom domain?

Custom domains are addresses (links) like example.com of your website that allows people to find and remember your website in the internet.

By default all website that are created has links like this: https://www.sheet2site.com/api/v2/index.php?key=1MG-aOEsc5wQoXVTnG9iilV6VRzgqMzmWpKYtTOKy1la which doesn't looks not really good.

Basic and Premium plans allows you to use Sheet2Site websites on your own custom domains without Sheet2Site branding.

How do I connect my custom domain?

After purchasing Pro or Premium plan please change Name Servers (NS1 and NS2) in DNS setting of your domain provider to these:

• NS1: ns63.hostia.name
• NS2: ns64.hostia.name

Here are some instructions: Namecheep, GoDaddy

Please send me a screenshot once you are finished.

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.

Subdomain

Add A NAME record with following parametrs:

• Host: 88.99.210.154
• Value: jobs

or any other name that you would like to have jobs.example.com

You don't need to add NS records if you want to have subdomain

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.example.com and you can still keep your current home page example.com that will work independently.

Trobleshooting

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…