Plugins
Templates
Blocks
Template Setup Guides

Contractor - Services like Thumbtack Template

Template page link: https://zeroqode.com/template/contractor---services-like-thumbtack-template-1558780389336x924859687894970000

Introduction

With the Contractor no-code template we enable you to close the gap between customers and local professionals. The template is a clone of Thumbtack and has similar functionality. In Contractor professionals maintain an account with all the details about the service they are providing while customers can create projects and select professionals they want to work with. This template is perfect for contractor work in any industry, and can be easily customized to your needs.

Features

  • Fully responsive pages

  • Social sign-up Facebook & Google

  • Advanced integration and use of stripe "custom accounts"

  • Ability to link a stripe standard account

  • Integrated chat system

  • Integrated inbox and notifications

  • Unique customer and professional pages

  • Integrated reviews

Structure

User

There are three types of users: admin, customer and professional. The last two are the most important ones while admin can only add new categories and/or subcategories and make structural connection between them. Customer and professional users share a base structure which includes entries like name, surname, phone number, date of birth, email, profile pic and list of chat. Both customer and professional contain an User .

Customer

Essentially customers are the users who will register on the platform to post a project about a service they are in need of. They mainly keep data about their projects, however other structural aspects of the platform are linked to them. Database entries for customer users are: Location, StripeCustomerID, User; and lists of: Projects, Reviews and CardID's . Other data types that store a customer will contain aCustomerUser or a User entry that defines a customer.

Currently the feature to save customer's card is hidden and in order to enable it you need to remove the condition (Hide when Currentdate/time is not empty) from group PaymentUnused on customerpage . After that you will have the ability to save customer's CardID's but you will have to create the functionalities involving using saved cards from scratch.

Professional

A professional (PRO) is the person who will be hired by a customer to complete a project. It's structure is among the most complicated ones, containing a lot of entries related to his business profile, stripe account, jobs, reviews and invoices. A PRO will need to setup a business profile in order to be able to take part to a customer's project which also implies creating a stripe account. However since the platform is mostly dedicated to all kind of service providers, a lot of professionals might find difficult to create a stripe seller account on their own so we fully integrated this process in our platform using stripe "custom accounts" that makes things a lot easier even for inexperienced users. Also for users who already have a stripe account or who want to create one on their own there is a solution for that too. More details about stripe and how we integrated it you will find in the documentation.

Project

A project is essentially a job created by a customer. During the creation process the customer will provide this basic info that forms the structure of a project: type of service, location, date, detailsandphotos. After the project is posted it's status will become "open" and either the customer and/or professionals will be able to contact each other. The customer will then hire a professional he would like to work with, the last having the option to accept or reject the invitation. In case of acceptance, selected PRO will be saved in the project's professional database entry and the project creator will have a brief time to fire him in case if he changes his mind (see image 1).

The customer has the following rights to a project:

  • to edit (only if there are no professionals working on the project)

  • to close (only if there are no professionals working on the project)

  • to open (only if the project is closed or completed)

  • to complete (only if professional sent an invoice)

  • to fire a professional (only during 2 days after professional accepted the job)

  • to delete (only if the project is closed or there are no professionals working on it)

These limitations are set within GroupFocus ProjectsOptions to these groups: EditProject, CancelProject, CompleteProject, FirePro, DeleteProject and depending on the condition it can hide or make visible these groups (see image 1).

1. Group FirePro condition

Notifications

This template has an integrated notification system. Both customer and professional user will receive in app notifications regarding: new messages, project updates, account related, receiving invoice etc. The same notifications are sent on the email, but users have the option to turn off email notifications, however they can't turn off in app notifications. The menu to turn on/off notifications is located in group AccountDetailsContainer both on customerpage and professionalpage pages.

2. Email notifications menu

Creation of a notification occurs when performing the next actions:

  • sending a message as a customer

    • button SendMessage on customerpage

  • sending a message as a professional

    • button SendMessage on professionalpage

  • posting a project

    • button PostProject on projectcreation page

  • hiring a professional

    • buttons Hire and HireFromConversation on customerpage

  • firing a professional

    • button FirePRO from popup FireProfessional on customerpage

  • accepting a job

    • button AcceptJob from popup JobAcceptConfirmation on professionalpage

  • rejecting a job

    • button RejectJob from popup JobAcceptConfirmation on professionalpage

  • sending an invoice

    • button SendInvoice from popup InvoiceCreation on professionalpage

  • sending a payment

    • button Pay from popup Payment on customerpage

    To customize text, title or other structural parts of a notification find the elements above and change the workflow as you desire.

Chat

The chat is a conversation between a customer and a professional. It's structure consists of these entries: Project, list of Messages, list of Users and list of users that Viewed the last messages (the list of Users contains the customer user or professional user, or both).

Invoice

An invoice is created by a professional after he completed a job. The PRO will fill in the amount of hours he worked on the project and the platform will automatically determine the total payment based on the professional'sPricePerHour . Also he can select a different from his default currency (from Dropdown Currency on the popup InvoiceCreation ) which in some cases might be useful but you can also hide it if your users will work with a predefined currency.

Reviews

A review is the feedback left by the customer to a professional that completed his project. Currently only the customer can write a review and there is no functionality for others to respond to it. A customer will be asked to provide feedback after he pays the professional but since it is not mandatory to do so he can ignore this step. However the project he left unreviewed will still be open to receive feedback. All the completed projects that have received no feedback will be also found in the reviews tab above the actual reviews that current customer has provided.

Pages

Index (Home page)

Index page is the main navigation page from which users can go to signup/login view categories and with information that gives a better understanding of how the platform works. Also it is the start point for creating a project since to create one you need to pick a type of service from the input SelectTypeOfService that is present on index page. If the customer is on the customerpage , when creating a project he will be redirected to index to pick a type of service.

Signin

This page is for creating an account and for logging in to an existing one. To access it, users must click on "Signin" text in the header. However to create a professional account, users will have to click on "Join as A Pro" instead. Similar links are present in footer for both customers and professionals. On the page itself beside standard login and register, users can use their social accounts (google and facebook) to create or to login into an account.

Customer page

The same as for professionals customers have their own page in this app. That was determined by the overall difference between them even tho they share a similar base structure. Structurally the page consists of profile info, projects, reviews, inbox and notifications settings, project details, professional profile, chat. Viewing the page from the editor you can clearly see that it has a lot of groups and containers but user will see one or at most 2 of them at a time while others will be hidden until triggered. There is also present a number of popups which function is to complete some important actions or just to confirm some changes.

List of popups present on customerpage:

  • Payment

    • here the customer will pay a PRO for provided services and at the end of it can initialize the review process

  • Feedback

    • here the customer will leave a PRO feedback for provided services

  • FireProfessional

    • here the customer will confirm or cancel the firing of the hired professional

  • HireAnotherPro

    • here the customer will confirm or cancel the hiring of a professional if he already has one hired

  • ProjectDeletionConfirmation

    • here the customer will confirm or cancel the deletion of a project

  • ProfessionalExperiencePictures

    • here the customer will view PRO's pictures of their work or licenses

Project creation page

A page that is structurally linked to the customerpage is projectcreation page. As the name suggests this page is used to create a project. There the customer will submit all the details regarding the job he needs to be done. He also can edit an existing project there. It consists of 3 small blocks each representing a type of info about the job:

  • Location (the place where the service is awaited)

  • Time (the date and time when the job should be done)

  • Details (detailed information and pictures about the project)

When editing a project, the customer can edit only time and details about the project, but if needed this limitation can easily be removed.

Professional page

Professional page is the user page for professionals. The same as the customerpage it consists of blocks from which one or two are visible at one time. Overall visual aspect has some similarities with customerpage but the functionality and design differ. The page consists of basic profile info, business profile, jobs, payments, reviews, inbox and notification settings, chat, stripe profile. The are also present some popups that are very important:

  • ProjectDetails

    • (this popup contains all the details about the project)

  • InvoiceCreation

    • (here the professional will create an invoice for his customer)

  • JobAcceptConfirmation

    • (here the professional will accept or reject a job invitation)

  • ChatDeletionConfirmation

    • (here the professional will accept or cancel a chat/job deletion)

  • ProjectPictures

    • (here the professional has view large versions of the project's pictures)

Unlike customers that click on a project and are presented with all the conversations with PRO's regarding this job, for professionals it is a little different. Opening "Jobs" tab will show the user all the conversations with all customers and all available jobs. However the conversation also represents a project. Clicking on it will open the chat but it also has more options regarding the project it is attached to in the top right corner. Also there are buttons on it's surface that will become visible when set conditions are true. For example after a PRO completes the job a "Send invoice" button will appear, and after the payment is done the button will become not clickable and informative text will say "Completed".

3. Conversations/jobs tab

All categories page

This page is just a listing of all categories and subcategories present in the app. It is a helpful tool for those who need to find a specific category from a specific domain and can also be of use for platform owner to see if there are some categories he should add or if he should update existing ones.

Categories page

This page contains a detailed view of a domain of subcategories. The most popular ones will be shown in a repeating group and with an image in the background. That image determines if a subcategory is popular or not. The condition set will show only subcategories which Photo database entry is not empty.

About page

About page gives an overall description of how the platform works both for customer and professional users.

Specific references

Stripe

Nowadays the most reliable way to offer your services and to get paid directly on a bank account is using a third party system such as stripe. Like we've mentioned before this template has a complete in app integration of stripe. That means users don't have to leave our platform ever unless they choose to do so and they still can create a stripe seller account and can manage your payments and transaction history. This gives more credibility to your business and will make it more easier and faster for professionals to create an account and to get paid on the same day. The way we've done it will need you to understand what stripe "custom accounts" are.

Currently you can open 3 types of seller accounts on stripe:

  • standard

  • custom

  • express

Here are some differences between these accounts when it comes to their integration in your platform:

STANDARD

EXPRESS

CUSTOM

Integration effort

Lowest

Low

Typically higher

Integration method

OAuth integration

OAuth integration

API-only

Fraud and dispute liability

User

Platform

Platform

Platform can specify payout timing?

No

Yes

Yes

Onboarding

Stripe

Stripe

Platform

Identity information gathering

Stripe

Stripe

Platform

User can access the Stripe Dashboard?

Yes, full Stripe Dashboard

Yes, Express Dashboard

Only on the Platform

User support provided by

Platform and Stripe

Platform and Stripe

Platform

Ideal for users that are

Experienced online businesses

Any type

Any type

Custom accounts give you full control over user experience and are suitable for any type of users. The platform however must make sure it will provide for it's users all information and support they might need when it comes to anything that involves sending/receiving funds. To read more about stripe and custom accounts go here .

But if your professional users already have a stripe account or want a full stripe experience and to be able to manage their account on their own, we got you covered. The template contains an alternative for such users providing them a redirect link which will connect their stripe account to your platform (this means they can create one from scratch or connect to an existing one).

In order to create a custom account your users must fill in their bank account details and to have an email. But stripe also has a verification process which requires providing an identity document, an address and if users are from USA- the last 4 SSN number. Stripe will initialize a verification process of the details submitted and after it will end the account will either have status "verified" or "unverified". Also details submitted usually differ for different countries. This is solved by making the user to pick the country first and then a group of inputs related to that location will appear. Right now the countries that are integrated in the template are:

  • United States

  • Great Britain

  • Europe (France, Italy and Germany)

If you tend to use this template in a specific country only you will need to disable the other options and if it's not present among those listed above you will have to add it.

To add a new country (region) you will have to follow this steps:

  1. Check the list of supported countries to maintain a platform and make sure your country (region) is among them. Users creating a custom account on your platform can be from any country stripe supports.

  2. Check what is the bank details format for the country you want to add and what information you have to submit for the verification process (usually stripe will support a passport from any country but some countries might support more options like a driver's licence while other don't)

  3. After you found what is the bank details format you want to add, create respective inputs for each detail and add the country code to the dropdown StripeChooseCountry (for example for United States you have to add code "US"). For a better visual understanding check the image 4. As you can see the difference between a british and a german input form, is that one needs only a "IBAN" number while the other needs an "account number" and a "sort number". So if the british form would not have been present in the template you would have to add the inputs AccountNumberGB and SortNumberGB in a group and make it to be visible only when "GB" country code would have been selected from the dropdown.

  4. Create or copy and modify an existing workflow that converts a bank account into "Stripetoken" . The workflow is triggered by button StripeCreate . Then change the required fields with the ones suitable for the country you want to add. Also this workflow must work only when the country selected from the dropdown StripeChooseCountry represents this specific workflow so don't forget to change the "Only when" condition. The condition set also limits the number of bank accounts a professional can add to 1. So if you want to customize your app even more you can remove "...external_accounts_total_count is 0" and implement functionalities that require PRO's having the ability to maintain multiple bank accounts. See the image 5 for better understanding of what to modify.

4. German and British input forms
5. German and British workflows for adding a bank account.

Other than that make sure to attach your personal stripe keys for the "stripe.js" and "Stripe Get-Data" plugins found inside bubble's "plugins" tab.

Webhooks

As described before this platform primarily focuses on use of stripe custom accounts. This means that your professional users will fill in their data which will be sent to stripe for verification. In case it fails you will have to retrieve what information failed verification and to request it again from the user. This is easily through the use of webhooks which are integrated on the basic level but you will need to setup it again in your stripe account and tweak it for your best needs. To setup an account verification webhook you will have to go to your stripe account -> Webhooks and add it there. Make sure you get the webhook link from platform -> API Workflows -> accountverification. Then for further customization of the app use the field StripeVerificationList of the Professional user.

Platform fee

Currently this template gives to platform owner the ability to receive a fee from every charge that occurs between customers and professionals. It is currently set to 10% but you can modify it with one click for the whole template. There 2 options to modify it:

  1. Go to database -> App data -> All fees/rights and modify the number to the amount you want (don't forget that it is a percent value)

  2. After you login as an admin find the input AppFee on the adminpanel page and modify it's value. It will automatically save it in the database and it will be applied to the whole platform.

Adding service categories

Contractor is a platform providing for it's customers a variety of services. So in order to be relevant on the market you will have to add new and modify existing categories. The only one who will be able to do that is the admin user. The same as for platform fee this can be done on the adminpanel page. Here the admin will have the following options:

  • to create a category

    • by pressing the button Create category on the adminpanel page

  • to edit a category

    • by pressing on one of the groups: EditCategoryColumn1, EditCategoryColumn3 , EditCategoryColumn3 andEditCategoryColumn4

  • to delete a category

    • by pressing on one of the groups: DeleteCategoryColumn1, DeleteCategoryColumn2, DeleteCategoryColumn3 and DeleteCategoryColumn4

By deleting a category all the subcategories linked to it will be deleted too. If you want to modify it's name or add/delete it's subcategories use edit option instead.

Admin panel restrictions

For security reasons the ability to write was disabled for the test version of the template. This means that you will be unable to modify/delete existing data from the admin panel. However it will still give you an overall idea on how it does work. You will be prompted with a notification popup that will inform you about this when you will try to make some changes. In order to remove this restriction you will have to make some changes in the workflow after you purchase this template. You can remove this restriction by following on of these steps:

  1. Go to database -> App data -> All fees/rights and modify the WriteRights from "no" to "yes". After that delete the popup BuyTemplate on adminpanel page.

  2. The second option is a a bit harder than the first one but not too complicated. You will have to delete all the conditions related to this restriction. In order to do so you will have to find where these conditions are used which you can do by looking at the Actions tab in the Element inspector (see image 6). Also delete the Show popup BuyTemplate step from the same workflow.

6. Actions related to popup BuyTemplate

Demo to preview the template