Below you will find instructions for embedding the Automated Scheduling, Booking Links or Routing Forms 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
| Parameter | Description |
|---|---|
| show_header | true or false, Show or hide header on booking page |
| remember_me | true or false, Show or hide Remember Me checkbox |
| first_name | First Name of Invitee |
| last_name | Last Name of Invitee |
| Email of Invitee | |
| phone | Phone of Invitee |
| address | Address of Invitee |
| c_fav_color | Example of Custom Question, API Name |
| utm_source | UTM Source - Google Analytics Tag |
| utm_medium | UTM Medium - Google Analytics Tag |
| utm_campaign | UTM Campaign - Google Analytics Tag |
| utm_content | UTM Content - Google Analytics Tag |
| utm_term | UTM Term - Google Analytics Tag |
https://app.greminders.com/c/myshortname/?show_header=false&utm_source=facebook&first_name=Michael
<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
//or use with Routing Forms: https://app.greminders.com/routing-forms
'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: false, // to auto submit the form set this true, default is false, note the form must pass validation
remember_me: true, // shows the remember me checkbox. If you dont want to show the checkbox or disable remember set this to false
// UTM Codes (optional)
utm_source: 'newsletter', // UTM codes you can pass through (optional)
utm_medium: 'email', // UTM codes are Google Marketing "utm" codes (optional)
utm_campaign: 'product_launch', // they help you track marketing sources and help with attribution
utm_content: 'bottom_cta', // totally optional to use
utm_term: 'new_users' // more UTMs
},
styles: {
zIndex: 100 // Default z-index for the widget is 1000
}
}
);
GReminders.BookingWidget.onSuccess(function(event_id, form_data) {
//we automatically close the widget on successful booking, you can continue your flow here
GReminders.BookingWidget.close();
alert('Success! ' + event_id + ' Customer Form Data: ' + JSON.stringify(form_data));
});
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();" />
