BridalLive Custom Website Forms
Installation
To add BridalLive's Custom Website Forms to your website simple copy the HTML snippet found under Embedded Form Code on the General Settings tab of the Custom Website Forms settings, and paste it into the html of your desired page.
<iframe src='https://app.bridallive.com/forms.html?formType=scheduler&retailerId=[your retailer ID]&lang=en' width='100%' height='720' frameborder='0'></iframe>
Webform Events
BridalLive's Custom Forms will emit events that your website can listen for and execute its own code when users complete certain actions. This can be used to adjust elements on your own site or make calls to third party services. This can be done by setting up an event listener to listen for the message event, and then executing the proper code based on the data's type property, as seen in the example below. Use the chart provided to know which types correlate to what user actions.
| Event Type | Details |
|---|---|
| bridallive.appointment_type_selected | This event triggers when the user has selected their appointment type. Note: This event represents data that is not final and will fire again if a user goes back and selects a new appointment type. |
| bridallive.date_and_time_selected | This event triggers when the user has selected their appointment type. Note: This event represents data that is not final and will fire again if a user goes back and selects a new date or time. |
| bridallive.event_scheduled | This event triggers when a user has completed the form and sent the info to your BridalLive. This will fire regardless of if the appointment was scheduled or the user put on a wait-list. |
| bridallive.redirect | This event triggers after an appointment has been booked right before the user is redirected, if a redirect URL is set up. This event will fire at nearly the same time as bridallive.event_scheduled. |
Example Code
//In our example function, first we check that this message is in fact from bridallive before we do anything
var onMessage = function(message) {
if(message.data && message.data.type && message.data.type.indexOf('bridallive.') === 0) {
//This function will be called for all bridallive events, regardless of what specific type it was
logEvent(message.data.type);
//If we wanted to do something only for a specfic event, we simply match the type exactly
if(message.data.type === 'bridallive.appointment_type_selected') {
console.log('Appointment Type Selected')
}
//If we wanted to trigger a Google Analytics event after a user submits the form, we would do as so
if(message.data.type === 'bridallive.event_scheduled') {
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'event', 'Scheduler', 'submit');
}
}
};
//Your event listener will always listen for the message event
window.addEventListener('message', onMessage);
var onMessage = function(message) {
if(message.data && message.data.type && message.data.type.indexOf('bridallive.') === 0) {
//This function will be called for all bridallive events, regardless of what specific type it was
logEvent(message.data.type);
//If we wanted to do something only for a specfic event, we simply match the type exactly
if(message.data.type === 'bridallive.appointment_type_selected') {
console.log('Appointment Type Selected')
}
//If we wanted to trigger a Google Analytics event after a user submits the form, we would do as so
if(message.data.type === 'bridallive.event_scheduled') {
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'event', 'Scheduler', 'submit');
}
}
};
//Your event listener will always listen for the message event
window.addEventListener('message', onMessage);
