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
| 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, can has multi font name separated by comma to 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 |
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