Jobly template is built without code to help you run SaaS (software as service business). A robust service business management app like Jobber and Kickserv allows professional home service businesses to manage major aspects of their business such as work requests, quotes, jobs, invoices, customers, locations, scheduling, etc.
As a Company owner you can create and/or access your company's account, then add team members to your account so they can use the app to view their schedules, clock in and out, and more.
To use the app as an Employee your company must have an Owner account, and employees must be added to the account as an authorized user. Employees comprise managers, team leads and staff members.
Managers can manage the operations through the app by assigning tasks to employees, staff members, creating/checking/editing work requests, quotes, jobs, invoices, etc.
Team leads can assign tasks to employees, schedule the work requests, jobs, etc.
Customers can view their work requests, quotes, invoices and jobs. They can also make new work requests, request changes to quotes, and make payments for invoices.
Advanced scheduling with support for recurring and one-time jobs
Customer center with a password-less login system
Fully responsive pages and user dashboard
Admin Dashboard for Management
Regular sign up & social sign up via Google
Instant invoice payments with Stripe
Organizations are service businesses that use the application to manage their customers. This data type stores basic information about the organization like name, logo, address, etc., as well as fields containing list of all
customers and list of
users that are team members.
Users are team members who must be part of an organization. This data type stores the profile info (photo, name, email), their
organization and also has a
role field which is used for access control.
Customer data type implies customers of an organization. This data type stores contact info and has fields for a list of
locations related to them. The
balance field stores information about the customer's balance. If it's negative, represents their deposit or what the company owes them. The
access_token field stores a hash used for secure login.
Locations are work sites (with separate addresses) of customers. They store address info and the
customer they belong to. Customers'
jobs can be tied to specific locations but
The four following data types
invoice are the key "work" data types.
Request is a work request made by customers who are looking to get some services provided to them. It has fields for
end_date for assessment and a boolean for whether or not an assessment is required. It also has a field for team members (users) assigned to do the assessment.
Quote usually (but not necessarily) follows up work requests. In addition to other self-explanatory fields, it has the
job_converts field, which is a list of jobs based on the quote in question, a
change_requests field which is a list of changes requested by the customers, and
charge_group that handles the list of items/products/services to bill the customer.
Jobs are the most robust data type in this group. They can be created from quotes or directly and are of two types: recurring or onetime which are variables under the field
Other key fields:
visits: a list of
schedules which are of type visit. They are specific to jobs and are created using API workflows.
visits_count: an integer that stores the number of visits. On job creation, this number is set even before all the visits are created in the back-end. This helps in UX such that a "loading state" is displayed where the repeating group of visits should be indicating that they are currently being created.
recurring_duration_mode: can be either week or month. The value determines which API workflow is used to create the visits in the backend as can be seen in the workflow for creating a new job.
recurring_duration: is a number that determines how many weeks or months the job lasts.
recurring_repeat: is a number that determines how often
recurring_duration of the job will take place. The
recurring_duration divided by
recurring_repeat is what gives the
schedule_text: is concatenated from the inputs where some of the values are pulled during the job creation. Example: Monthly on the 23rd of every month or Weekly on Fridays.
billing_type: This can either be visit or fixed and determines in part how invoices that include the job will be generated.
When it is visit, the user will need to select one or more visits. Each visit's charges (sum of charges) will be added to the total for that job at the point of invoice creation. For example for a job with weekly visits including two items of $10 each (total $20), two of these are selected during invoice creation (job selection) and added to the invoice called "Weekly Service" totaling $20 each.
When it is fixed, there will be no visits to select during job selection stage. On the invoice creation page, the default charges of that job will be listed in the line items. For example for a job with weekly visits whose default charges includes two items Clean ($10) and Cut ($15), when the job is selected during job selection stage of invoice creation, on the invoice creation page there will be two line items from it Clean ($10) and Cut ($15) totaling $25.
invoice_timing: it indicates when or how invoices should be generated. For both visit and fixed billing type it can be set to As needed, Once when job is completed or Monthly on the last day of the month. Additionally for visit type it can be set to After every visit.
invoice_reminders: is a list of reminders which are created when the
invoice_timing is set to Monthly on the last day of the month.
invoice_on_completion: is a boolean which when set to "yes" will prompt you to generate an invoice for the job when you mark it as completed. During job creation, it is set to "yes" when the
job_type is onetime and on the user side (front end) there is the checkbox to remind you to invoice on completion. It is checked when the
job_type is recurring and the dropdowns for
invoice_timing are set to Once when job is completed.
default_charge_lines: is a list of
charge_lines. Charge_lines are duplicates of the original charges that a job has. They are used in the creation of additional visits to display the same items the original job has, but allow you to edit the quantity or add extra items.
charge_group: is a bill which contains a list of charges, as well as discount and tax applied, however, in case of
jobs it doesn't include either tax or discount and the
sub_total is the real Total. Charges are basically line items that contain an item, description, quantity, price, total.
Invoices are meant for customers and may or may not be based on existing jobs for the customers. The
amount field has the same value as the
total field of the invoice's
balance field starts out once the job was invoiced.It decreases as payments are received from the customer.
Schedules are to-dos that can be assigned to team members and have a
type of either visit or task. They also have the following fields which are specific to visit type:
job: is the job that this schedule/visit is attached to.
charge_lines: are similar data types to
charges. Each of them takes one of the charges from the job the schedule is attached to and has a different
service_charge: is a special kind of charge. There are two types of
service_charge: Weekly Service and Monthly Service. They are used when the job has a visit
billing_type. This means when you select multiple visits to invoice, each will be reflected on the invoice charges as a separate Weekly/Monthly Service.
Reminders are invoice reminders created for jobs that are set to be billed monthly (recurring payment).
Time_entries saves the information of time spent on the job. They have duration values in different fields for easy formatting and a
user field containing the team member who performs the job. They can be attached to a job, otherwise the
title will be General.
Charges are like line items on an invoice or bill. They contain an item and the quantity, unit price and total, as well as title and description.
Charge_groups are simply groups of
charges with a total which is set in the
sub_total field and with some optional fields attached to them. The following fields apply to
charge_groups used for invoices:
discount_type: This value can either be percentage or flat and determines how the
discount_number would be treated.
discount_number: This value can either be rate like 0.05 (5%) or flat number like 50 depending on the
tax: This is the tax rate applied to the charge group.
total: This is the final amount due to be paid on the invoice after applying the discount and adding tax to the
Tax_rates are taxes like VAT or Sales tax. They have a
name and a
Transactions are basically used to consolidate 3 other data types for easy handling. They are payments, deposits and invoices. Each
transaction can have one of those 3 data types which can easily be known from the type field whose value is either payment, deposit or invoice.
Payments are records of funds collected from a customer and optionally for a particular invoice.
Deposits are records of funds collected from a customer and optionally for a particular invoice.
Notes are additional information for invoices, requests, quotes or jobs and contain a text field and a list of files/attachments. A note can contain only one thing of either invoices, requests, quotes or jobs they are attached to.
Plans are the pricing plans for the whole app. They contain stripe plan_ids for monthly or yearly plans used to subscribe users to a Stripe product plan and an important
level field used for access control (Limiting access to certain parts of the app for users on certain plans).
Emails are used for record-keeping of all emails sent from within the app to customers. Emails are sent for quotes, invoices, payments and deposits.
These are changes/revisions which customers have requested to be made to
quotes that have been sent to them.
These are used to record subscription payments made by customers.
This is the main landing page of the template. It has basic information for new customers to learn more about the application. It has a header, hero, client showcase, video section, features listing section, call-to-action and footer.
The pricing page contains the pricing block that has 4 paid plans, each with a list of features. The plan price can be toggled from yearly to monthly billing.
Group billing mode switch
Determines whether pricing displayed is per month or per year. Values are yearly or monthly
This contains the sign-up form and allows users to sign up with email or via Google. During the sign up process an
organization is created for the user with the
subscription_due date set to 14 days of free trial period.
This contains the login form and allows users to login with email or via Google.
This is the self-service dashboard for organizations' customers. They can view their work requests, quotes, invoices and jobs here. It also allows customers to make new work requests, request changes to quotes and make payments for invoices.
This shows the user recommended actions, assignments for the day and a preview of outstanding balances, past due invoices, upcoming jobs and time entries for the day. This page is only accessible by users with level 3 user access & above.
This shows a list of all schedules (both of type visit & task) that the user has access to. Users on level 1 of user accesss can only see schedules assigned to them as defined in the privacy roles.
The Work page is where users manage requests, quotes, jobs and invoices. For each of those 4 data types there is a list view, detailed view and edit/create form. This page is only accessible by users with level 3 of user accesss & above.
The Customers page is where users manage customers and locations. For each of those 2 data types there is a list view, detailed view and edit/create form. This page is only accessible by users with level 3 & above.
The Timesheet shows all time entries for a the selected day for a selected user. Here a user can edit or add new time entries that may or may not be attached to a job. They can also delete time entries from here. This page is only accessible by users with level 3 of user access & above.
This is where users can see reports (of which there are 8) and approve timesheet entries up to a select date.
Here users can manage various settings: company information, account & billing, team members, payments and notifications.
This page is used in the backend to render a pdf of an invoice. The invoice is being rendered when visiting the invoices section on the Customer-center and clicking the Download button.
This is similar to Invoice_view and is primarily used to display information about a quote.
This page is similar to Invoice_view and is primarily used to display information about a job.
This page is used to display the Privacy Policies of the platform.
This page is used to inform users about account cancellation when they choose to do that.
This page displays the available features on the platform. There you can start a free trial as well.
This page is used for resetting the password.
The 404 page is also known as an “error page” or “Page Not Found” page. This page indicates that the user reached the domain they requested, but the URL path provided no information.
This element is used at the top of the page and offers overall navigation through the platform.
The footer offers basic navigation through the platform.
This reusable is used for charges creation and editing. You can also add discounts and extra taxes which are also displayed in this reusable.
As the name suggests, this reusable is used to display information about charges.
This reusable is used only on the Job_view page and it's meant to display only textual information about charges. It doesn't display information about costs or discounts and extra taxes.
This reusable is used for charges creation and editing specifically for jobs. You can't add discounts and extra taxes for this charges.
This reusable is used for starting a trial.
This reusable is used to create notes and add file attachments that are linked to a quote, job, etc.
This reusable is used to create/edit and display a note that was attached to a quote, job, etc.
This reusable is used to schedule visits for a customer and display their details.
Users are able to sign up with email or via Google. During the sign up process an
organization is created for the user with the
subscription_due date set to trial period of 14 days. A plan is also set for the organization.This plan can be specified from the plan parameter on the signup page url. If the parameter doesn't exist, the unlimited plan is set for the organization.
You would need to create an app/project in the developer console:
Ensure that you add all live & test URLs for these pages: /signup, /signin & /dashboard as authorized redirect URLs.
Dashboard_lite and other individual pages (Work, Schedule, Timesheet, Management, Customers, Settings)
When the page is loaded the URL's path is split with a JS call and each part is used to fetch a different thing and set a different state. In this implementation there are 3 parts named one, two and three.
Part 'one' comes right after the page name and is usually set as the state of the sub menu group for that page. For example when you load the URL https://example.com/work/overview, the value of the first part one = overview and overview is set as the value of the work sub menu custom state
Part 'two' either carries an id of an object such as requests or quotes or it carries the value new and triggers workflow actions for creating an object. For example, when you load the URL https://example.com/work/requests/214625, the value of the first part one = requests and requests is set as the value of the work sub menu custom state
current. Then the value of the second part two = 214625. This is used to search and fetch the request and is passed to a workflow that handles the viewing of a request. In another example when you load the URL https://example.com/work/requests/new, the value of the first part one = requests but because part two = new, requests is not set as the value of the work sub menu custom state
current. Instead this triggers the show of the customer selection popup which handles the next steps for creating a new request.
Part 'three' only carries the value of edit when the second part carries the id of an object. The presence of edit triggers a workflow for editing the object instead of viewing it. For example when you load the URL https://example.com/work/requests/214625/edit, the value of the first part one = requests and requests is set as the value of the work sub menu custom state
current. Then the value of the second part two = 214625. This is used to search and fetch the request but because three = edit the fetched request is passed to a triggered workflow for editing the request object.
When the page is loaded the URL's path is split with a JS call and each part is used to fetch a different thing and set a different state. In this implementation there are 3 major parts namely organization, main and sub.
In a URL https://example.com/customer-centre/org/main/sub
org is the username or the organization. The organization with that username is searched and set as a state on the page when it is loaded.
main can either be one of requests, quotes, jobs or invoices. It can also be login or confirmation when the customer is not logged in.
sub when available is the ID of the data type specified in
The url of the customer center is made like this for data list view:
website home url + customer-center + organization's username + data type
The url of the customer center is made like this for data detailed view:
website home url + customer-center + organization's username + data type + object ID
In the list view of the 4 major data types
invoices, there is search & filtering functionality. To make it work, a "base" repeating group is first used to filter the data with sorting and dates and then the main repeating group can further filter the first repeating group's data with statuses. The Search&Autocorrect plugin is used for search&autocorrect, and it has its datasource defined similarly to the main repeating group. When the search&autocorrect is in use, the main repeating group shows the result of the search&autocorrect's search.
Subscriptions are handled via the organization data type of each team using the app. The organization data type stores the Stripe customer ID, Stripe subscription ID, subscription due date, as well as the plan data type representing the plan the organization is on.
When choosing or changing a plan, the user can select either monthly or yearly billing. If monthly, the monthly_id or the chosen plan is used in the Stripe workflow, and if yearly, the yearly_id is used.
When an organization's subscription is renewed or paid for the first time, the subscription due date is pushed forward 1 month or year in the future accordingly via API workflow triggered by Stripe webhook. If the user subscribes to a new plan, the API workflow finds the plan with matching ID and updates the organization's plan field.
This template uses Stripe for payments powered by Bubble's Stripe plugin and Stripe.js plugin.
To setup your Stripe account, create an account with https://stripe.com. You can access your dashboard once you have successfully verified your email address and activated your account.
Click on Developers and then, API keys. Copy your API keys. Ensure to use a live API key when your template goes live.
This template uses two Stripe webhooks. One for successful invoice payment which renews or updates subscription plan and one for unsuccessful which cancels the plan.
To configure them
Click add endpoint
For Invoice payment successful, URL should be https://yourappbaseurl.com/api/1.1/wf/renew and filter event type should be invoice.payment_succeeded
For Invoice payment unsuccessful, URL should be https://yourappbaseurl.com/api/1.1/wf/canceled and filter event type should be invoice.payment_failed
PDF downloads are powered by an API call which converts PDF formatted pages within the template to PDF. These pages are invoice_view, job_view, quote_view. This API is deployed on Heroku and you can make your own deployment by following the steps below:
Click on the "Deploy to Heroku" button and follow the prompts from there
After that go to Bubble > Plugins > API Connector > PDF Generate > Render and replace the URL with that of your own Heroku app.
This template comes with explicit notes for Database fields, states, etc, which will guide you through the DB structure.
The Dashboard_lite page has many overlapping elements. All major sub pages, data views and forms are overlapping. In addition, in major repeating groups, there exist desktop and mobile versions overlapping each other.
You will find other overlapping elements of note within these groups. Simply copy the element name and search for it. Note that this is for minor groups not easily found in the elements tree.
Group Set Job Scheduling
Group Set Job Invoicing
Group Inner Mobile
Group Inner Desktop
Schedule, Work, Customers, Management, Timesheet & Settings Page
Work & Customers Page