​
General

To customize your widget you must access your project’s widget page

​
Log Collection

In this section you can configure which levels of console logs logaflow can capture, by default we capture them all.

​
Replay

In this section you can enable and disable the function of recording the user session for replay. By default it is active.

​
Networks

In this section you can configure the requests that can be captured by logaflow. By default all requests made are captured, you can limit this by adding the specific sources you want to monitor.
Logaflow does not capture sensitive information from requests.

​
Widget customization

​
Customize widget trigger

You can customize the trigger that opens the feedback popup. To use a customizable trigger you must first disable logaflow’s default trigger:
1

Pass useCustomTrigger prop

import React from 'react'
import ReactDOM from 'react-dom/client'

import { LogaflowWidget } from '@logaflow/react' // or import { LogaflowWidget } from '@logaflow/next' if you are using in a next project

import '@/styles/globals.css'

import AppRoot from './app.root.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
    <>
    {/* Add useCustomTrigger prop */}
    <LogaflowWidget projectKey={YOUR_PROJECT_TOKEN} useCustomTrigger />
    <AppRoot />
    </>
</React.StrictMode>
)
2

Use widget hook in your custom trigger

import { useLogaflowPopup } from "@logaflow/react" // or import { useLogaflowPopup } from '@logaflow/next'

export const CustomTriggerComponent = () => {
    const { open, isOpen } = useLogaflowPopup()
    return <button onClick={open}>{isOpen ? 'Opened' : 'Can I help you?'}</button>
}
3

Using your custom trigger

Example importing and using custom trigger
import { Outlet } from 'react-router-dom'

import { CustomTriggerComponent } from '@/components/common/custom-trigger.component'

function PrivateLayout() {
    return (
        <>
            <CustomTriggerComponent />
            <Outlet />
        </>
    )
}

export default PrivateLayout

​
Identify user

You can add an identifier to know which user is providing feedback. This identifier will appear in the feedback details on the logaflow dashboard. User ID will appear on the details screen: Logaflow identify

​
How identify user using react

Use useLogaflowIdentify hook 
import { useLogaflowIdentify } from '@logaflow/react' // or if using next: import { useLogaflowIdentify } from '@logaflow/next'

function ExampleAuthPage() {
  const { identifyUser } = useLogaflowIdentify()

  const onSubmit = () => {
    // ...

    // ... example adding user identify ...
    identifyUser(user.email)
  }
  return (
    <form>
      <input placeholder="email" type="email" />
      <input placeholder="password" type="password" />
      <button>login</button>
    </form>
  )
}

export default ExampleAuthPage

​
How identify user using html

<!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>
    <!-- Logaflow widget web component -->
    <logaflow-widget
      project-key="YOUR_LOGAFLOW_PROJECT_TOKEN_HERE"
      trigger-text="Feedback"
    ></logaflow-widget>

    ...

    <!-- Identifying the user -->
    <script>
      // When importing the Logaflow script, you will have the logaflowIdentify function globally
       window.logaflowIdentify("[email protected]"); // this params only receive string
    </script>
  </body>
</html>