Customization
Customize the appearance and behavior of your Quote Widget.
The Quote Widget can be customized to match your brand and website design.
Dashboard Settings
The easiest way to customize your widget is through the GlassQuote Pro dashboard:
- Go to Settings > Quote Widget
- Adjust the following options:
Appearance
| Setting | Description |
|---|---|
| Primary Color | Button and accent color (hex code like #0066FF) |
Form Requirements
| Setting | Description |
|---|---|
| Require Phone | Phone number is required to submit |
| Require Email | Email address is required to submit |
| Show Insurance Toggle | Allow customers to indicate insurance claims |
Service Area
| Setting | Description |
|---|---|
| Serve All Areas | Accept quotes from any location |
| Specific Zip Codes | Only accept quotes from listed zip codes |
| Specific States | Only accept quotes from selected states |
| Out of Area Message | Message shown when customer is outside service area |
Advanced Configuration
For more control, use the JavaScript configuration object before loading the widget:
<script>
window.GlassQuoteConfig = {
// Container options
containerId: 'glassquote-widget', // ID of the container element
// Sizing
height: '700px', // Initial height
maxWidth: '480px', // Maximum width
// Appearance
primaryColor: '#0066FF', // Override brand color
// Behavior
autoResize: true, // Automatically adjust height
// Event callbacks
onComplete: function(leadId) {
console.log('Quote submitted! Lead ID:', leadId);
},
onError: function(message) {
console.error('Widget error:', message);
}
};
</script>
<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
containerId | string | 'glassquote-widget' | ID of the container element |
height | string | '700px' | Initial iframe height |
maxWidth | string | '480px' | Maximum widget width |
primaryColor | string | (from settings) | Override the primary brand color |
autoResize | boolean | true | Auto-adjust height based on content |
onComplete | function | - | Callback when quote is submitted |
onError | function | - | Callback when an error occurs |
Color Override via URL
You can also override the primary color via URL parameter:
<iframe src="https://app.glassquotepro.com/embed/quote?widget=YOUR_WIDGET_ID&color=%230066FF"></iframe>
URL color must be URL-encoded.
#0066FF becomes %230066FF.Custom Container
By default, the widget renders in a <div id="glassquote-widget">. You can use a custom container:
<script>
window.GlassQuoteConfig = {
containerId: 'my-custom-quote-container'
};
</script>
<div id="my-custom-quote-container"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>
Multiple Widgets
To display multiple widgets on the same page (different tenants or configurations):
<!-- First widget -->
<div id="quote-widget-1"></div>
<script>
window.GlassQuoteConfig = { containerId: 'quote-widget-1' };
</script>
<script src="https://app.glassquotepro.com/widget/WIDGET_ID_1.js"></script>
<!-- Second widget -->
<div id="quote-widget-2"></div>
<script>
window.GlassQuoteConfig = { containerId: 'quote-widget-2' };
</script>
<script src="https://app.glassquotepro.com/widget/WIDGET_ID_2.js"></script>
Responsive Sizing
The widget is responsive by default. To customize responsive behavior:
/* Make widget full-width on mobile */
#glassquote-widget iframe {
max-width: 100% !important;
}
/* Custom breakpoints */
@media (max-width: 768px) {
#glassquote-widget iframe {
height: 600px !important;
}
}
Dark Mode
The widget automatically detects the user's system preference for dark mode. To force a specific theme, wrap it in a container:
<!-- Force light mode -->
<div style="color-scheme: light;">
<div id="glassquote-widget"></div>
</div>
<!-- Force dark mode -->
<div style="color-scheme: dark;">
<div id="glassquote-widget"></div>
</div>
Logo and Branding
Your shop logo and name are displayed in the widget header. To update:
- Go to Settings > Shop Profile
- Upload your logo (recommended: 300x100px PNG)
- The widget will automatically display your updated branding