Create a directory website using AI tools from Google Sheets with Softr – it's easy and free! 💯

This article will teach you how to create a simple and practical AI tool directory website using Softr, a no-code web building platform. It's ideal for beginners who want to create a website to categorize and search for AI tools, and get started for free in a short time.
Directory Softr
list of contents show

Creating a website directory to collect and categorize various tools, including AI tools, using the Softr platform, a no-code system that allows users to easily build websites with drag-and-drop functionality without writing any code. It's ideal for beginners who want to create a website to display a list of tools in a directory format, facilitating the search, comparison, and selection of AI tools. Furthermore, it allows for revenue generation through affiliate programs, advertising, or featured listings on the website. Softr also connects to various databases such as Google Spreadsheets, Airtable, and SQL to efficiently display data on the web.

What is a directory, an AI tool? ❓
A central directory (or catalog) of tools and websites that utilize artificial intelligence (AI), acting like a "directory/database" to make it easier for users to search, compare, and select AI tools.

benefit

It is a repository of AI tools that are easily accessible to users.
Continuously increase the number of website visitors and traffic.
Build credibility and an image as an AI expert.
It can be further developed into a community or specialized platform.

Generating income

Affiliate revenue is generated when users sign up or purchase through a link.
Selling advertising space or banners on a website.
Receive promotional fees or Featured Listing from AI tool owners.
Place advertisements on websites to generate income, such as AdSense.

Softr or softr.io What is it?

Softr (or softr.io) is A platform for building websites and web applications. no-code That helps you create websites, portals, membership systems, directories, or business apps. Without writing any code. Use the drag-and-drop system and connect to databases such as Airtable, SQL, Hubspot, Google Sheets, Supabase, BigQuery, and others to easily display the data you need on the web.

Logo container

Price comparison of Softr plans.

24 12 2025 13 46 07 painty screenshot
6864e900cd7036a463c36c74 343b37c1fef200e723f67b448e13d427 Portal

Create a portal and working tools.

Softr allows users to create custom customer portals without writing any code, collecting and managing customer data in real-time by connecting to various data sources with a user-friendly interface.

Create beautiful business applications.

Off-the-shelf software such as customer portals, internal tools, and dashboards, using existing data, allow for easy customization of layout, user views, and logic via drag-and-drop.

Student Portal
684faf5b92aee99a5eab0fae CompanyIntranetDatabaseThumbnail

Self-contained database

Manage your business data in an easy-to-use relational database, ready to power your applications and workflows. Import spreadsheets or data from other tools instantly, without complex setup.

Automated workflows

Automate everything from simple tasks to multi-stage workflows. Use visualization tools with triggers, actions, and logic to automate your business processes.

68f29e93f2e92bdcbf3acb4a 3cd7d0d8ab9d847881196644ca193fa7 BenefitsWebhook p 800
6882474b4864601d98fb5d21 Benefits3 p 1080

Built-in AI system

Use AI to query application information in real-time. Use AI Agents to add value to data and automate workflows. And use AI Co-builder to help you build faster.

Templates (Pre-made templates)

There are many business app templates to choose from for cloning—fully customizable and easy-to-use templates—or you can create your own using user-friendly puzzle pieces suitable for beginners.

24 12 2025 1 46 10 painty screenshot

Create a free directory website step-by-step 💯

1

How to sign up softr.io

Go to the website. softr.io

softr.io
page 1
page 3
page 4
page 5
page 6
page 7
page 1
page 3
page 4
page 5
page 6
page 7
2

Prepare the database using Google Sheets.

Softr can use the following databases:

External databases/data sources — Data can be retrieved from other sources such as Airtable, Google Sheets, Notion, Coda, monday.com, HubSpot, ClickUp, Supabase, SQL databases (PostgreSQL/MySQL/SQL Server/MariaDB), BigQuery, and others via direct connection or API.

Why do we use Google Sheets?

Using Google Sheets as a database with Softr has the advantage of being simple and instantly accessible. Because Google Sheets is cloud-based, you can view and edit it from anywhere with an internet connection, and the data updates in real-time when you edit the sheet. This eliminates the need for heavy database setups or your own servers. It also facilitates team collaboration and allows for easy sharing of view/edit permissions using your existing Google account. When connecting with Softr, you can immediately display the actual data on your website or app without extensive coding.

3

Go to gumroad to download a free CSV file.

Download data for free. (By entering "Name a fair price: 0")
Go to (Follow these steps) File/Import file/Upload
Upload the file you received from Gumroad.
Name your spreadsheets.
Download free CSV datasets. page 7 1
Enter email address page 6 1
Click the download button. page 8
Go to the File menu, then select Import. page 10
Go to Upload / Browse. page 11
Select data / Import data page 12
Enter the name "spreadsheets". page 13
page 7 1
page 6 1
page 8
page 10
page 11
page 12
page 13

Important steps in setting up Google Sheets.

annotated image 2

important **Go to File / Share / Publish to web.

Set to comma-separated values (csv)

You can change it to your AFF link in the forum URL.

You can change the tool description in the Text thread.

4

Let's create your first app.

Go to Apps / Click the Create new app button. annotated image
Connect your Google Sheets / Click the "Add new file" button. annotated image 4
Choose your data table. annotated image 3
Connect by clicking Continue. annotated image 6
Click the trash can button to delete (or create a new one). annotated image 7
annotated image
annotated image 4
annotated image 3
annotated image 6
annotated image 7
5

Create a basic soft directory.

Steps for entering basic information (understanding)

Remove all blocks. Click the trash can icon. annotated image 7
Click to create a new block / Select a list. page 4
Connect data from Google Sheets. page 5
Scroll down to the bottom; you can select the number of rows or cards. page 7
Enter your name and description. page 9
annotated image 7
page 4
page 5
page 7
page 9

Simple way to extract data from a sheet.

Retrieve images from the LogoUrl table. annotated image 10
Extract the website/tool/column title from Google Sheets. annotated image 11
Pull categories from the Category column / Adjust colors. annotated image 12
Pull the tool description from the Text thread. annotated image 13
Pull scores from the Rank column. annotated image 14
annotated image 10
annotated image 11
annotated image 12
annotated image 13
annotated image 14

You can adjust the layout to your liking by dragging it up and down.

Settings for search, filtering, and click cards.

Scroll to FILTERS/Name it or leave it blank/and select Category. annotated image 15
Scroll down to Options / Remove all tags. annotated image 16
Add any new tags you want (one tag at a time, or multiple tags separated by semicolons). annotated image 17
You can remove the button (we don't use it). annotated image 18
Go to ACTIONS/ ITEM ON CLICK / Select Open URL / Open in / New Tab. annotated image 20
annotated image 15
annotated image 16
annotated image 17
annotated image 18
annotated image 20

Insert multiple tags. (Insert multiple tags separated by semicolons)

Make sure our card table is clickable to a tool URL.

*** Go to the menu ACTIONS / ITEM ON CLICK / Select Open URL / Open in / New Tab

Changing the style, format, text, and colors.

For title and description, go to STYLES / Title and subtitle. annotated image 21
Search and Tag annotated image 22
Change score color / CONTENT / Rank / paintbrush icon annotated image 23
Change the text. annotated image 24
For the name and description on the card, go to STYLES / Item fields / Heading and Text. annotated image 25
Change the border color of the card – STYLES / General / Card annotated image 26
Change the style of the card (heading, description, background color) by going to Theme. annotated image 27
annotated image 21
annotated image 22
annotated image 23
annotated image 24
annotated image 25
annotated image 26
annotated image 27

To change the style, width, background color, and font of the card, and the entire background, go to Theme on the left.

Adding a header menu and sidebar.

You can add menus in 3 ways – click the block box on the left – select Layout on the right. annotated image 28
Layout / Top & Side annotated image 29
Add a menu item. Click the Add button. annotated image 30
For aesthetic purposes, we can add icons to the various menu items. annotated image 31
Customize the size, color, and menu options by going to STYLES (for colors, go to Theme on the left). annotated image 32
annotated image 28
annotated image 29
annotated image 30
annotated image 31
annotated image 32

You can choose from 3 menu options.

Top - Top menu
Side – Side Menu
Top & Side – Menu (Top and Side Dishes)

Menu types

Page – Menu for existing pages.
Category – Category Menu (Add other sub-menus)
External URL – A menu for entering URLs for various links.

Add a softr footer.

Add a footer menu to the Pages/Settings icon of the page. annotated image 33
Click Footer / Create new footer annotated image 34
Click on the Footer box / Select the footer style on the right (there are 2 styles). annotated image 35
Customize URLs and social media sliders to the bottom - resize to STYLES. annotated image 36
annotated image 33
annotated image 34
annotated image 35
annotated image 36

Optimize SEO for Favicoin: Name and Description

Go to the Settings menu (left) / General. annotated image 37
1. Name 2. Change domain 3. Upload favicoin 4. Upload website icon or logo and change name. annotated image 38
You can add a custom domain at Custom domain. annotated image 39
It can connect to the Google Search Console. annotated image 40
Set the SEO name and description for each page: Pages / Settings (gear icon) / SEO / Title / Description annotated image 41
Set it up so everyone can view it without logging in. annotated image 43
annotated image 37
annotated image 38
annotated image 39
annotated image 40
annotated image 41
annotated image 43

Importantly, you should allow all users to visit our website without logging in by going to – Pages of each page / Settings (gear icon) / Visibility / set to Visitors.

6

Publish your first website.

annotated image 42
Click the Preview button to see a preview of the website.
Click the Publish button to prepare for publication.
You can change the subdomain.
I've checked the information. Click the button.

Visit the webpage created by softr.

Example colors and fonts.
screencapture siamdirectorytools softr app 2026 01 05 15 46 26

Visit the webpage created by softr.

Example colors and fonts.
screencapture tool softr app 2026 01 05 16 24 13

How to create a directory using method 2, with screenshots of the tool.

Things you need beforehand.

You will need hosting to host your images or the URLs of the tool's screenshots.
Set up the CSV file to include a thread with screenshots of the tool (the thread will use the URLs of the tool screenshots).
1

What additional functions does the Type 2 directory offer?

  • Screenshot of the tool's website.
  • The tool's specific details page is good for SEO.
  • Similar tools by category
  • Create multiple languages.
  • Tool Submission Page
2

Creating a Google Sheet for a Directory (Method 2)

Name the sheet and column. annotated image 44
Example of data entry. annotated image 45
annotated image 44
annotated image 45
Name the sheet / Create columns named title – Rank – URL – Category – LogoUrl – Text – Webscreen
Manual data entry – Title – Rank – URL (tool URL) – Category – LogoUrl (tool icon address) – Text (tool description) – Webscreen (tool screenshot address)
You can add threads for other languages ​​as well.

There's a faster way; you can purchase a CSV data table without having to manually enter the data.

🌐 Website name: Over 1300 tools.
📝 Tool description in 16 languages.
🏷️ Tools Category
🧩 Website icon/Favicoin
🖼️ Set of website screenshots
😎 Simply add your affiliate URL and wait to receive payment.
1

Create a new Google spreadsheet.

Title – Rank – URL (Tool URL) – Category – LogoUrl (Tool Icon Address) – Text (Tool Description) – Webscreen (Tool Screenshot Address)
Create a new spreadsheet. annotated image 46
Go to File / Import. annotated image 47
Import CSV data. annotated image 48
Select Replace spreadsheet / Click Import data. annotated image 49
annotated image 50
annotated image 46
annotated image 47
annotated image 48
annotated image 49
annotated image 50
2

How to use website screenshot sets.

(You will need hosting for images, a CDN, or cloud storage.)

Example of how to upload images to hosting. hostinger.com

annotated image 51
Click the Upload button. annotated image 53
annotated image 54
To extract the Zip file, right-click and select /Extract. annotated image 55
Go to the folder, drag and drop, and name it Webscreen-web. annotated image 58
annotated image 51
annotated image 53
annotated image 54
annotated image 55
annotated image 58
3

A simple way to edit an image URL.

(Replace with your own domain. Test the image URLs.)
Click on the Webscreen column. annotated image 59
Click on Edit / Find and replace. annotated image 60
Replace the domain https://siammakemoney.com/ Enter your own domain Click Replace all annotated image 62
annotated image 59
annotated image 60
annotated image 62

Test the image URL, for example: https://siammakemoney.com/Webscreen-web/affiliatebooster.webp

Replace https://siammakemoney.com/ with your own domain using the Find and Replace tool in Google Sheets.

How to connect Google Sheets to Studio

1

Set up CSV on Google Sheets.

Rename your spreadsheets to make them easier to use. annotated image 63
Set up a shareable sheet: /File / Share / Publish to web annotated image 64
Set to Comma-separated values ​​(CSV). annotated image 65
annotated image 66
annotated image 63
annotated image 64
annotated image 65
annotated image 66
2

Configure the software to connect to Google Sheets.

annotated image 67
annotated image 68
annotated image 69
annotated image 70
annotated image 71
annotated image 67
annotated image 68
annotated image 69
annotated image 70
annotated image 71
3

Decorate, configure, and connect the software correctly.

(Delete the data from the boxes on the software and recreate them.) For other usage instructions, please refer to the basic software creation section above.
Select a grid layout. annotated image 72
Connect Google Sheets annotated image 73
annotated image 74
Configure the website screenshots to be displayed in a card. annotated image 75
How to set categories to match Google Sheets. annotated image 77
Configure tool description retrieval. annotated image 78
Create a dedicated page for the tool. annotated image 79
To make the card clickable, go to our URL. annotated image 80
annotated image 72
annotated image 73
annotated image 74
annotated image 75
annotated image 77
annotated image 78
annotated image 79
annotated image 80

In which forum can I post the AFF URL?

You can enter the URL in the column of the sheet named URL.

Is the software free?

SoftR offers a free starter package including a custom domain, 1 published app, 5,000 databases, and 500 workflow actions.

Softr (paid version)

The Softr database contains 50,000 entries, 1,000 AI credits, custom code, a custom email sender, making your app downloadable, and user feedback.

How do I customize a basic theme with Softr?

Go to the Theme menu on the left and set the font, color, and size.

Softr configures Favicon domain description.

Go to the Settings menu on the left and define the application name, subdomain, logo, and custom domain.

Can Softr create additional pages?

You can create one by going to the Pages menu on the left.

Configure Google Search SEO settings.

Go to Settings (left-hand side) / SEO.

How to connect Google Analytics

Go to Settings / Integrations / find Google Analytics.

Unable to connect to Google Sheets.

Set up the sheet to be shareable: /File / Share / Publish to web/ Set it to Comma-separated values ​​(CSV).
Facebook Comments Box
Previous Article

Blogger theme creation guide for beginners: blogger blank page