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