Embedding Automated Scheduling Pages into your Website

Below you will find instructions for embedding the Automated Scheduling, Booking Links or Routing Forms into your Website or Application.


Basic Embed Demo

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>
You need to replace XXX with YOUR "My Link" which looks something like: https://app.greminders.com/c/myshortname

You can get the "My Link" by logging into GReminders and clicking on your Profile and going to My Link.

This works also with Routing Forms. Replace your Link with the Routing form URL.

You can also pass in Optional Parameters to prepopulate or manipulate the embedded form:
ParameterDescription
show_headertrue or false, Show or hide header on booking page
remember_metrue or false, Show or hide Remember Me checkbox
first_nameFirst Name of Invitee
last_nameLast Name of Invitee
emailEmail of Invitee
phonePhone of Invitee
addressAddress of Invitee
c_fav_colorExample of Custom Question, API Name
utm_sourceUTM Source - Google Analytics Tag
utm_mediumUTM Medium - Google Analytics Tag
utm_campaignUTM Campaign - Google Analytics Tag
utm_contentUTM Content - Google Analytics Tag
utm_termUTM Term - Google Analytics Tag
Example: https://app.greminders.com/c/myshortname/?show_header=false&utm_source=facebook&first_name=Michael

Want to do a window popup? Try this:
<a href="#" onclick="window.open('XXXXXX','greminders','width=600,height=400');">Book with me</a>


Advanced Javascript Embed

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();" />



Need Help? Need more Style Customization? Contact Support at [email protected]