Add LOG to your product

LOG gives people a small feedback tool inside your website. They can describe a problem, attach screenshots or video, and record up to 60 seconds of their screen where the browser supports it. They can minimize the tool while continuing to use the product.

Start at Connect LOG. The first tab contains a prompt for your coding assistant, with real source links and your selected theme and position. You can explore the demo and download source without signing in.

Create a connection

Sign in, enter the product name and its allowed website origins. Use exact origins such as https://example.com and http://localhost:3000, including ports. HTTPS is required except for localhost. Paths and wildcards are not origins. Add up to eight origins per product and twenty products per account.

The resulting project ID is public and submit-only. It cannot read reports. Choose the connection on the setup page to populate all installation examples. A paused connection rejects new submissions.

React and Next.js

Download LogFeedback.tsx into your own components directory. This is a source component, not an npm package. It uses React's effect lifecycle, includes the client directive for Next.js, and removes its widget on unmount, including Strict Mode cleanup.

Import it from your actual component path and mount it once alongside the existing application content. In Next.js App Router put it inside the existing root layout's body after children. Keep the layout as a server component.

import { LogFeedback } from './components/LogFeedback';

// Inside the existing app or layout:
<LogFeedback
  projectId="YOUR_PROJECT_ID"
  theme="light"
  position="right"
/>

Replace YOURPROJECTID with your connection ID. Do not mount a second script integration alongside the component.

Plain script

Add once before the closing body tag:

<script defer
  src="https://app.logishell.com/log-feedback.js"
  data-project="YOUR_PROJECT_ID"
  data-theme="light"
  data-position="right">
</script>

JavaScript and other frameworks

Download log-feedback.mjs and its TypeScript declarations beside it. Call mountLogFeedback in the browser mount hook. Use the returned destroy method in the matching cleanup hook.

import { mountLogFeedback } from './log-feedback.mjs';

const log = mountLogFeedback({
  projectId: 'YOUR_PROJECT_ID',
  theme: 'light',
  position: 'right',
});
log.ready.catch(console.error);

// In your unmount hook:
// log.destroy();

The handle exposes ready, open, close and destroy. Open and close wait for the script to load. Do not call mount during server rendering. The classic script also exposes window.LOGFeedback after the log-feedback:ready event. Only one widget is mounted per page.

Customize

Themes are light, dark or system. Positions are left or right. Set the React or module props, or use data-theme and data-position on the script. System theme is resolved when LOG mounts. The component also accepts baseUrl for a separately hosted LogiShell installation.

The widget uses a shadow root to keep its styles separate from your application. For Content Security Policy, allow https://app.logishell.com in script-src and connect-src, and blob: in img-src and media-src. If your policy uses nonces, pass the existing nonce prop to the component/module or put nonce and data-style-nonce on the script. Keep your existing policy; do not disable it to install LOG.

Media and privacy

Capture only starts when a person presses Record and selects a screen through the browser. There is no automatic recording or microphone capture. Recording minimizes the panel; the launcher becomes a Stop control. People review or remove attachments before submitting. Nothing is uploaded until Send.

The widget accepts up to four PNG, JPEG, WebP, MP4, MOV or WebM attachments, with 32 MB total per report and a recording limit of 60 seconds. Browsers without screen capture can attach a previously recorded video. This integration supports websites and web views; it is not a native mobile SDK.

A report includes its message, selected files, product name, origin and page path. URL queries and fragments are omitted. Reports and media are private to the connection owner and the LogiShell team. The public project ID cannot retrieve them. Files are validated on the server. Collection is limited to six reports per minute and one hundred per day per product, with a 512 MB media quota per owner.

LogiShell's own desktop and mobile apps expose feedback inside LOG. Their internal capture uses the platform's screen recording or screenshot tools, with the same deliberate send and review flow. On mobile, minimize the draft to continue using the app.

Verify your integration

Open an allowed origin. Open LOG, type a note, minimize it, navigate, and confirm there is no duplicate widget. Attach a test screenshot or explicitly record test content, review it, then send. In LogiShell open LOG → Feedback and find the report under your product name. Check both desktop and mobile layouts.

If submission fails, check the connection is active, the exact origin and port are listed, and the report fits the limits. A project ID is not a read credential. To view reports, sign in to the account that created the connection. If the launcher does not appear, verify the ID, browser console, script URL and Content Security Policy.