Embedding Automated Scheduling Links into your Site

Below you will find instructions for embedding the Automated Scheduling and Booking Links 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

If you want to hide the header of the Booking Home Page you can use the parameter show_header=false, so for example: https://app.greminders.com/c/myshortname/?show_header=false

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

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



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