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.
- Required Insurance
- Optional Insurance
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
- JavaScript
- Python
- PHP
- Java
- Ruby
- C#
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'
const response = await fetch('https://api.verticalinsure.com/v1/auth/partner/secret', {
method: 'POST',
headers: {
'Authorization': `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
'Content-Type': 'application/json'
}
});
const data = await response.json();
const partnerClientSecret = data.secret;
import requests
import base64
# Encode credentials
credentials = f"{CLIENT_ID}:{CLIENT_SECRET}"
encoded_credentials = base64.b64encode(credentials.encode()).decode()
# Make request
response = requests.post(
'https://api.verticalinsure.com/v1/auth/partner/secret',
headers={
'Authorization': f'Basic {encoded_credentials}',
'Content-Type': 'application/json'
}
)
data = response.json()
partner_client_secret = data['secret']
$credentials = base64_encode($CLIENT_ID . ':' . $CLIENT_SECRET);
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => 'https://api.verticalinsure.com/v1/auth/partner/secret',
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_HTTPHEADER => array(
'Authorization: Basic ' . $credentials,
'Content-Type: application/json'
),
));
$response = curl_exec($curl);
curl_close($curl);
$data = json_decode($response, true);
$partner_client_secret = $data['secret'];
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.net.URI;
import java.util.Base64;
String credentials = CLIENT_ID + ":" + CLIENT_SECRET;
String encodedCredentials = Base64.getEncoder().encodeToString(credentials.getBytes());
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://api.verticalinsure.com/v1/auth/partner/secret"))
.header("Authorization", "Basic " + encodedCredentials)
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.noBody())
.build();
HttpResponse<String> response = HttpClient.newHttpClient()
.send(request, HttpResponse.BodyHandlers.ofString());
// Parse JSON response to get secret
String partnerClientSecret = extractSecretFromResponse(response.body());
require 'net/http'
require 'json'
require 'base64'
uri = URI('https://api.verticalinsure.com/v1/auth/partner/secret')
credentials = Base64.strict_encode64("#{CLIENT_ID}:#{CLIENT_SECRET}")
req = Net::HTTP::Post.new(uri)
req['Authorization'] = "Basic #{credentials}"
req['Content-Type'] = 'application/json'
res = Net::HTTP.start(uri.hostname, uri.port, use_ssl: true) do |http|
http.request(req)
end
data = JSON.parse(res.body)
partner_client_secret = data['secret']
using System.Net.Http.Headers;
using System.Text;
using System.Text.Json;
var credentials = Convert.ToBase64String(
Encoding.ASCII.GetBytes($"{clientId}:{clientSecret}"));
using HttpClient client = new();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", credentials);
var response = await client.PostAsync(
"https://api.verticalinsure.com/v1/auth/partner/secret",
new StringContent("", Encoding.UTF8, "application/json"));
var json = await response.Content.ReadAsStringAsync();
var data = JsonSerializer.Deserialize<Dictionary<string, string>>(json);
var partnerClientSecret = data["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.
- JavaScript
- React
- Vue
<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>
import { VerticalInsure } from '@vertical-insure/embedded-offer-react'
export default function App() {
return (
<VerticalInsure
onOfferStateChange={(offerState) => console.log(offerState)}
config={{
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"
}
}
}}
/>
)
}
<script lang="ts" setup>
import { ref } from 'vue'
import { VerticalInsure } from "@vertical-insure/embedded-offer-vue";
const config = ref({
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"
}
}
})
</script>
<template>
<div>
<VerticalInsure :config="config" />
</div>
</template>
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.
// Listen for when event changes
window.addEventListener("event_insurance_requirements_state_change", (e) => {
console.log("Event Id:", e.detail.event.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.
- JavaScript
- React
- Vue
<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: {
"name": "Test Exhibitor",
"street": "123 Main St",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "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_********************************",
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: {
"name": "Test Exhibitor",
"street": "123 Main St",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "US"
}
}
}}
/>
)
}
<script lang="ts" setup>
import { ref } from 'vue'
import { VerticalInsure } from "@vertical-insure/embedded-offer-vue";
const config = ref({
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: {
"name": "Test Exhibitor",
"street": "123 Main St",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "US"
}
}
})
</script>
<template>
<div>
<VerticalInsure :config="config" />
</div>
</template>
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.
// Listen for when event changes
window.addEventListener("event_exhibitor_liability_state_change", (e) => {
console.log("Event Exhibitor Id:", e.detail.event_exhibitor.id);
console.log("Status:", e.detail.event_exhibitor.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.
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).