Events & Analytics
Track widget events for analytics and custom integrations.
The Quote Widget dispatches events you can use for analytics tracking, custom integrations, and workflow automation.
Available Events
glassquote:complete
Fired when a customer successfully submits a quote request.
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
console.log('Quote submitted!');
console.log('Lead ID:', event.detail.leadId);
});
Event Detail:
| Property | Type | Description |
|---|---|---|
leadId | string | Unique ID of the created lead |
glassquote:error
Fired when an error occurs in the widget.
document.getElementById('glassquote-widget')
.addEventListener('glassquote:error', function(event) {
console.error('Widget error:', event.detail.message);
});
Event Detail:
| Property | Type | Description |
|---|---|---|
message | string | Error message |
Callback Functions
Instead of event listeners, you can use callback functions in the configuration:
<script>
window.GlassQuoteConfig = {
onComplete: function(leadId) {
console.log('Quote submitted! Lead ID:', leadId);
// Your custom logic here
},
onError: function(message) {
console.error('Widget error:', message);
// Your error handling here
}
};
</script>
<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>
Analytics Integration
Google Analytics 4
Track quote submissions as conversions:
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
gtag('event', 'generate_lead', {
currency: 'USD',
value: 1,
lead_id: event.detail.leadId
});
});
Google Tag Manager
Create a custom event trigger:
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'glassquote_lead',
leadId: event.detail.leadId
});
});
Then in GTM:
- Create a new Trigger: Custom Event with event name
glassquote_lead - Create a Tag (e.g., GA4 Event) using this trigger
Facebook Pixel
Track as a Lead event:
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
fbq('track', 'Lead', {
content_name: 'Auto Glass Quote',
lead_id: event.detail.leadId
});
});
Meta (Facebook) Conversions API
For server-side tracking, use the lead ID to send a server event:
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
// Send to your server endpoint
fetch('/api/track-conversion', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
event: 'Lead',
leadId: event.detail.leadId
})
});
});
Microsoft Clarity / Hotjar
Track as a custom event:
// Microsoft Clarity
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
if (window.clarity) {
clarity('set', 'quote_submitted', 'true');
}
});
// Hotjar
document.getElementById('glassquote-widget')
.addEventListener('glassquote:complete', function(event) {
if (window.hj) {
hj('event', 'quote_submitted');
}
});
Custom Redirect After Submission
Redirect customers to a thank you page:
window.GlassQuoteConfig = {
onComplete: function(leadId) {
// Redirect with lead ID
window.location.href = '/thank-you?lead=' + leadId;
}
};
Show Custom Confirmation
Display a custom message instead of redirecting:
window.GlassQuoteConfig = {
onComplete: function(leadId) {
// Hide widget
document.getElementById('glassquote-widget').style.display = 'none';
// Show custom message
var message = document.createElement('div');
message.innerHTML = '<h2>Thank You!</h2><p>We\'ll contact you shortly.</p>';
message.className = 'quote-success';
document.getElementById('glassquote-widget').parentNode.appendChild(message);
}
};
Programmatic Control
The widget exposes a JavaScript API for programmatic control:
// Refresh the widget (reload)
window.GlassQuote.refresh();
// Destroy the widget (remove from DOM)
window.GlassQuote.destroy();
// Update configuration
window.GlassQuote.setConfig({
primaryColor: '#FF0000'
});
Debugging Events
To debug events during development:
// Log all widget events
['glassquote:complete', 'glassquote:error'].forEach(function(eventName) {
document.getElementById('glassquote-widget')
.addEventListener(eventName, function(event) {
console.log('[GlassQuote Event]', eventName, event.detail);
});
});
Cross-Origin Communication
The widget uses postMessage for cross-origin communication. If you need to listen for raw messages:
window.addEventListener('message', function(event) {
// Verify origin
if (event.origin !== 'https://app.glassquotepro.com') return;
var data = event.data;
if (!data || typeof data !== 'object') return;
switch (data.type) {
case 'glassquote-complete':
console.log('Lead ID:', data.leadId);
break;
case 'glassquote-error':
console.log('Error:', data.message);
break;
case 'glassquote-resize':
console.log('New height:', data.height);
break;
}
});