Below you will find instructions for embedding the Automated Scheduling and Booking Links into your Website or Application.
If you are using GReminders for Automated Scheduling you are able to embed this into your Website.
You can see on the right (or below if you are viewing this on mobile)
we have an embedded iframe which renders the booking application.
Just for the demo we have highlighted the iframe with a red border so you can see where it starts and stops.
Basically you can put code similar to this one into your web page.
<iframe src="XXXXXX" style="border: none; width: 100%; height: 800px; overflow: scroll;" allowfullscreen></iframe>
https://app.greminders.com/c/myshortname
https://app.greminders.com/c/myshortname/?show_header=false
<a href="#" onclick="window.open('XXXXXX','greminders','width=600,height=400');">Book with me</a>
You can also use our Javascript API call to fire the Booking Widget on demand. This will allow you to trigger the booking widget based on your workflow.
<script src="https://app.greminders.com/widgets/booking.js"></script>
<script type="text/javascript">
window.onload = function() {
GReminders.BookingWidget.initialize(
//create an event type and put the link below: https://app.greminders.com/event-types
'https://app.greminders.com/YOURLINK',
//here are all the options
{
// you can trigger this based on a button or some other action
anchorEl: document.getElementById('schedule_button'), //you can omit this line completely if you like and just use: GReminders.BookingWidget.open(); in your code
fields: {
first_name: 'Michael', //you can prepopulate the fields here if you already have this information
last_name: 'Scott',
phone: '9495556666',
email: '[email protected]',
c_fav_color: 'blue', //populate custom questions/fields as well: https://app.greminders.com/admin/custom-questions
auto_submit: true //to auto submit the form set this true, default is false, note the form must pass validation
},
styles: {
zIndex: 100 // Default z-index for the widget is 1000
}
}
);
GReminders.BookingWidget.onSuccess(function(event_id) {
//we automatically close the widget on successful booking, you can continue your flow here
GReminders.BookingWidget.close();
alert('Success! ' + event_id);
});
GReminders.BookingWidget.onError(function(message) {
//if we encounter a booking error you can trigger a different error or retry
GReminders.BookingWidget.close();
alert('Error! ' + message);
});
// or trigger the widget using this:
// GReminders.BookingWidget.open();
};
</script>
<input type="button" id="schedule_button" value="Schedule With Me" />
<!-- example to trigger via button onclick event -->
<input type="button" value="Schedule With Me using OnClick" onclick="GReminders.BookingWidget.open();" />
