SpreadSimple
Published in

SpreadSimple

Online store based on Google Sheets + free CRM made on Trello

Make a flexible free CRM for your SpreadSimple website based on Trello Board. Integration between Trello and SpreadSimple will be done with Integromat.

In this article, we are going to describe how to create a Google Sheet based store, a simple yet powerful free of charge CRM based on Trello, and finally, the way to automate your business processes via Integromat.

Here is how it works:

  • Let’s assume you already have a website based on SpreadSimple and Google Sheets.
  • A user adds products to the shopping cart and then makes a purchase by sending the form.
  • A Trello card is created containing the order data. This data includes client information, cart content, and other kinds of information if necessary.
  • You manage orders by dragging the order card through the pipeline, adding comments, changing due dates, assigning a manager, and much more.

All of that can be done using SpreadSimple’s new feature — Webhooks, which can be found in the Checkout Tab.

Checkout settings

But first, what is a webhook?

Put simply, as soon as something happens, the webhook immediately notifies other applications transferring the data about the event so basically, webhooks provide automatic real-time communication between apps and it’s all done quickly and almost effortlessly.

All you need to do is set them up! Sounds difficult? Don’t worry, we’ll cover this process later!

So let’s create your future store on SpreadSimple.

SpreadSimple

SpreadSimple is a web application that offers a blazing-fast and simple way to create websites just using the data in a Google Sheet. And you can manage your content in your source Google Sheet as well, since all the changes you make there will be immediately reflected on our website.

SpreadSimple

To build a website you need:

  1. Log in on SpreadSimple.
  2. Click Add.
  3. Paste your Google Sheet link or choose one of our templates.
  4. Customize your website design.
  5. Press Publish.
  6. Manage your content in your Google Sheet. The Sheet becomes the CMS and after all the changes saved they will be reflected on your website after refreshing.
Creating a website on SpreadSimple

In our case, the most important thing is to add the Buy button that is available in Pro subscription. The button will allow our customers to make orders right on the website through the Order Form.

Order Form

Trello based CRM

Let’s take our sample furniture store website built on SpreadSimple to see how it all works. Our task now is to ensure that customers’ orders get right into our CRM that we are going to create on Trello.

Trello

Trello is an online tool for managing projects and personal tasks that is extremely popular and can be used for many needs, besides project management.

On Trello we need to do the following steps:

  1. Create a new Board.
  2. Name it My CRM.
  3. Create several columns to manage future orders: New orders, Confirmed, In Progress, Shipped, and Canceled.

This is just a sample, and we encourage you to create your own set of stages that fits your business process.

My CRM | Trello

Our future orders will proceed through this pipeline we created, from left to right. Once the order gets in the first column, it can be moved to the other ones depending on the stage it is in.

When a customer makes an order on our e-store, we want it to be placed in our CRM immediately. To do that we’ll need Integromat.

Integromat

Integromat is an intermediate service that makes software automation. On the Integromat website, we create a new Scenario, with Trello and Webhooks.

New Scenario | Integromat

The first thing we need to do is add a webhook to catch it later. Having added the Webhook, we see the URL that we need to copy, and then we use it in our website settings, pasting it into the Webhooks URL field. Then we save changes and republish our website.

To catch the webhook we created on Integromat, we need to get a test request. So on the furniture store website, we make an order and checkout. After the form is sent, Integromat catches our request. It means that at this place the service explored and gained the data structure which came from our website. And that’s what we are going to use.

Integration Webhooks | Integromat

Creating a Trello module to receive orders

The webhook is an entry point. Our task now is to create a Trello card so we:

  1. Drag and create a Trello module called Create a Card.
  2. Click on Add.
  3. Seeing the name My Trello Connection, click Continue.
  4. Build the connection between the SpreadSimple Trello account and Integromat.
  5. Push Allow and choose My Trello Connection.

We select the CRM board we’ve created in Board dropdown and define on which list our new card will be put.

My CRM order collection | Integromat

Also, we can choose label mapping or the assignment, but we’ll get back to this later.

Instead, now we give a name to our card and add a description for it. We’ll do that using the data we received from the webhook. For the name, we choose order ID, client: name , we also add client:email .

Now let’s configure the Description field. Here in Trello markdown is available which will come in handy to create rich content for this field.

Card configuration | Integromat

In the Description field we enter the following:

  1. ### Order# 1. orderId
  2. 1. client:name
  3. 1. client:phone
  4. 1. client:email
  5. 1. client:message
  6. insert a dash
  7. ### Cart: cartItemsText
  8. TotalAmount

Let’s check what we have.

We save all the changes, name our module My CRM Order Collection and turn it on.

We can choose a certain schedule for order collection, there are various options available, so we select Immediately to get a new card instantly as a webhook appears. And our script is done and ready to use!

To see how it’s all working we go back to our store to make a new order. After it is sent, a new card appears right in our CRM system.

My CRM | Trello
Order card in CRM | Trello

The card contains an Order Id, a unique identifier, the information about the person who ordered, the items ordered, and the total amount.

Basically, that can be enough for managing your orders but let’s see what else we can do!

Adding check-lists

It could be useful to have several predefined check-lists to manage an order. For example, Call to the customer, Check the Inventory, Print the Shipping label, Ship. Of course, it can be challenging to make this list every time the order arrives, so we can convert our card to an Order Template to replicate our check-list automatically and we’ll place it in a new service column named Info.

My CRM | Trello

How to use it? We want our new cards to have this checklist from the beginning, by the way, we can also add certain labeling or other information. All that will be copied from this template. To see it working we’re going to modify our workflow a little bit.

Here are our steps:

  1. On Itegromat go to Advanced Settings, then go to Copy Card.
  2. Pick Select.
  3. Choose My CRM for the Board.
  4. Choose Order Template from the INFO Column.
Order Template on my CRM

Adding an Image

Also, it could be great to place the image of the first item on the card (as there can be more than one item in the order), and use it for the order cover. It can be done by adding another module named Add an Attachment. To do that we need to add an attachment which is an image to our card template.

Here is how we are going to do that:

  1. On the new module named Add an Attachment for Card ID we choose CardID
  2. We select the URL for the Attachment Type.
  3. In the URL field, we use this formula: get (1.cartItems[]; 1.image )
  4. Name the Attachment name First Item Image.

Now we’ll get a new order, with a certain order id, customer’s name and email for the title, the picture, the order content, and the checklist. The order can be easily moved through the different stages in the pipeline in CRM we created.

As you can see this system is very flexible. We used these certain columns and tasks just as an example, and you can configure your CRM any way you need it to be. You can add as many stages as you want, as your business requires, and edit or improve them later.

Extra Features and Tips

Trello allows you to set the due date to the cards, which can be quite helpful to make sure the orders are processed in time.

So why don’t we take the time the order was made and automatically add one more day to that date?

In the Due Date field, we can choose today or Now and add one more day. This way we give 24 hours to process the order and if the time runs out we’ll be able to see it.

To apply that:

  1. Go to Trello Create a Card Module.
  2. Choose Date and Time Tab in the Due Date Field.
  3. Use this formula: AddDays( now ; 1 )

That’s it.

We can change the due date after order confirmation with the customer, for example, the order can be delivered later. Also, we can enable notifications, set reminders.

Here’s how the card looks like now:

Order card in my CRM | Trello

Another great thing about Trello as CRM is that we can assign certain members of our team to be responsible for the order processing. And we can create a labeling system. For example, an urgent order can be marked red and like this, all the labels can be applied. Also, we can add attachments in case there are some kinds of documents required for order processing. All of that is possible here.

We can subscribe to order changes to follow the process. There are a lot of filtering options as well. For example, we can look only for urgent orders or only for the ones I am assigned to, or the ones which are due soon, and so on.

Another small lifehack for Trello: if you add a party emoji to the Column Name, a fancy animation will be played when you drag a card to this column.

Congratulations!

All that is a basic example of a possible automation process. Using Integromat you can easily collect your orders in a Google Sheet, for example, we can add another module, one of the plenty, like Google Sheets or Airtable. We can send emails via one of the multiple email services, including built-in email service.

For instance, right after the order is made, a confirmation email with additional instructions can be sent to the customer, and so on.

As you can see, with all the options available, the sky’s the limit.

P.S. Here is the video version of our tutorial:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store