Installation

Step-by-step guide to installing the Quote Widget on your website.

This guide covers how to install the GlassQuote Pro Quote Widget on any website platform.

Finding Your Widget ID

Before installing the widget, you need your unique Widget ID:

Log in to your GlassQuote Pro dashboard
Go to Settings > Quote Widget
Copy your Widget ID (a UUID like f47ac10b-58cc-4372-a567-0e02b2c3d479)

Keep your Widget ID secure. Anyone with this ID can embed your quote widget.

Quick Installation (Recommended)

The simplest way to add the widget to any website:

<!-- GlassQuote Pro Widget -->
<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>

Replace YOUR_WIDGET_ID with your actual Widget ID.

That's it! The widget will automatically render where you place the <div>.

Platform-Specific Instructions

WordPress

Option 1: Custom HTML Block (Easiest)

Edit the page where you want the widget
Add a Custom HTML block
Paste the following code:

<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>

Update/publish the page

Option 2: Theme Integration

Add to your theme's functions.php for site-wide placement:

<?php
function glassquote_widget_shortcode() {
    return '
        <div id="glassquote-widget"></div>
        <script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>
    ';
}
add_shortcode('glassquote', 'glassquote_widget_shortcode');
?>

Then use [glassquote] shortcode anywhere on your site.

Option 3: Footer Placement

Add to your theme's footer.php or use a plugin like "Insert Headers and Footers":

<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>

Squarespace

Go to the page where you want the widget
Add a Code Block (requires Business plan or higher)
Paste the widget code
Save and publish

Wix

Go to your Wix Editor
Click Add > Embed > Custom Embed > Embed a Widget
Click Enter Code
Paste the widget code
Adjust size and position
Publish your site

Shopify

Add to a page using the HTML editor:

Go to Online Store > Pages
Select or create a page
Click Show HTML (<> button)
Paste the widget code
Save

React / Next.js

Create a reusable component:

// components/GlassQuoteWidget.jsx
import { useEffect } from 'react';

export default function GlassQuoteWidget() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      if (window.GlassQuote) {
        window.GlassQuote.destroy();
      }
      script.remove();
    };
  }, []);

  return <div id="glassquote-widget" />;
}

Use it in any page:

import GlassQuoteWidget from '../components/GlassQuoteWidget';

export default function QuotePage() {
  return (
    <div>
      <h1>Get a Free Quote</h1>
      <GlassQuoteWidget />
    </div>
  );
}

Vue / Nuxt

Create a Vue component:

<!-- components/GlassQuoteWidget.vue -->
<script setup>
onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js'
  script.async = true
  document.body.appendChild(script)
})

onUnmounted(() => {
  if (window.GlassQuote) {
    window.GlassQuote.destroy()
  }
})
</script>

<template>
  <div id="glassquote-widget" />
</template>

Drupal

Option 1: Twig Template

Add directly to your Twig template:

<div id="glassquote-widget"></div>
<script src="https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js"></script>

Option 2: Custom Block Module

Create a custom module glassquote_widget:

<?php
// glassquote_widget/src/Plugin/Block/GlassQuoteBlock.php

namespace Drupal\glassquote_widget\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * @Block(
 *   id = "glassquote_widget",
 *   admin_label = @Translation("GlassQuote Widget"),
 * )
 */
class GlassQuoteBlock extends BlockBase {
  public function build() {
    return [
      '#markup' => '<div id="glassquote-widget"></div>',
      '#attached' => [
        'html_head' => [
          [
            [
              '#tag' => 'script',
              '#attributes' => [
                'src' => 'https://app.glassquotepro.com/widget/YOUR_WIDGET_ID.js',
              ],
            ],
            'glassquote_widget_script',
          ],
        ],
      ],
    ];
  }
}

Direct iFrame (Fallback)

If the JavaScript loader doesn't work in your environment, use a direct iframe:

<iframe
  src="https://app.glassquotepro.com/embed/quote?widget=YOUR_WIDGET_ID"
  width="100%"
  height="700"
  frameborder="0"
  style="max-width: 480px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);"
  title="Get a Quote"
></iframe>

The JavaScript loader is recommended over iframes because it supports automatic height adjustment and event callbacks.

Verifying Installation

After installation:

Visit the page where you added the widget
You should see the quote wizard with your branding
Test by entering a vehicle and completing the flow
Check your GlassQuote Pro dashboard for the new lead

Troubleshooting

Widget not appearing

Check that your Widget ID is correct
Ensure the widget is enabled in Settings > Quote Widget
Check browser console for JavaScript errors
Verify your subscription is active

Widget appears but doesn't work

Check your browser's network tab for blocked requests
Some ad blockers may interfere - try disabling temporarily
Ensure your domain isn't blocking third-party scripts

Styling conflicts

The widget is isolated but some CSS frameworks may conflict
Try the iframe method if you have styling issues
Contact support for help with specific platforms

Next Steps

Quote Widget

Add instant quote functionality to your website with the embeddable quote widget.

Customization

Customize the appearance and behavior of your Quote Widget.