​
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:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- Logaflow widget script -->
    <script
      type="module"
      crossorigin="true"
      async
      src="https://widget.logaflow.com/addons/logaflow-widget.umd.js?version=1.0.0"
    ></script>
  </head>

  <body>
    <!-- Add Logaflow widget web component to the top of your -->
    <logaflow-widget
      project-key="YOUR_LOGAFLOW_PROJECT_TOKEN_HERE"
      trigger-text="Feedback"
    ></logaflow-widget>

    ...
  </body>
</html>

You must replace YOUR_LOGAFLOW_PROJECT_TOKEN_HERE with your project token. You can find and copy your token on the project settings page.

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

1

Install Logaflow package

npm i @logaflow/react

or using yarn

yarn add  @logaflow/react
2

Import Logaflow's widget in your application

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(
  <React.StrictMode>
    <>
      {/* Add the logaflow widget to the top of your react project */}
      <LogaflowWidget projectKey={YOUR_PROJECT_TOKEN} />
      <AppRoot />
    </>
  </React.StrictMode>
)

You can change the import location if you prefer

3

All ready!

The logaflow feedback widget will now appear in your project

​
Next 14 installation

1

Install Logaflow package

npm i @logaflow/next

or using yarn

yarn add  @logaflow/next
2

Import Logaflow's widget in your application

// 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 (
    <html lang="en">
      <body className={inter.className}>
        {/* adding logaflow in the scope of where you want it to appear on the top of your project */}
        <LogaflowWidget projectKey="PROJECT_TOKEN" />
        {children}
      </body>
    </html>
  );
}

You can change the import location if you prefer

3

All ready!

The logaflow feedback widget will now appear in your project

QuickstartCustomization