Renters Insurance Example
Renters insurance can be offered as required coverage or as an optional add-on. Set component_type to renters to load the renters layout. Use component_config.renters.show_decline to show a decline option (defaults to false). Use component_config.renters.show_upload to show third-party policy upload (defaults to true). selection_mode controls whether checkout requires a decision ("required" or omitted) or can proceed with none ("optional"). These flags are independent: the Optional example sets show_decline: true and keeps selection_mode: "required".
Quote requests use the v2 attributes object. customer is required and must include first_name, last_name, email_address, phone_number, and birth_date. coverage_end_date must be 355 to 375 days after coverage_start_date. Partners may pre-answer any subset of the underwriting questions (true/false); null or omitted fields are filled with eligible defaults (all false) for the initial quote, then asked in the UI. Eligible answers are false for every question. You can also include interested_parties for landlords or property managers — these are not collected in the component. name is required; email_address and address fields are optional. See the quote renters page for the full schema.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@vertical-insure/embedded-offer"></script>
</head>
<body>
<div id="offer"></div>
<script>
new VerticalInsure("#offer", {
client_id: "test_********************************",
component_type: "renters",
// Omit selection_mode or set to "required" so the customer must
// choose coverage, decline (if shown), or upload proof (if shown).
selection_mode: "required",
component_config: {
renters: {
// false (default): hide decline. true: show the decline radio.
show_decline: false,
// true (default): show upload proof. false: hide it.
show_upload: true
}
},
payments: {
enabled: true,
button: true
},
product_config: {
"renters": [{
"customer": {
"email_address": "test01@verticalinsure.com",
"first_name": "James",
"last_name": "Doe",
"state": "MN",
"postal_code": "55432",
"phone_number": "1111111111",
"birth_date": "1990-01-15"
},
"attributes": {
"coverage_start_date": "YYYY-MM-DD",
"coverage_end_date": "YYYY-MM-DD",
"rental_type": "SINGLE_FAMILY_HOME",
"property_address": {
"street": "123 Main St",
"suite_or_unit": "Apt 4B",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55432",
"country": "US"
},
"interested_parties": [{
"name": "Sunrise Property Management",
"email_address": "notices@sunrise.example",
"street": "100 Landlord Ave",
"city": "Minneapolis",
"state": "MN",
"postal_code": "55401",
"country": "US"
}],
// Partner may pre-answer any subset (true/false). Null/omitted fields
// are filled with eligible defaults for the initial quote, then asked in UI.
"additional_questions": {
"felony_conviction": null,
"mobile_home_or_similar": null,
"property_safety_exclusions": null,
"dwelling_safety_exclusions": null
}
}
}],
}
}, function(offerState) {
console.log(offerState)
});
</script>
</body>
</html>Listening for events
Customers can upload proof of an existing renters policy from the offer. Set component_config.renters.show_upload to false to hide the upload link and form; omit the flag or set it to true to keep upload available.
If quoting fails and upload is enabled, the component still fires offer-ready and shows the upload flow, so you should not hide the iframe. If upload is disabled, quote failure reports no offers available.
A successful upload emits third-party-policy-upload. The same payload is also delivered through onChange; use product: "renters" to distinguish it from other onChange events. The detail object includes upload_id, url, status: "confirmed", and optional policy fields (carrier, policy_number, liability_amount_cents, effective_date, expiration_date, property_address). See Listening for Events.
window.addEventListener("third-party-policy-upload", (e) => {
console.log(e.detail);
});