Current Version

Overview

The Cuvrd subscription quote panel widget is a lightweight, low-code embeddable widget that gives your customers the ability to get a subscription VSC quote directly on your website.

Your customer enters their vehicle and gets an instant quote — right on your website.

If they choose to purchase, only then are they directed to the checkout process on your co-branded sales website.

Our goal was to make it as simple as possible for you to add VSC quoting functionality to your website with minimal to zero tech resources required.

Is it difficult to use the widget?

Not at all.

The subscription quote panel widget is a super-easy to deploy.

You simply paste a few lines of code to your website, and you're done.

The quote panel widget can be rendered in any container on any page of your website, allowing your customers to get VSC pricing without leaving your environment.

The widget is highly customizable, allowing you to control the look and feel of the widget to match your website's design.

You can run the widget directly from our servers or download the code and serve it up from your own website.

Can I See an Example?

Of course.

Here's a basic example along with the code used to generate it:

                <link rel="stylesheet" href="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/style.css" />
<script type="module" src="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/cuvrd-widget.es.js"></script>
<script type="module">
 const widget = new CuvrdWidget({
    container: '#widget-example',
    env: 'demo',
	apiKey: 'CV.KbHvHnUrPUs1UcPuep.OFwBG24zLxRudK61Sy',
	whitelabel: 'api-testing-website',
  style: {}
  });
</script>
              

Placement

The quoting widget is designed to work in full-width containers such as hero blocks.

The widget will display in desktop mode with the selectors arranged horizontally when the viewport is 768px wide and above.

For viewports below 768px, the selectors will appear in mobile mode and be arranged vertically.

Please note that the above widths are based on the viewport, not the container. Containers that are less than the full width of the viewport can cause the year and mileage inputs to be clipped at the ends.

Usage

You can download and host the widget on your own servers or use the widget directly from our servers.

Each method has its advantages — self hosting may render the widget quicker, but using our CDN will ensure you have the most recent release.

The widget can be downloaded here. Simply download, and unzip to a folder on your web server.

Reference the downloaded module and the associated base CSS with the following HTML before you call the widget:

To use the widget directly from our servers, simply include the following code in your HTML file before you call the widget:

Note: The widget can only be called once per page. You cannot render the widget in multiple divs on a single page, even if you call with different variable names assigned to different ids.

Barebones Example

Here's a barebones example of how to use the widget:

                <link rel="stylesheet" href="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/style.css" />
<script type="module" src="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/cuvrd-widget.es.js"></script>
<script type="module">
 const widget = new CuvrdWidget({
    container: '#id-of-your-container',
    env: 'prod',
	apiKey: 'your-api-key-here',
	whitelabel: 'your-whitelabel-here',
    style: {}
  });
</script>
              

Fancy CSS Example

Here's an example with some fancy CSS applied:

                <link rel="stylesheet" href="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/style.css" />
<script type="module" src="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/cuvrd-widget.es.js"></script>
<script type="module">
 const widget = new CuvrdWidget({
    container: '#id-of-your-container',
    env: 'prod',
	apiKey: 'your-api-key-here',
	whitelabel: 'your-whitelabel-here',
        style: {
          font: 'audiowide',
          bgColor: 'rgba(207, 226, 255, .7)',
          primaryColor: '#0345A0',
          secondaryColor: 'red',
          buttonTextColor: '#ffffff',
        }
  });
</script>
              

See the CSS styling section below for more information on how to customize the look and feel of the widget.

Testing

To quickly test, you can use our testing API credentials, and put it in a full-width container with an ID of cuvrd-widget.

Use this API key:

And this white-label id:

                <link rel="stylesheet" href="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/style.css" />
<script type="module" src="https://widget.cuvrd.com/vsc-quote-panel@1.0/dist/cuvrd-widget/cuvrd-widget.es.js"></script>
<script type="module">
 const widget = new CuvrdWidget({
    container: '#widget-example',
    env: 'demo',
	apiKey: 'CV.KbHvHnUrPUs1UcPuep.OFwBG24zLxRudK61Sy',
	whitelabel: 'api-testing-website',
  style: {}
  });
</script>
              

Note: Don't forget to define the environment as 'demo'!

Configuration