Event Host Cancellation
Overview
The Event Host Cancellation component is a slight variant of our other components due to the nature of the product offering. There are a number of underwriting questions that the customer will need to answer before a quote can be generated. These questions are built into the component to make integrating with this product easier.
Type definitions
Pass configuration under component_config.event_cancellation. The shape matches EventCancellationConfig from the embedded offer packages (@vertical-insure/embedded-offer, @vertical-insure/embedded-offer-react, @vertical-insure/embedded-offer-vue). The Customer type is the shared customer object exported from those packages.
export type EventCancellationAddon =
| "winter_weather"
| "windstorm"
| "earthquake"
| "nonappearance"
| "full_terrorism";
export type EventCancellationEvent = {
event_id?: string;
event_name?: string;
event_type?: string;
event_start_date?: string;
event_end_date?: string;
event_country?: string;
event_state?: string;
event_city?: string;
event_venue?: string;
event_situation?: string;
gross_revenue?: number;
costs_and_expenses?: number;
basis_of_indemnity?: string;
max_daily_attendees?: number;
};
export interface EventCancellationConfig {
/**
* Addon options to provide to the user.
*/
addons?: EventCancellationAddon[];
customer: Customer;
event: EventCancellationEvent;
metadata?: Record<string, string>;
}Setup
There are a number of fields that can be pre-populated on the component. If there is a value for the field within component_config.event_cancellation, we will use that value and an input for the field will not be rendered. From the setup below, we provide event_city, so that field is not shown. However, since event_type is omitted, the example renders an event type select input.
Optional add-on coverages can be listed under addons; each entry must be an EventCancellationAddon value.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script>
</head>
<body>
<div id="insurance-requirements"></div>
<script>
new VerticalInsure("#insurance-requirements", {
client_id: "test_********************************",
component_type: "event.cancellation",
component_config: {
event_cancellation: {
addons: ["earthquake", "windstorm", "winter_weather", "nonappearance", "full_terrorism"],
customer: {
email_address: "john@example.com",
first_name: "John",
last_name: "Doe",
state: "MN",
street: "123 street",
postal_code: "55432",
phone_number: "1111111111",
city: "Minneapolis"
},
event: {
event_name: "Test Event",
event_start_date: "2025-12-24",
event_end_date: "2025-12-26",
event_venue: "Special Events",
event_city: "Minneapolis",
event_country: "US"
}
}
}
}, {
onChange: (event) => {
console.log(event);
}
});
</script>
</body>
</html>Listening for events
The other change related to this component is with the events that are triggered. With this component, the events are fired as state-change events, rather than offer-state-change events as documented in the usage examples. You'll note the reference to the onChange handler in the above example code. You can also listen to these events through the standard addEventListener method.
window.addEventListener("state-change", (e) => {
console.log("Offers:", JSON.stringify(e.detail.quotes));
});