Welcome to our Knowledge Base :)

Booking calculator and checkout form integrations

Learn how to install our booking forms on your website (calculator form + checkout form)
Written by Mony
Updated 1 week ago

*The checkout forms change according to your pricing - Hourly pricing vs. Standardized pricing have different checkout forms for you to use/show on your website*

Our powerful Online Checkout Integration consists of 3 things:

  1. Booking page URL - the URL of the page where people will submit their booking, it can be the URL of a Contact Us page that you use for quoting - if you do not have one currently, you can create a page that you would like to use for checkout.
  2. Booking Calculator form - this is the customer facing form at the front of your website. It gives customers immediate pricing (standardized) based on their selection of how many bedrooms and bathrooms and the frequency of the cleaning they need.

    a. The pricing, frequencies, and number of bedrooms and bathrooms are determined through your Products.

    b. Active Subscriptions will show up on this form and the maximum number of bedrooms and bathrooms will show up here as well.
  3. Checkout form - this is the main form used to collect customer information such as name/address/credit card (if using online pay functionality)/date and time of service/extras, etc. This will be the "checkout" page for your website, after customers receive their price from the calculator form they will continue on to this page to finish booking.

The Calculator form, the Checkout form, and the Products function are powerful tools designed to fully automate your job booking process by offering standardize pricing to customers and ease of ordering services.

Every booking that comes through your newly integrated online checkout process will be fully reflected in Maidily.

How to: Booking page URL

  1. Retrieve your current booking/checkout/contact us used for quoting URL

    a. If you do not have one, you will need to create a URL for your website that you will use as the final page of your checkout - this is where customers will submit their bookings through the Checkout form.
  2. Log into Maidily (if not logged in already)
  3. Click the "Settings" (Gear) icon in the top right
  4. Go to the "Web Integrations" tab
  5. Copy and paste the URL into the box under the "Booking page URL" section

  6. Precise instructions are included in the "Booking page URL" section

  7. Done! Move on to the "Booking Calculator" form section

How to: Booking Calculator form

1. Log into Maidily (if not logged in already)

2. Click the "Settings" (Gear) icon in the top right

3. Go to the "Web Integrations" tab

4. In the "Booking Calculator Form" section you can pick your color from the selection

a. Color selection only changes the button color on the Booking Calculator

b. In the example below the color is set to a lighter blue which is reflected on the buttons

5. Copy the "Embed Code" from the "Booking Calculator" Form section

6. Paste the code anywhere between the tag on the page of your website that you want it to appear on. The tag is a standard tag across any website builder platform and is found in the CSS code

7. Precise instructions are included in the "Booking Calculator Form" section

8. Done! Move on to the "Checkout Form" section

How to: Checkout Form

1. Log into Maidily (if not logged in already)

2. Click the "Settings" (Gear) icon in the top right

3. Go to the "Web Integrations" tab

4. In the "Checkout Form" section you can pick your color from the selection

a. Color selection changes the color in 5 areas on the Checkout Form: 2 areas in the "Service and Extras" section and 3 in the "Payment Details" section



5. Paste the code anywhere between the tag on the page of your website that you want it to appear on (usually done as the checkout, the final page a customers goes on). The tag is a standard tag across any website builder platform and is found in the CSS code

6. Precise instructions are included in the "Checkout Form" section

7. To test: Refresh your website and through the "Booking Calculator" on the front page enter the details and go through the booking process

8. Copy the "Embed Code" from the "Checkout Form" section

9. Done!

Hourly Calculator Form

If you are using Hourly pricing then your Calculator Form will look like this:

Hourly Checkout Form

If you are using Hourly pricing then your Checkout Form will include the hours for purchase and the rate:

Need help with this? We can do it for you! Just ask by emailing us at help@maidily.com 

Did this answer your question?