2 min read NoCode/LowCode/Code

Pipelines in Softr (Minimalistic Version)

Track sales and processes with minimalistic CRM-like pipelines block in Softr.

🧩
Click here to play with a working demo.
💻
If you need development services, please click here to contact me.

Steps to implement (Minimalistic Version)

  1. List the different pipeline stages that are of relevance to your business domain. In our case, I set it up as follows:
Pipeline Stage Description
Lead A potential customer interested in the product/service.
Outreach Initial contact made through various channels.
Contacted Leads who have responded and engaged with the sales team.
Disqualified Leads not fitting the product/service due to various reasons.
Negotiation Active discussion of terms and pricing with serious prospects.
Closed (Won) Successfully finalized deals resulting in a sale.
Closed (Lost) Qualified prospects who decided not to proceed with the purchase.
  1. Head over to your data source, in this guide we will use Airtable and create a Single-Select field to represent the pipelines options.
  1. Go to Softr and add the Kanban block. I will name it "kanban-demo-block" for this tutorial.
  2. Add an action button for every pipeline stage. ("Lead", "Outreach", "Contacted", etc).
  3. Add an action button that is empty, of type "Scroll To" and set it to scroll to the kanban block itself ("kanban-demo-block"), and put it at the top.This step is optional but will make all the cards have consistent UI.
Following steps 4-5, you should get a result similar to this.
  1. Set up conditional visibility on the action buttons. The visibility rule is that we will show all buttons except for the pipeline stage we are currently at.

    Let's take "Lead" for example:
    A. Click on the orange button for "Button Visibility" settings for the "Lead" action button.
    B. Set the visiblity to not show this button if the current stage is "Lead".
The "Lead" action button is shown at all case, except when the current stage is "Lead".

C. Repeat this step for all other action buttons.

  1. Setting up the card UI: we will add a minimalistic text just to denote that we are currently at this pipeline stage and link it to a Blank or empty character.


That's it.
This is a minimalistic version. Future related articles will dive into add-on and production-ready tips.

💻
If you need development services, please click here to contact me.