Installation

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

Install Logaflow package

npm i @logaflow/react

or using yarn

yarn add  @logaflow/react

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

All ready!

The logaflow feedback widget will now appear in your project

Next 14 installation

Install Logaflow package

npm i @logaflow/next

or using yarn

yarn add  @logaflow/next

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

All ready!

The logaflow feedback widget will now appear in your project

Get Started

Widget

Integrations

HTML installation

React installation

Next 14 installation

​HTML installation

​React installation

​Next 14 installation

HTML installation

React installation

Next 14 installation