Changing the appearance of MediRecords Appointments on your website is simple if you know what you're doing. 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 |