Integrate Citta Biz App

Prerequisite

You should be logged in into Banyan Tree Tenant in Citta.

Create a new React Application

You can create a new React application in a few common ways. Today, the recommended approach is Vite (faster, simpler, and modern).

1️⃣ Prerequisites

Make sure Node.js ≥ 20 is installed:

node -v

---

2️⃣ Create a React app using Vite

npm create vite@latest my-react-app

You’ll be prompted to choose:

• Framework → React

• Variant → React + TypeScript (recommended) or React (JS)

---

3️⃣ Install dependencies

cd my-react-app
npm install

---

4️⃣ Start the development server

npm run dev

Your app will run at:

http://localhost:5173

Install Custom App Api

You can install custom App Api by running following command in your project root:

npm install @cittaai/custom-app-api

Create a button to open the biz-app

Here is a clean and correct way to do this in React.

const OPEN_URL =
  "https://terrascope.qa1.cittadata.com/datatypes/zpsa_40000067_40000067_40004370/app-web/custom-app/40000598/landing/index.html";

export function OpenAppButton() {
  const handleClick = () => {
    window.open(OPEN_URL, "_blank", "noopener,noreferrer");
  };

  return (
    <button onClick={handleClick}>
      Open App
    </button>
  );
}

Clicking on the "Open App" button should redirect to the biz-app.