Multiple Products Example

Basic Example

The embedded offer can render multi-product offers for your customers. An example of this is offering Sports Injury Coverage along with Refund Protection.

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: {
          "gap-medical": [{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "John",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "coverage_end_date": "2025-06-25",
              "coverage_start_date": "2025-01-25",
              "coverage_type": "SOCCER",
              "covered_person": {
                "birth_date": "2010-07-05",
                "state": "MN",
                "first_name": "John",
                "last_name": "Doe",
                "street": "NA"
              }
            }
          }],
          "registration-cancellation": [{
            "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": "John",
                "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: {
          "gap-medical": [{
            "customer": {
              "email_address": "user@example.com",
              "first_name": "John",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55414"
            },
            "policy_attributes": {
              "coverage_end_date": "2025-06-25",
              "coverage_start_date": "2025-01-25",
              "coverage_type": "SOCCER",
              "covered_person": {
                "birth_date": "2010-07-05",
                "state": "MN",
                "first_name": "John",
                "last_name": "Doe",
                "street": "NA"
              }
            }
          }],
          "registration-cancellation": [{
            "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": "John",
                "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: {
    "gap-medical": [{
      "customer": {
        "email_address": "user@example.com",
        "first_name": "John",
        "last_name": "Doe",
        "state": "MN",
        "postal_code": "55414"
      },
      "policy_attributes": {
        "coverage_end_date": "2025-06-25",
        "coverage_start_date": "2025-01-25",
        "coverage_type": "SOCCER",
        "covered_person": {
          "birth_date": "2010-07-05",
          "state": "MN",
          "first_name": "John",
          "last_name": "Doe",
          "street": "NA"
        }
      }
    }],
    "registration-cancellation": [{
      "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": "John",
          "last_name": "Doe"
        }
      }
    }]
  }
})
</script>

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

Basic Example​

Basic Example