Event Exhibitor Liability
The Event Exhibitor Liability components are meant to be integrated into the host and exhibitor workflows.
Overview
Gathering Insurance Requirements from the Host
The event.insurance_requirements component should be used in the event workflow and asks the host to decide whether exhibitor liability insurance should be required or optional. If the host chooses to make insurance required, they will have the option to use standard insurance requirements or customize their own.
Offering Insurance to an Exhibitor
The event.exhibitor_liability component should be used in the exhibitor workflow. The component can be used to upload a certificate of insurance or present an insurance offer depending on event configuration.
Authentication
The event exhibitor components require a partner_client_secret. The partner_client_secret is a short-lived secret that's meant to be used client-side, thereby keeping your client_secret secure on your backend.
To obtain the secret, you will need to make a call to the Vertical Insure API from your backend with your client_id and client_secret.
Obtaining Partner Client Secret
Make a POST request to /v1/auth/partner/secret with your client credentials:
curl -X POST \
-H "Authorization: Basic $(echo -n '$CLIENT_ID:$CLIENT_SECRET' | base64)" \
-H "Content-Type: application/json" \
'https://api.verticalinsure.com/v1/auth/partner/secret'Using the Partner Client Secret
Once you have obtained the partner_client_secret, you can use it in your event components:
const config = {
client_id: "your_client_id",
partner_client_secret: partnerClientSecret, // The secret obtained from the API
component_type: "event.exhibitor_liability",
// ... rest of your config
};Gathering Insurance Requirements
Embedded Component
The embedded component for gathering insurance requirements provides event hosts with a streamlined way to collect and validate exhibitor insurance information.
<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_********************************",
partner_client_secret: "your_partner_client_secret_here", // Obtain from backend using /v1/auth/partner/secret
component_type: "event.insurance_requirements",
component_config: {
event_config: {
"name": "Minneapolis Art Fair",
"street": "123 Main St",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "US",
"start_date": "2026-01-01",
"end_date": "2026-01-03"
}
}
}, function(offerState) {
console.log(offerState)
});
</script>
</body>
</html>Configuration
The event.insurance_requirements component is configured via component_config.event_config. All address and date fields are required when creating a new event (when id is omitted). If you already have a Vertical Insure event, pass its id instead and the component will update the existing record.
| Field | Type | Required | Description |
|---|---|---|---|
id | string | No | Existing Vertical Insure event ID. Omit to create a new event on load. |
name | string | Yes* | Event name. |
start_date | string | Yes* | Event start date (YYYY-MM-DD). |
end_date | string | Yes* | Event end date (YYYY-MM-DD). |
street | string | Yes* | Event street address. |
city | string | Yes* | Event city. |
state | string | Yes* | Event state. |
postal_code | string | Yes* | Event postal code. |
country | string | Yes* | Event country. |
purpose | string | No | Event purpose. Must match a value from the product schema when provided. |
event_insurance_required | boolean | No | Initial value for the "Require certificate of insurance collection" toggle. Defaults to false. When true, standard insurance requirements are selected automatically. The host can still change this setting in the UI. |
* Required when creating a new event (when id is omitted).
Setting the initial insurance requirement
If your platform already knows whether insurance should be required—for example, from a setting on the host's event record—pass event_insurance_required in event_config. The component applies this value when the event is created or updated on load.
component_config: {
event_config: {
name: "Minneapolis Art Fair",
street: "123 Main St",
city: "Minneapolis",
state: "MN",
postal_code: "55432",
country: "US",
start_date: "2026-01-01",
end_date: "2026-01-03",
event_insurance_required: true
}
}When the host changes this setting in the component, an event-insurance-requirements-state-change event is raised with the updated value in event_insurance_required. See Capturing the Event ID below.
Validation
The component exposes a validate method that can be used to see if the component is in a valid state. This method can be used when the component is rendered inside a wizard to help you decide whether to allow the user to proceed to the next step.
Capturing the Event ID
Presenting the component will cause an Event to be created in the Vertical Insure backend. You will want to store the id of this event in your backend and supply it for any future usage of both the event.insurance_requirements and event.exhibitor_liability components.
An event-insurance-requirements-state-change will be raised to provide this information. This event will also be raised when an event organizer changes whether insurance is required.
You can listen to these events using the standard addEventListener approach or framework-specific handlers.
// Listen for when event changes
window.addEventListener("event-insurance-requirements-state-change", (e) => {
console.log("Event Id:", e.detail.event_id);
console.log("Insurance Required:", e.detail.event_insurance_required);
});Offering Insurance to an Exhibitor
Embedded Component
The embedded component for offering insurance provides exhibitors with an easy way to upload their existing Certificate of Insurance (COI) or purchase Event Exhibitor Liability coverage.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script>
</head>
<body>
<div id="exhibitor-insurance"></div>
<script>
new VerticalInsure("#exhibitor-insurance", {
client_id: "test_********************************",
partner_client_secret: "your_partner_client_secret_here", // Obtain from backend using /v1/auth/partner/secret
component_type: "event.exhibitor_liability",
component_config: {
event_config: {
"id": "event_required_insurance"
},
event_exhibitor_config: {
"contact_email_address": "test01@verticalinsure.com",
"contact_first_name": "James",
"contact_last_name": "Doe",
"name": "Test Exhibitor",
"street": "123 Main St",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "US"
}
}
}, function(offerState) {
console.log(offerState)
});
</script>
</body>
</html>Configuration
The event.exhibitor_liability component is configured via component_config.event_config and component_config.event_exhibitor_config. Unlike event.insurance_requirements, this component does not create events—it requires an existing Vertical Insure event ID from the host insurance requirements flow or the Create Event API.
event_config
Pass the Vertical Insure event id from the host insurance requirements flow or the Create Event API. The component loads all event details—including whether insurance is required—from the backend.
| Field | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Vertical Insure event ID. |
Whether insurance is required or optional for the exhibitor is determined by this event's insurance_required setting in Vertical Insure, configured by the host via event.insurance_requirements or the Create Event API.
event_exhibitor_config
| Field | Type | Required | Description |
|---|---|---|---|
id | string | No | Existing Vertical Insure event exhibitor (vendor) ID. Omit to create a new exhibitor record on load. |
name | string | Yes* | Exhibitor or business name. |
legal_name | string | No | Legal business name, if different from name. |
street | string | Yes* | Exhibitor street address. |
city | string | Yes* | Exhibitor city. |
state | string | Yes* | Exhibitor state. |
postal_code | string | Yes* | Exhibitor postal code. |
country | string | Yes* | Exhibitor country. |
contact_email_address | string | Yes* | Contact email for the exhibitor. |
contact_first_name | string | Yes* | Contact first name. |
contact_last_name | string | Yes* | Contact last name. |
accepted | boolean | No | Whether the exhibitor has been accepted to the event. The component will show "Purchase on Accept" if false and "Purchase" if true or null. |
* Required when creating a new exhibitor record (when id is omitted).
component_config: {
event_config: {
id: "your-event-id"
},
event_exhibitor_config: {
name: "Acme Booth Rentals",
street: "456 Vendor Ave",
city: "Minneapolis",
state: "MN",
postal_code: "55401",
country: "US",
contact_email_address: "vendor@example.com",
contact_first_name: "Jane",
contact_last_name: "Doe"
}
}When the exhibitor's status changes, an event-exhibitor-liability-state-change event is raised. See Capturing Component State Changes below.
Capturing Component State Changes
Presenting the component will cause an Event Exhibitor to be created in the Vertical Insure backend. You will want to store the id of this event vendor in your backend and supply it for any future usage the event.exhibitor_liability component.
Additionally, an event will be raised for any changes to the status of the exhibitor. The following statuses are supported
COIValid: signifies that the user uploaded a valid Certificate of InsuranceCOIManualReview: signifies that the Certificate of Insurance could not be validated and the user has requested a manual review from the event host. In this casecoi_validation_failures: [{code: string, text: string}]array andmanual_review_request: stringwill be provided.OfferAccept: signifies that the user would like to purchase insurance. In this case aquoteobject is provided with the quote details that can be used to call the Vertical Insure Purchase API.OfferDecline: signifies that the user would like to decline insurance. This is only applicable if insurance is optional.CompleteLater: signifies that the user would like to complete the insurance process later.
You can listen to these events using the standard addEventListener approach or framework-specific handlers.
// Listen for when event changes
window.addEventListener("event-exhibitor-liability-state-change", (e) => {
console.log("Event Exhibitor Id:", e.detail.id);
console.log("Status:", e.detail.status);
});Validation
The component exposes a validate method that can be used to see if the component is in a valid state. The component is in a valid state when the status is any of the of the following: COIValid, COIManualReview, OfferAccept, OfferDecline, CompleteLater
Manual COI Review
If a user uploads an existing Certificate of Insurance (COI), the component will validate the COI against the event requirements. If the COI meets the requirements, the status will be updated to COIValid. If the COI does not meet requirements, the user can choose to purchase insurance or to request a manual review from the event organizer. In this case the status will be set to COIManualReview and a manual_review_request overview will be provided. See Capturing Component State Changes for more details. While your application can implement such a request in any manner (notifications, etc), commonly the event organizer will see such requests in a Exhibitor List.
You can update the Exhibitor Status within Vertical Insure by calling the Update Vendor Status API with a status of COIManualReviewApproved or COIManualReviewRejected. If the manual review was rejected, the user will be able to upload an updated COI or will be able to purchase coverage through Vertical Insure.
Payments
If the offering is presented outside of a purchase flow and there is no card already on file, you can enable collecting payments within the drop-in component by including the following in your config:
const config = {
payments: {
enabled: true
},
...
}Capturing Errors
Broadly speaking, there are three types of errors that can occur within the component.
- The first are user input errors that can be corrected by the user. These types of errors are handled internally by the component via UX interactions with the user.
- The second are component input errors, for example a missing event name. Since it is expected that your platform already has an event name, there is no built in UX to collect an event name. Such an error will be reported using the
onErrorhandler. - The last type of error is if something unexpected happens within the component or while calling an upstream service. These errors will also be reported using the
onErrorhandler.
You can listen to these errors using the standard addEventListener approach or framework-specific handlers.
// Listen for errors
window.addEventListener("error", (e) => {
console.log("Error:", e.detail.error);
console.log("Error Type:", e.detail.type); // 'validation' | 'server' | 'client'
console.log("Error Source:", e.detail.source);
});Obtaining Insurance Information for a List of Exhibitors
Your application may have functionality to show a list of exhibitors along with their insurance status. For such use cases, our apis that allow you to retrieve the status of a list of vendors.
This can be done in one of two ways:
- You can get details on a batch of vendors, by providing a list of Vertical Insure event exhibitor
id's returned to you by theevent.exhibitor_liabilityembedded component. - You can paginate through all vendors that exist for an event within Vertical Insure.
These apis can be used with either client_id and client_secret or partner_client_secret.
Creating an Event via API
For events where exhibitor submissions have already launched, you can create a Vertical Insure event via API. This event will have insurance_required set to false (insurance will be optional).