Embedding Automated Scheduling Pages into your Website

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