Appointment Widget Configuration

The MediRecords Appointment Booking Widget is a powerful tool designed to grow your practice by making it easier than ever for patients to book appointments. With just a simple copy-and-paste of a unique HTML code into your clinic’s website, patients gain instant access to real-time appointment availability and can book directly with their preferred provider. Unlike third-party booking tools that often rely on delayed integrations, MediRecords works seamlessly in real time, ensuring accuracy and eliminating double bookings.

By offering a convenient online booking option, you give patients the flexibility they expect while reducing administrative workload for your staff. Instead of time spent managing phone calls and scheduling manually, your team can focus on delivering great patient care. Whether you are looking to attract new patients or streamline scheduling for existing ones, the MediRecords Appointment Booking Widget makes your clinic more accessible, more efficient, and more patient-friendly.

Once added to your website, your patients will see a 'Book Appointment` button. Below the button, patients will see the next available appointment time. The beauty of MediRecords (unlike third-party integrations) is all products work in real time, with no delays!

If you would like to provide your patients with the flexibility they desire to choose not just the best appointment for them, but the most suitable provider for their needs, then MediRecords Appointments might just be the perfect fit for you and your practice.

MediRecords Online Appointment Widget - by using an HTML code that is inserted into the clinic's website, this allows patients to book online which then updates in real-time in the clinic MediRecords.

The MediRecords Appointments Widget allows patients to access your appointment calendar and book appointments with your providers by connecting to our Practice Management Software (PMS) application you access from app.medirecords.com.

Contents

1. Pre-Requisites for Configuration
2. Setting a Time Zone for the Appointment Widget
3. Customising the Appointment Widget Appearance
4. Booking through the Appointment Widget

Prerequisites for Configuration

The practice will need to ensure the following settings have been configured before requesting the widget:

• The practice location is set to community

• Providers are set to community

• Appointment sessions/types are set to community

If you are looking into integrating your booking platform to Appointment Widget, please reach out to your account manager to get more information.

Before requesting this product, please ensure support access is enabled on your MediRecords account.

Setting a Time Zone for the Appointment Widget

Managing time zones accurately is essential for keeping your online appointment system reliable and patient-friendly. If the wrong time zone is applied, appointment times may display incorrectly for both patients and providers, leading to confusion, missed appointments, and unnecessary rescheduling. Updating your practice’s time zone ensures that all online bookings align seamlessly with your actual clinic schedule.

This article will guide you through the steps to modify the time zone within your MediRecords Appointment Widget. By following the instructions, you can make sure appointment times remain accurate and consistent for everyone accessing your booking system.

1. Select Book Online.
2. Select anything in About the Appointment step, as this is not important, and select Next.

3. Select any appt time as it is not important what time is chosen.
4. In Your Details window you will see a button Update your details select this: 

5. Selecting Update your details allows you to amend and change the information displayed in this window, once you have updated your details correctly select Save.
6. You can either go back and cancel the appointment or just select the X to close. 

Customising the Appointment Widget Appearance

Customising the MediRecords Appointments widget gives your practice the flexibility to align its look and feel with your website branding. Whether you want a modern, minimalist design or something more vibrant and eye-catching, the widget can be tailored using simple CSS adjustments. This allows you to create a seamless patient experience, where booking appointments online feels like an extension of your practice’s own website.

With just a few small changes, you can update colours, fonts, borders, and button styles to reflect your clinic’s identity. This not only enhances your professional presentation but also builds patient trust by delivering a polished and consistent online presence. In this article, we’ll walk you through exactly how to apply custom CSS to your MediRecords Appointments widget, and provide examples to help you get started quickly.

We've put together a comprehensive guide of changes you can make to your Widget.

To make custom changes, you will need to insert custom css under the javascript you will have been given upon subscribing to MediRecords Appointments. 

This is an example of what your Javascript will look like. This code will include two unique identifiers which essentially connect your appointment calendar and practice settings to your widget. These identifiers are your Practice ID and Access Token.

<html>
       <head>
                 <script>
                 (function(m,r,a,p,t,w,d){
                            ...
                            ...
                 mraptWidget('[your-practice-id]', '[your-token-id]');
                 </script>
                 <!-- Put the custom widget CSS here -->
       </head>
</head>

Customisation Guide

Using External CSS

<link href="custom.css" rel="stylesheet"/>

custom.css is the css file name for customizing MediRecords Appointments widget appearance located in the practice website.

Using Internal CSS

<style>
/* your CSS properties are here */
</style>

Widget Elements

How to customise

To use default appearance, simply remove relevant properties.

Please refer to the note at the bottom for the common css properties usage and meaning.

Customising the widget container

Use css class name mrapt-widget to customise widget container.

Following is the css properties which can be used: 

.mrapt-widget {
border-width: 1px;
border-color: blue;
border-radius: 5px;
background: white;
color: black;
font-family: Arial, sans-serif;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

Customising the widget button

Use css class name mrapt-button to customize widget button.

Following is the css properties which can be used:

a.mrapt-button {
border-width: 1px;
border-color: blue;
border-radius: 5px;
background: blue;
color: white;
font-family: Arial, sans-serif;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}

Customising "Next available appointment" text

Use css class name mrapt-info-text to customise info text.

Following is the css properties which can be used:

.mrapt-info-text {
color: black;
font-family: Arial, sans-serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
}

Customising available time information

Use css class name mrapt-available to customise available time information.

Following is the css properties which can be used:

.mrapt-available {
color: black;
font-family: Arial, sans-serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}

CSS Properties References

Booking through the Appointment Widget

New Patients

The patient will need to enter the following details - 

After selecting the Book Now
 

•  Who is the booking for?
• What type of appointment do you require? 
• You can also enter a reason for the appointment.
• Select your practitioner OR simply select your appointment time 
• Enter patient Details -
• Name 
• address 
• Time zone for example Brisbane 
• Date of birth 
• Gender  
• Medicare number if you have one 
• Email address 
• Mobile phone 
• You will be sent an SMS to your phone, enter the Verification Token code and submit
• Create password > confirm password 
• Tick accepts terms & conditions after reading 
• Select Next

Now you will be presented with a screen that asks you to Review and Confirm your appointment.

The next screen will thank you for your appointment and you will be sent an SMS confirming your appointment. 

Existing Patients simply log in to the appointment  Widget Your details will auto-fill and select your appointment. 

• You will be sent an SMS to your phone, enter the Verification Token code and submit
• Tick accept Terms & Conditions 
• Review & Confirm your appointment 

Troubleshooting - 

Here are common troubleshooting tips you can use if you are having trouble logging in to your appointment or if you have technical issues.

• Restart your computer or device
• Make sure the device is plugged in and charged
• Check that the internet connection is working and is strong enough to work 
• Close all other applications
• Update your internet browser
• Try connecting with a different device
• Refreshing your Browser by selecting

Q. Can I cancel or Update My booking? 

A. You will be sent an SMS to confirm your appointment, you can also follow the link to track your appointment on the MR App and make any changes.

Q. What if the page will not load? 

A. In most browsers, selecting Crtl+F5 will force the browser to retrieve the webpage from the server instead of loading it from the cache.

Q. The page is glitchy, taking time to load appointments, providers, and information.

A. If you are using Internet Explorer, Edge, Google Chrome, or Mozilla Firefox you can quickly clear the cache with a keyboard shortcut. While in your browser, press Ctrl + Shift + Delete simultaneously on the keyboard to open the appropriate window.