The MediRecords Appointments Widget is an HTML snippet you add to your practice's website, giving patients real-time access to your appointment calendar so they can book directly with their preferred provider, with no delayed third-party integration and no double bookings.
This article covers the prerequisites for requesting the widget, setting its time zone, customising its appearance with CSS, and what patients see when booking through it.
Contents
- Prerequisites for Configuration
- Setting a Time Zone for the Appointment Widget
- Customising the Appointment Widget Appearance
- Booking through the Appointment Widget
- Troubleshooting
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 Customer Success 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.
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
No. |
Part |
CSS Class Name |
1. |
Widget container |
mrapt-widget |
2. |
"Book appointment" button |
mrapt-button |
3. |
"Next available appointment" text |
mrapt-info-text |
4. |
Available appointment time information |
mrapt-available |
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
Property |
Description |
value |
border-width |
Set the border width (must include unit in the value, eg: px for pixels, pt for points) |
[value]px |
border-color |
Set the border color |
white, blue, #3fa7c4, etc. |
border-radius |
Set the rounded border radius (must include unit) |
[value]px |
background |
Set the background color |
white, blue, #3fa7c4, etc. |
color |
Set the text color |
black, #000000, etc. |
font-family |
Set the font family; you can list multiple font names separated by commas as a fallback if the first font is not available on the system |
Arial, sans-serif |
margin-top |
Set the space between top border and the other element above (must include unit) |
[value]px |
margin-bottom |
Set the space between bottom border and the other element below (must include unit) |
[value]px |
margin-left |
Set the space between left border and the other element on the left (must include unit) |
[value]px |
margin-right |
Set the space between right border and the other element on the right (must include unit) |
[value]px |
padding-top |
Set the space between the top content and top border (must include unit) |
[value]px |
padding-bottom |
Set the space between the bottom content and the bottom border (must include unit) |
[value]px |
padding-left |
Set the space between left content and left border (must include unit) |
[value]px |
padding-right |
Set the space between right content and right border (must include unit) |
[value]px |
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 you can 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
Patient Says They Did Not Receive an Email Confirmation for Their Booking
Cause: When a patient books through the Appointment Widget, no email confirmation is sent. Only an SMS confirmation is sent.
Resolution: This is expected behaviour rather than a fault. Confirm with the patient that they received an SMS instead of an email. This confirmation SMS is not charged to the practice.
Escalate when: the patient says they received neither an SMS nor an email confirmation.
Appointment Times Are Displaying Incorrectly for Patients or Providers
Cause: This happens when the wrong time zone is applied to the widget, which can lead to confusion or missed appointments.
Resolution: Update the time zone applied to the widget by following the steps in Setting a Time Zone for the Appointment Widget above.
Escalate when: the widget's time zone has already been corrected but appointment times still display incorrectly.
Patient Received a Different Appointment Time via SMS Than What They Booked
Cause: This comes down to how time zones are handled. If a patient has set a time zone in the MediRecords Mobile App, their confirmation is sent in their local time. If they have not, the SMS shows the Provider's time zone instead, or defaults to AEST if the Provider's time zone has not been set either.
Resolution: Recommend the patient download the MediRecords Mobile App and set their time zone there for the most accurate confirmation experience. See Why did my patient receive a different appointment time via SMS? for the full explanation.
Escalate when: the patient has set their time zone in the Mobile App but still receives a confirmation for the wrong time.
Further Reading
Still need help?
If this article did not fully answer your question, our Support team is here to help. We can assist with troubleshooting, guidance, or clarifying how MediRecords works.
Contact MediRecords Support
Phone: 1300 103 903
Email:
support@medirecords.com
Live chat: Available directly within the MediRecords app or via
the Knowledge Base
Want to build confidence using MediRecords?
We offer tailored software training for individuals and teams, whether you need help with specific workflows or a broader overview of the platform.
To enquire about training, contact your Customer Success Manager or email success@medirecords.com.
Comments
0 comments