import Analytics from "./analytics.webp";
import FormBuilder from "./form-builder.webp";
import integrations from "./integrations.webp";
import Targeting from "./targeting.webp";
import Trigger from "./trigger.webp";

import { MdxImage } from "@/components/MdxImage";

export const metadata = {
  title: "Formbricks Components Overview",
  description:
    "Formbricks is broadly composed of four components: An open source form builder, targeting & triggers, integrations and analytics & insights.",
};

#### Introduction

# How Formbricks works

Formbricks is broadly composed of four elements, which enable gathering, analyzing and reporting of experience data:

1. **Survey builder**: Create and customize your surveys with a user-friendly, no-code interface.
2. **Targeting & Triggers**: Define user segments based on attributes and set event-based triggers to display your surveys to the right users at the right time.
3. **Integrations**: Seamlessly integrate Formbricks with your current stack using the provided SDKs, native integrations or open APIs.
4. **Analytics & Insights**: Analyze user responses and gain actionable insights to make informed product decisions.

## Survey builder

The survey builder is where you create and customize your surveys. With its intuitive drag-and-drop interface, you can easily add different question types, set response options, and apply your branding to the survey forms. The survey builder allows you to preview your survey in real-time, ensuring it looks and feels perfect for your users.

<MdxImage
  src={FormBuilder}
  alt="Create & Customize Surveys No Code with Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Targeting & Triggers

Formbricks offers fine-grained user targeting and event-based triggers to help you display your surveys to the most relevant audience. Using the platform, you can define user segments based on attributes and behaviors, and set up triggers to show your surveys at specific moments within your product. This ensures that you're capturing the most accurate and valuable feedback possible.

<MdxImage
  src={Targeting}
  alt="Targeting & Triggers with Formbricks"
  quality="100"
  className="w-full rounded-lg sm:max-w-3xl"
/>

<MdxImage
  src={Trigger}
  alt="Targeting & Triggers with Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Integration

Integrating Formbricks into your web is a breeze. With SDKs for popular web frameworks like React, and an HTML snippet for non-framework based websites, you can quickly add Formbricks to your project. The provided code snippets make it easy to initialize the Formbricks widget and configure it to communicate with your backend.

<MdxImage
  src={integrations}
  alt="Integrations with Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

## Analytics & Insights

Formbricks provides powerful analytics and insights to help you understand user responses and make data-driven decisions. The platform aggregates survey results and presents them in an easy-to-understand format, enabling you to identify trends, spot issues, and uncover opportunities for improvement. With Formbricks, you're always one step ahead in understanding your users and optimizing your product experience.

<MdxImage
  src={Analytics}
  alt="Analytics & Insights with Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>
