In this guide we will explain how to initialize the Livble widget for HOA users.

📘
This guide covers only the HOA-specific details for initializing the Livble Widget.
Make sure you’re familiar with the standard widget integration described in
📖 Embedding The Livble Widget & Experience

👩‍💻 Technical Details

When initializing the Livble widget for HOA users vs tenants the everything remains the same.

The only difference is the product_variant parameter which must be set to:

"hoa" for flexible HOA users.
"rent" for flexible rent users.

Below you can see the same example from 📖 Embedding The Livble Widget & Experience,
with the relevant changes for HOA users vs flexible rent users:

import { LvbleWidget, Environment, openExperienceAndSetToken } from "@lvble/react";

<LvbleWidget
    // This field should be set as "rent" or omitted entirely for flexible rent users.
    product_variant="rent"

    // These parameters remain the same:
    balance={100000}
    pms={"your_portal_name"}
    externalId={"test-tenant-id"}
    onEvent={(eventType, data) => {}}
    environment={Environment.Production}
    signature={"3cfa76ef14937c1c0ea519f8fc057a80fcd04a7420f8e8bcd0a7567c272e007b"}
    onWidgetClickCallback={() => {
      	const token = "...";  // Call Livble's API to get the token. (POST /tenant/portal_info/:id)
        openExperienceAndSetToken({token: token});
    }}
/>

import { LvbleWidget, Environment, openExperienceAndSetToken } from "@lvble/react";

<LvbleWidget
    // This field must be set as "hoa" for HOA users.
    product_variant="hoa"

    // These parameters remain the same:
    balance={100000}
    pms={"your_portal_name"}
    externalId={"test-tenant-id"}
    onEvent={(eventType, data) => {}}
    environment={Environment.Production}
    signature={"3cfa76ef14937c1c0ea519f8fc057a80fcd04a7420f8e8bcd0a7567c272e007b"}
    onWidgetClickCallback={() => {
      	const token = "...";  // Call Livble's API to get the token. (POST /tenant/portal_info/:id)
        openExperienceAndSetToken({token: token});
    }}
/>

import { Environment, Lvble } from "@lvble/core"  

const l = Lvble({
    // This field should be set as "rent" or omitted entirely for flexible rent users.
    productVariant: "rent",
  
    // These parameters remain the same:
    balance: 100000,
    pms: "your_portal_name",
    externalId: "test-tenant-id",
    onEvent: (eventType, data) => {},
    environment: Environment.Production,
    signature: "3cfa76ef14937c1c0ea519f8fc057a80fcd04a7420f8e8bcd0a7567c272e007b",
    onWidgetClickCallback: () => { 
        const token = "...";  // Call Livble's API to get the token. (POST /tenant/portal_info/:id)
        l.openExperienceAndSetToken(token);
    }
});

const widget = l.createWidget()
yourWidgetContainerElement.appendChild(widget); // Add widget to DOM

import { Environment, Lvble } from "@lvble/core"  

const l = Lvble({
    // This field must be set as "hoa" for HOA users.
    productVariant: "hoa",
  
    // These parameters remain the same:
    balance: 100000,
    pms: "your_portal_name",
    externalId: "test-tenant-id",
    onEvent: (eventType, data) => {},
    environment: Environment.Production,
    signature: "3cfa76ef14937c1c0ea519f8fc057a80fcd04a7420f8e8bcd0a7567c272e007b",
    onWidgetClickCallback: () => { 
        const token = "...";  // Call Livble's API to get the token. (POST /tenant/portal_info/:id)
        l.openExperienceAndSetToken(token);
    }
});

const widget = l.createWidget()
yourWidgetContainerElement.appendChild(widget); // Add widget to DOM