Add a conveyancing calculator to your website


This guide will look at how you can add a conveyancing calculator button to your website which links to the quote calculator you made in Hoowla.

Please note: In order to add a calculator into your own website you will need to have created a quote calculator in Hoowla first. Read this guide for help creating a quote calculator.

 

Adding a conveyancing quote calculator to your own website

To start with you’ll need to locate the quote calculator you wish to use by going through set up and clicking quote calculator.

 

setup-conveyancing-fee-calculator

 

From here you can add the chosen calculator to a website.

 

Capture

 

You will need to copy and paste the given code (see below) into the text of your website.

 

Capture2

 

Capture3

Editing your quote calculator button on your website

You can edit most aspects of the button for your quote calculator: aspects of the appearance of the button; the colour of different parts of the form; and which fields of the form are necessary for clients to fill in.

 

All of these edits need to be inserted within the highlighted area below.

 

Capture4

 

Editing the appearance of your button

The six variables with which you can edit the appearance of your button are:

 

data-id (The quote calculator id as seen in hoowla)

data-text (The text inside the button; default: “+ Get your conveyancing quote”)

data-color (The colour of the button)

data-text-color (The colour of the text within the button)

data-size (The size of the button; small, medium, large or extra-large)

data-border (The shape of the button; square, circle or default)

 

Here is the default appearance of the button on your website.

Capture5

 

Insert the appropriate changes to the fields for your button.

Capture6

 

An example of an edited button on a webpage.

Capture7

 

 

Editing the appearance of your form

The four variables with which you can change the appearance of your form are:

 

data-form-color (The colour of the background of the form)

data-form-text-color (The text colour within the quote calculator form)

data-form-button-color (The background colour of the ‘Calculate’ button)

data-form-button-text-color (The text colour of the ‘Calculate button)

 

Here is the default appearance of the quote calculator form.

Capture8

 

Insert the appropriate changes to the fields for your quote calculator form.

Capture9

 

An example of an edited quote calculator form.

Capture10

 

 

Editing which fields of the quote calculator form are required to be filled in by clients

The five variables with which you can change the required fields that clients must fill in are:

 

data-validation-date (The move in date)

data-validation (The clients details)

data-validation-phone (The clients phone number)

data-validation-email (The clients email address)

data-validation-postcode (The postcode of the property)

 

All of these variables are set to “true” as default.

 

As can be seen below by the red outline of boxes, all fields are required to be filled in. (This is default)

Capture11

 

Insert the appropriate changes to the fields for your quote calculator form.

Capture12

 

Now only the buying value of the property is necessary for a client to have a quote calculated.

Capture13