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.
Setup
There are a number of fields that can be pre-populated on the component. If there is a value for the field within the product config, we will use that value and an input for the field will not be rendered. From the setup below, you can see we are providing event_state, so this field is not rendered in the example below. However, since we are missing event_type, the example will render an event type select input.
In addition, the configuration options for the event-host-cancellation product config can be found on the quote documentation page.
<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",
product_config: {
"event-host-cancellation": [{
"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"
},
"policy_attributes": {
"events": [{
"event_name": "Test Event",
"event_start_date": "2025-12-24",
"event_end_date": "2025-12-26",
"event_venue": "Special Events",
"event_state": "MN",
"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));
});