Multiple Events Example w/ Refund Protection

Basic Example

If you have multiple events for a single participant, or multiple events and multiple participants, the embedded offer will flex to show this in a user-friendly way.

JavaScript
React
Vue

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

    <script>
      new VerticalInsure("#offer", {
        client_id: "test_********************************",
        product_config: {
          "registration-cancellation": [{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "James",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "event_end_date": "2025-06-25",
              "event_start_date": "2025-01-25",
              "insurable_amount": 10000,
              "participant": {
                "first_name": "John",
                "last_name": "Doe"
              }
            }
          },{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "John",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "event_end_date": "2025-06-25",
              "event_start_date": "2025-01-25",
              "insurable_amount": 10000,
              "participant": {
                "first_name": "Jane",
                "last_name": "Doe"
              }
            }
          }]
        }
      }, function(offerState) {
         console.log(offerState)
      });
    </script>
  </body>
</html>

import { VerticalInsure } from '@vertical-insure/embedded-offer-react'

export default function App() {

  return (
    <VerticalInsure
      onOfferStateChange={(offerState) => console.log(offerState)}
      config={{
        client_id: "test_********************************",
        product_config: {
          "registration-cancellation": [{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "James",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "event_end_date": "2025-06-25",
              "event_start_date": "2025-01-25",
              "insurable_amount": 10000,
              "participant": {
                "first_name": "John",
                "last_name": "Doe"
              }
            }
          },{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "John",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "event_end_date": "2025-06-25",
              "event_start_date": "2025-01-25",
              "insurable_amount": 10000,
              "participant": {
                "first_name": "Jane",
                "last_name": "Doe"
              }
            }
          }]
        }
      }}
    />
  )
}

<script lang="ts" setup>
import { ref } from 'vue'
import { VerticalInsure } from "@vertical-insure/embedded-offer-vue";

const config = ref({
  client_id: "test_********************************",
  product_config: {
    "registration-cancellation": [{
      "customer": {
        "email_address": "user@example.com",
        "first_name": "James",
        "last_name": "Doe",
        "state": "MN",
        "postal_code": "55414"
      },
      "policy_attributes": {
        "event_end_date": "2025-06-25",
        "event_start_date": "2025-01-25",
        "insurable_amount": 10000,
        "participant": {
          "first_name": "John",
          "last_name": "Doe"
        }
      }
    },{
      "customer": {
        "email_address": "user@example.com",
        "first_name": "John",
        "last_name": "Doe",
        "state": "MN",
        "postal_code": "55414"
      },
      "policy_attributes": {
        "event_end_date": "2025-06-25",
        "event_start_date": "2025-01-25",
        "insurable_amount": 10000,
        "participant": {
          "first_name": "Jane",
          "last_name": "Doe"
        }
      }
    }]
  }
})
</script>

<template>
  <div>
    <VerticalInsure :config="config" />
  </div>
</template>

Basic Example​

Basic Example