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

# Customization

> How to customize the logaflow widget

## General

To customize your widget you must access your project's [widget page](https://app.logaflow.com/workspace/widget)

<img src="https://mintcdn.com/logaflow/sVTXw2Y0YzW6aUvU/images/customization.png?fit=max&auto=format&n=sVTXw2Y0YzW6aUvU&q=85&s=a47e64ddc2e65ee97a29cf271549933f" className="h-48 object-cover rounded" width="1459" height="923" data-path="images/customization.png" />

### 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](/feedback/details.mdx) 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.

<Note>Logaflow does not capture sensitive information from requests.</Note>

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

<Steps>
  <Step title="Pass useCustomTrigger prop">
    ```tsx theme={null}
    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>
    )
    ```
  </Step>

  <Step title="Use widget hook in your custom trigger">
    ```tsx theme={null}
    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>
    }
    ```
  </Step>

  <Step title="Using your custom trigger">
    <Info>
      **Example** importing and using custom trigger
    </Info>

    ```tsx theme={null}
    import { Outlet } from 'react-router-dom'

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

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

    export default PrivateLayout
    ```
  </Step>
</Steps>

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

<img src="https://mintcdn.com/logaflow/sVTXw2Y0YzW6aUvU/images/identify.png?fit=max&auto=format&n=sVTXw2Y0YzW6aUvU&q=85&s=665346154a074b55bfe5f0e76c0cc6a3" alt="Logaflow identify" width="996" height="538" data-path="images/identify.png" />

### How identify user using react

Use useLogaflowIdentify hook

```tsx theme={null}
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

```html theme={null}
<!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("user@email.com"); // this params only receive string
    </script>
  </body>
</html>
```