🚧

This is Not The Recommended Approach

The following guide displays an alternative approach on how to integrate with Livble.
To see the guide for the recommended way, click here.

💻 Code Snippet

The following snippet demonstrates how to use the Livble SDK to embed and display the Livble experience in your tenant portal without using the Livble widget.

Next, we'll go over each parameter used to configure the SDK experience.

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

const token = "...";  // get token from your backend

openExperience({token: token, environment: Environment.Production, onEvent: onLvbleEvent});

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


const token = "...";  // get token from your backend

const l = Lvble({
  environment: Environment.Production,
  onEvent: (eventType, data) => { },
});

l.open(token);

👁️ Parameters Overview

A high-level overview of each parameter. More in-depth guides are available for relevant parameters.

🚀 Launching the Livble Experience

💡 Overview:

In order to launch the Livble Experience, use the Livble SDK method openExperience() or open()
(The method's signature may vary slightly between React and Vanilla JS implementations)

🔑 What is The token And How to Get It?

The token argument in the openExperience() is an authentication token that should be retrieved for the tenant using Livble's API.

It can be retrieved as follows:

1. Make a call to Livble's API POST /tenant/portal_info/:external_id endpoint (see API reference)
2. Extract the Livble token from the response.
3. Use the Livble SDK's openExperience() method to launch the Livble Experience.
   (The method signature may vary slightly between React and Vanilla JS implementations.)

🚧

API Key Security

The POST /tenant/portal_info/:external_id call must be made from your backend.
This is because it requires the Livble API key, which should not be exposed in the frontend.