Event Host Liability Rental Coverage
Overview
The Event Host Liability Rental Coverage component is a variant of our event components due to the nature of the product offering. There are a number of attributes that may not exist in your platform in addition to underwriting questions that the customer will need to answer before a quote can be generated. Collection of this data is built into the component to make integrating with this product easier.
Setup
Event Start Date, Event End Date and Event Location are required to use the component. Other fields, including Event Type, Max Event Attendees, and underwriting questions 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 display it in the form.
In addition, the configuration options for the event-host-liability-rental-coverage 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.liability_rental_coverage",
product_config: {
"event-host-liability-rental-coverage": [{
"customer": {
"email_address": "test01@verticalinsure.com",
"first_name": "John",
"last_name": "Doe",
"state": "MN",
"street": "123 street",
"postal_code": "55432",
"phone_number": "1111111111",
"city": "Minneapolis"
},
"policy_attributes": {
"number_of_events": 1,
"event_type": "ART_FESTIVAL",
"total_event_expense_budget": 50000,
"events": [{
"event_name": "Test Event",
"event_start_date": "2026-12-01",
"event_end_date": "2026-12-01",
"event_location": {
"venue_name": "Special Events",
"venue_street_address": "123 street",
"venue_state": "MN",
"venue_city": "Minneapolis",
"venue_zip_code": "55432",
"venue_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.
// Listen for state changes
window.addEventListener("state-change", (e) => {
console.log("Offers:", JSON.stringify(e.detail.quotes));
});