Getting Started

Installation

Instalace pomocí různých správců balíčků:

bun add fubi

pnpm add fubi

yarn add fubi

npm install fubi

In your project

import { fubi } from "fubi";

// default values
const app = fubi({
	project: "my-project", // *required: name of your project from the admin
	content: "body", // selector where you can comment
	ignore: ["div", "path"], // array of elements to ignore
	target: "html", // where to mount the fubi container
	});

Activation

To open the Fubi feedback interface, simply add the fubi parameter to your URL:

https://yourwebsite.com/?fubi

Helper Classes

Fubi provides several helper classes to control which elements can be selected for feedback:

• fubi-ignore Add this class to any element you want Fubi to ignore. The element itself won't be selectable for feedback, but any children inside will.
• fubi-ignore-all Add this class to a container element to make all of its contents unselectable. This is useful for UI components that shouldn't receive feedback.
• fubi-ignore-stop This class can be used inside a fubi-ignore-all container to re-enable element selection. Any element with this class (and its children) will be selectable again, effectively stopping the ignore behavior.

Example usage:

<!-- Regular element that can be selected -->
					<div>This element can be selected</div>
					
					<!-- Single element that can't be selected -->
					<div class="fubi-ignore">This element can't be selected</div>
					
					<!-- Container where nothing can be selected -->
					<ul class="fubi-ignore-all">
					<li>Can't be selected</li>
					<li>Can't be selected</li>
					<!-- This element and its children become selectable again -->
					<li class="fubi-ignore-stop">
					<a href="/page">This can be selected</a>
					</li>
					</ul>
				

Getting Started

To use Fubi, you'll need to create an account at fubi.dev where you can set up your projects and manage your feedback.