Travel Example

Basic Example

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: {
          "travel": [{
            "customer": {
              "email_address": "test01@verticalinsure.com",
              "first_name": "James",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55432"
            },
            "attributes": {
              "trip_end_date": "YYYY-MM-DD",
              "trip_start_date": "YYYY-MM-DD",
              "initial_deposit_date": "YYYY-MM-DD",
              "trip_cost": 50000,
              "destination_countries": ['US']
            }
          }],
        }
      }, 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: {
          "travel": [{
            "customer": {
              "email_address": "test01@verticalinsure.com",
              "first_name": "James",
              "last_name": "Doe",
              "state": "MN",
              "postal_code": "55432"
            },
            "attributes": {
              "trip_end_date": "YYYY-MM-DD",
              "trip_start_date": "YYYY-MM-DD",
              "initial_deposit_date": "YYYY-MM-DD",
              "trip_cost": 50000,
              "destination_countries": ['US']
            }
          }],
        }
      }}
    />
  )
}

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

const config = ref({
  client_id: "test_********************************",
  product_config: {
    "travel": [{
      "customer": {
        "email_address": "test01@verticalinsure.com",
        "first_name": "James",
        "last_name": "Doe",
        "state": "MN",
        "postal_code": "55432"
      },
      "attributes": {
        "trip_end_date": "YYYY-MM-DD",
        "trip_start_date": "YYYY-MM-DD",
        "initial_deposit_date": "YYYY-MM-DD",
        "trip_cost": 50000,
        "destination_countries": ['US']
      }
    }],
  }
})
</script>

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

Basic Example​

Basic Example