Migrating to the Drop-in Component

This document describes the steps required to move away from the Vertical Insure web component and to the Drop-in Component.

A practical example

Let's imagine you are already using the Vertical Insure web component to offer refund protection. Let's imagine you are pulling our Javascript package for the web component from the CDN by including this line in your HTML:

<script src="https://unpkg.com/@vertical-insure/web-components@{VERSION}/index.bundle.js"></script>

And then you have included the offer in the desired location by adding the HTML tags for the web component:

  <registration-cancellation
      client-id="test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ"
      customer-email-address="test01@verticalinsure.com"
      customer-first-name="John"
      customer-last-name="Doe"
      customer-state="MN"
      customer-postal-code="55414"
      insurable-amount="50000"
      event-start-date="2026-01-01"
      event-end-date="2026-01-01"
      participant-first-name="John"
      participant-last-name="Doe"
    ></registration-cancellation>

In order to migrate to the web component, you'll want to grab the embedded offer Javascript instead:

<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script>

And then, instead of including the web component element, you'll want to include an empty placeholder and then use Javascript to apply the Vertical Insure embedded offer in the placeholder element.

    <div id="offer"></div>
    <script>
      new VerticalInsure("#offer", {
        client_id: "test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ",
        product_config: {
          "registration-cancellation": [{
              "customer": {
                  "email_address": "test01@verticalinsure.com",
                  "first_name": "John",
                  "last_name": "Doe",
                  "state": "MN",
                  "postal_code": "55414"
              },
              "policy_attributes": {
                  "event_end_date": "2026-01-01",
                  "event_start_date": "2026-01-01",
                  "insurable_amount": 50000,
                  "participant": {
                      "first_name": "John",
                      "last_name": "Doe"
                  }
              }
          }]
        }
      }, function(offerState) {
         console.log(offerState)
      });
    </script>

If you have called the /v1/quote/registration-cancellation quote API before, then the contents of the product_config.registration_cancellation array should look familiar: the item inside the array is the request body for the quote API. You can refer to the [/api/quotes/quote-registration-cancellation](quote API documentation) to see what the exact names are for each field.

Generally speaking, any attribute on the web component labeled like customer-first-name will be translated to a field called first_name in the customer object, and then non-customer fields will become fields in the policy_attributes object. Additionally, underscores will be used as a separator for words instead of hyphens.

To validate the drop-in component (usually to confirm that the user has accepted or rejected the offer), you can call await verticalInsure.validate() (after saving the new VerticalInsure(...) object to the variable verticalInsure), which will return true or false, indicating whether or not validation was successful.

To get the list of quotes that the user has accepted, if any, you should listen for the offer-state-change event to get the list of accepted quotes:

window.addEventListener("offer-state-change", (e) => {
  accceptedQuotes = e.detail.quotes;
});

Note that the third argument to the new VerticalInsure() constructor is an event listener function which will receive offer-state-change events, so you can use that instead of adding a new listener if you prefer.

Once you have the accepted quotes, you can purchase them using the purchase API as you have been doing previously.