Skip to main content

Stay-to-Play Embedded Enablement

Overview​

The stay-to-play embedded element is generally meant to be displayed within the event administration workflow where a client is setting up an event on your platform. The component_type configuration for showing the stay-to-play admin enablement is event.room_block_protection.

The element is responsible for creating events in our system so that we have a record of the event details. When an event is first created in our system, a new event_id is generated. You will want to ensure you track this event_id in your system for future reference. The event_id is required for any subsequent API calls.

All of the core configuration properties for the embedded components are applicable to this component type, including the validation mechanism. See usage for more details.

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'

Setup​

<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.room_block_protection",
        component_config: {
          room_block_protection: {
            "housing_company": {
              "name": "Hotels-R-Us",
              "address": "123 street",
              "city": "Minneapolis",
              "state": "MN",
              "postal_code": "55432",
              "contact_email_address": "john@example.com",
              "contact_name": "John Doe"
            },
            "event": {
              "name": "Big Spectacular Baseball Tourny",
              "address": "123 street",
              "city": "Minneapolis",
              "state": "MN",
              "postal_code": "55432",
              "start_date": "2025-12-05",
              "end_date": "2025-12-07"
            }
          }
        }
      }, {
        onChange: (event) => {
          console.log(event);
        }
      });
    </script>
  </body>
</html>

Receiving Updates​

When the elements are toggled, the onChange callback will be invoked with the updated status and the event_id. The object passed on the onChange handler is as follows:

{
  "enabled": boolean;
  "event_id": string;
}

Existing Events​

If you have already displayed this element on your platform for a client creating an event, you should have stored the event_id generated by the element in your system. In order to keep track of wether or not the product is enabled for a specific event, you'll want to pass this event_id into the element configuration the next time it is rendered.

component_config: {
  room_block_protection: {
    "event_id": "1e197d45-7e17-485e-80ec-ab28e451c82e",
    "housing_company": {
      "name": "Hotels-R-Us",
      "address": "123 street",
      "city": "Minneapolis",
      "state": "MN",
      "postal_code": "55432",
      "contact_email_address": "john@example.com",
      "contact_name": "John Doe"
    },
    "event": {
      "name": "Big Spectacular Baseball Tourny",
      "address": "123 street",
      "city": "Minneapolis",
      "state": "MN",
      "postal_code": "55432",
      "start_date": "2025-12-05",
      "end_date": "2025-12-07"
    }
  }
}