Skip to main content

Web Component Installation & Usage

Vertical Insure provides a simple set of web components for retrieving insurance quotes in your checkout page.

Latest Web Component Version

npm version

See all versions

Including from CDN

We provide a non-bundled and bundled version of our web component module to. We recommend only using the non-bundled approach for testing as the user will need to download every javascript dependency from the CDN as well. You should always reference a specific version as pulling the latest could result in pulling in breaking changes.

<script src="{VERSION}/index.bundle.js"></script>

Installing into a javascript project

You can install the web component into any javascript module using

npm install @vertical-insure/web-components

And depending on the framework you are using, you can simply import the module and you'll be able to use in standard HTML or JSX.

import "@vertical-insure/web-components";


All of our web components require a client-id attribute. This value is part of your API credentials and comes from generating API keys. See Authentication for more details.

Getting the quote information

const insuranceComponent = document.querySelector('registration-cancellation');


Validation for forms

Some components are defined as "required" and will need to be validated. For example, a component with a radio form input would require a selection "yes" or "no"

Every components validation is updated as the component changes and isValid can be determined based on the change event defined below.

const insuranceComponent = document.querySelector('registration-cancellation');

const validation = insuranceComponent.validate();

if (validation.isValid) {

Event Listeners


The offer-state-change is a CustomEvent and will contain the following:

detail: {
quote: {...},
selectedState: 'string' // this can be either ACCEPTED, DECLINED, UNKNOWN

This event is triggered whenever a quote is updated or when a user takes action within the component.

const insuranceComponent = document.querySelector('registration-cancellation');

insuranceComponent.addEventListener('offer-state-change', function(event) {
if (event.detail.selectedState === "ACCEPTED") {
addInsuranceToCart(event.detail.quote.quote_id, event.detail.quote.premium_amount);


You can also set the debug flag on any component to get events logged to the console in your web browser.

<registration-cancellation ... debug="true"></registration-cancellation>