> ## Documentation Index
> Fetch the complete documentation index at: https://docs.logaflow.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Now that you already have an account and a project on Logaflow, it's time to install the widget to start receiving feedback from your users.
## HTML installation
General installation, the Logaflow widget is a web component that you can install in your project/product using HTML + javascript code. You can add this code to any page where you want to use the widget, see example below:
```html theme={null}
...
...
```
You must replace **YOUR\_LOGAFLOW\_PROJECT\_TOKEN\_HERE** with your project token.
You can find and copy your token on the [project settings
page](https://app.logaflow.com/workspace/settings).
The **trigger-text** property is the text that appears on the button that
opens the feedback popup for the user, you can change it to the text you
prefer.
## React installation
```shell theme={null}
npm i @logaflow/react
```
or using yarn
```shell theme={null}
yarn add @logaflow/react
```
```tsx theme={null}
import React from 'react'
import ReactDOM from 'react-dom/client'
import { LogaflowWidget } from '@logaflow/react'
import '@/styles/globals.css'
import AppRoot from './app.root.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<>
{/* Add the logaflow widget to the top of your react project */}
)
```
You can change the import location if you prefer
The logaflow feedback widget will now appear in your project
## Next 14 installation
```shell theme={null}
npm i @logaflow/next
```
or using yarn
```shell theme={null}
yarn add @logaflow/next
```
```tsx theme={null}
// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { LogaflowWidget } from "@logaflow/next"
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{/* adding logaflow in the scope of where you want it to appear on the top of your project */}
{children}
);
}
```
You can change the import location if you prefer
The logaflow feedback widget will now appear in your project