Installing 1stAvailable's Widget

 

The 1stAvailable booking widget is the quickest way for people to book online appointments from the practice's website.  The Practice widget displays the published appointments of all the practitioners with the corresponding treatment types. People can then select the preferred practitioner, treatment types and preferred date and time.

 

Please provide this guide to your IT staff in order to install our Widget

 
 

1. Copying The New Widget's Code

1.1 The pop-up can be triggered via a button or text. Simply, copy and paste the following lines of text in the location of the page where you want your button to be displayed.  Include this line of code in the head section of your html page :

 

<script type="text/javascript" src="https://www.1stavailable.com.au/wp/wp-content/uploads/2014/05/popup_practice.js"></script>

 

1.2  Include this line of code inside the body where you want your widget to be displayed:

 

<div class="1stAvailableWidget widget" id="414" style="cursor:pointer;"> <p class = "btn btn-primary" style="text-align:center;"> Book an Online Appointment </p> </div> 

 1.3  Now, you must locate your  Practice ID which will be at the end of the URL when you are logged into 1stAvailable and in your 'My Practice' Page

 
 
 
Please note that we can assist you with locating this code if need be

 

1.4  Replace the id 414 form the above code with your Practice ID. 

1.5  Instead of "Book Now" you can use your own text or image and style it with your own css customise it as you see fit

 If you are using a CMS such as WordPress or equivalent, you can copy and paste above two lines directly into the page/post or sidebar where you want to place the widget. If this doesn't work, you may need to load "popup_practice.js" file in the header section using some plugins 
 
Add an image
 
 
 

2. Implementing The Practice Widget As An Embedded iFrame

2.1  The embedded iframe is displayed as a part of the webpage. To implement an iframe the minimum width required is 350px. Simply copy and paste the following lines of code in the location of the page where you want your iframe to appear.

 

<div>

<iframe src="https://www.1stAvailable.com.au/AppointmentWidget?practice_id=414" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"> </iframe>

</div>

 

2.2  Replace the id 414 form the above code with your Practice ID. 

2.3  You can easily change the size and position of the iframe by changing the size and styles of the div in which the iframe is wrapped into.

 

 <iframe src="https://www.1stAvailable.com.au/AppointmentWidget?practice_id=414" frameborder="0" height="480px" width="800px"> </iframe>

 

2.4  Or you can also implement the iframe without any div and using the styles and properties of iframe, with the code below.

 

<iframe src="https://www.1stAvailable.com.au/AppointmentWidget?practice_id=414" frameborder="0" height="480px" width="800px"> </iframe>

 

3. The Practitioner Widget As A Pop Up

The Practitioner widget displays the published appointments of the individual practitioner with the corresponding treatment types. People can then select the preferred treatment types and preferred date and time.

 

3.1  Include this line of code in the head  section of your html page :


<script type="text/javascript" src="https://www.1stavailable.com.au/wp/wp-content/uploads/2014/05/popup_practice.js"></script>

Caution: Include the javascript "popup_practice.js" only once in the page for practice widget and practitioner widget.

 

3.2  Include this line of code inside the body where you want your widget to be displayed:

 

<div> should be <div class="1stAvailableWidget2 widget" id="41224" style="cursor:pointer;"> <p class = "btn btn-primary" style="text-align:center;"> Book an Online Appointment </p> </div>

 

3.3  Now, you must locate your  Practitioner ID which will be at the end of the URL when you are logged into 1stAvailable and in your 'My Account' Page.  It is also known as your Subscriber ID. 

 

 
 
 

Click to edit

3.4  Replace the id 41224 with your Practitioner ID.  

3.5  Instead of "Book Now" you can use your own text, image, class and styles to improve the look and feel of the button. The btn btn-primary class used above is just an example only.

 

4. Implementing The Practitioner Widget As An Embedded iFrame

4.1  The embedded iframe is displayed as a part of the webpage. To implement an iframe the minimum width recommended is 300px. Simply copy and paste the following lines of code in the location of the page where you want your iframe to appear.

 

<div>

<iframe src="https://www.1stAvailable.com.au/AppointmentWidget?practitioner_id=41224" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"> </iframe>

</div>

 

4.2  Replace the id with your Practitioner ID (refer to step 3.3)

4.3  You can easily change the size and position of the iframe by changing the size and styles of the div in which the iframe is wrapped into.

4.4  Or you can also implement the iframe without any div and using the styles and properties of iframe, with the code below.

 

<iframe src="https://www.1stAvailable.com.au/AppointmentWidget?practitioner_id=412244" frameborder="0" height="480px" width="800px"> </iframe>

 

Once complete your widget will be displayed on your Practice's website, see below:

 

If you require 1stAvailable Support, see below:

1. To request support via phone, please call us on 1300 266 517

2. To request support via email, please write to us at support@1stavailable.com.au

3. To send us a support request via our website, please follow the link

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk