# Welcome to encatch Documentation (/docs)
## Introduction

encatch (en-catch) is a feedback platform that allows you to collect feedback from your users. You can seamlessly integrate it into your app or website using our SDKs.

## What is Next?

<Cards>
  <Card icon={<CodeIcon className="text-purple-300" />} title="Developer Guide" href="/docs/developer-guide" description="Learn how to get started with encatch integration in your app or website" />

  <Card icon={<CpuIcon className="text-purple-300" />} title="Administrative Guide" description="Learn how to manage your encatch account and projects" href="/docs/administrative-guide" />

  <Card icon={<CpuIcon className="text-purple-300" />} title="Framework Examples" description="Learn how to use encatch with different frameworks" href="/docs/framework-examples" />

  <Card icon={<CpuIcon className="text-purple-300" />} title="General FAQ" description="Frequently Asked Questions" href="/docs/general-faq" />
</Cards>


# encatch Admin Guide (/docs/administrative-guide)
## Introduction

encatch is a feedback platform that allows you to collect feedback from your users. You can seamlessly integrate it into your app or website using our SDKs.

This section provides high-level guide for setting up, configuring, and managing your encatch platform. Whether you're an organization owner, project admin, or team member, you'll find detailed instructions for every aspect of the system.

## Platform Hierarchy

The encatch platform follows a hierarchical structure that organizes your feedback collection and management:

<Mermaid
  chart="%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#0ea5e9','primaryTextColor':'#fff','primaryBorderColor':'#0284c7','secondaryColor':'#a855f7','secondaryTextColor':'#fff','secondaryBorderColor':'#9333ea','tertiaryColor':'#22c55e','tertiaryTextColor':'#fff','tertiaryBorderColor':'#16a34a','noteBkgColor':'#fb923c','noteTextColor':'#fff','noteBorderColor':'#ea580c','lineColor':'#64748b','edgeLabelBackground':'#1e293b','clusterBkg':'#1e293b'}}}%%
graph TD
    A[Organization] --> B[P1]
    A --> C[P2]
    A --> D[PN]

    B --> E[F1]
    B --> F[F2]
    B --> G[F3]

    C --> H[F1]
    C --> I[F2]

    D --> J[F1]
    D --> K[F2]

    E --> L[D1]
    E --> M[D2]
    F --> N[D1]
    F --> O[D2]
    G --> P[D1]
    G --> Q[D2]
    H --> R[D1]
    H --> S[D2]
    I --> T[D1]
    J --> U[D1]
    J --> V[D2]
    K --> W[D1]

    classDef orgStyle fill:#0ea5e9,stroke:#0284c7,color:#fff
    classDef projectStyle fill:#a855f7,stroke:#9333ea,color:#fff
    classDef feedbackStyle fill:#22c55e,stroke:#16a34a,color:#fff
    classDef dataStyle fill:#fb923c,stroke:#ea580c,color:#fff

    class A orgStyle
    class B,C,D projectStyle
    class E,F,G,H,I,J,K feedbackStyle
    class L,M,N,O,P,Q,R,S,T,U,V,W dataStyle"
/>

#### Organizations

Organizations are the top-level entities in the encatch platform. They represent your company (or a group of companies in an enterprise setup) and provide a central point for managing your feedback collection and management across all projects / applications that you own.

#### P - Projects

Each project is like a container (logical isolation) for your application that you want to collect feedback from. You can choose to create one project for all channels like website, webapp, mobile app, etc (recommended). or create one project for each channel, if you have different teams handling different channels / want exclusive feedback management for each channel.

#### F - Feedback Collections

Feedback collections are the actual forms and surveys that collect user input. They can be embedded in your applications, websites, or distributed via various channels.

#### D - Data Pipelines

Currently, data pipelines include destinations such as email, Slack, Jira, GitLab, and webhook endpoints. They allow you to integrate the feedback received from your users into your existing tools and systems. You could use destinations are a means to notify or trigger workflows by calling the workflow webhooks.

## What is Next?

<Cards>
  <Card icon={<BuildingIcon className="text-purple-300" />} title="Organizations" href="/docs/administrative-guide/organization-management/overview" description="Set up your organization structure, manage team members, and configure role-based access control" />

  {" "}

  <Card icon={<FolderIcon className="text-purple-300" />} title="Projects" href="/docs/administrative-guide/project-management/overview" description="Create and manage projects, configure API keys, manage members, and control project settings" />

  {" "}

  <Card icon={<MessageSquareIcon className="text-purple-300" />} title="Feedback Management" href="/docs/administrative-guide/feedback-management/overview" description="Design feedback forms, configure targeting rules, and analyze responses throughout the feedback lifecycle" />

  {" "}

  <Card icon={<GitBranchIcon className="text-purple-300" />} title="Integrations & Notifications" href="/docs/administrative-guide/data-pipelines/overview" description="Connect feedback to your tools with email notifications and database storage" />
</Cards>


# Quick Start (/docs/developer-guide)
## Get Started in Minutes

Encatch provides everything you need to build, deploy, and scale your applications. Whether you're integrating our SDK, setting up data pipelines, working with APIs, or implementing AI features, we've got you covered.

***

## Choose Your Starting Point

### SDK Guide

**Get up and running with the Encatch SDK**

Learn how to integrate our JavaScript/TypeScript SDK into your applications. This section covers installation and setup, configuration options, authentication methods, core SDK features and methods, code examples and best practices, and advanced configuration options.

Perfect for developers who want to integrate Encatch functionality directly into their web applications.

**[Explore SDK Guide →](/docs/developer-guide/sdk-guides/web)**

***

### Administrative Guide

**Manage your organization, projects, feedback forms, and data pipelines**

Learn how to manage your organization, projects, feedback forms, and data pipelines in the application. This section includes organization management, project management, feedback management, and data pipeline management.

**[Learn Administrative Guide →](/docs/administrative-guide)**

***

### 🔗 Data Pipelines

**Build robust data processing workflows**

Create and manage scalable data pipelines for your applications. This section includes pipeline architecture overview, data ingestion methods, transformation and processing, output destinations and formats, monitoring and debugging, and performance optimization.

Ideal for teams working with large datasets and complex data workflows.

**[Learn Data Pipelines →](/docs/developer-guide/data-pipelines/destination)**

***

*Ready to gather feedback for your users and take action on it? Pick a section above and start your Encatch journey today!*


# Rate Limits (/docs/developer-guide/rate-limits)
We enforce rate limits to prevent abuse and ensure that the APIs (called from SDKs for feedback fetching and submission) is used fairly by all users.

### Rate Limit Enforcement

The rate limits are applied on a combination of user's IP address and API key generated for the environment (test or production). The following table shows the rate limits for different API endpoints for each environment:

|  Endpoint Name                 | Test Environment | Production Environment |
| ------------------------------ | ---------------- | ---------------------- |
|  List elligible feedback forms | 10 RPM           | 200 RPM                |
|  Get feedback questions        | 10 RPM           | 80 RPM                 |
|  Submit Feedback               | 5 RPM            | 40 RPM                 |
|  Audit feedback viewed         | 5 RPM            | 80 RPM                 |
|  Open sharable link            | 5 RPM            | 200 RPM                |
|  AI obfuscation                | 5 RPM            | 24 RPM                 |
|  All other requests            | 5 RPM            | 50 RPM                 |

<Callout type="info">
  RPM means requests per minute.
</Callout>

#### Rate Limit Headers

When you make requests to the API, you'll receive rate limit information in the response headers:

* `X-RateLimit-Limit`: The maximum number of requests allowed per time window
* `X-RateLimit-Remaining`: The number of requests remaining in the current time window
* `X-RateLimit-Reset`: The time at which the current rate limit window resets (Unix timestamp in seconds)

#### Handling Rate Limits

When you exceed the rate limit, you'll receive a `429 Too Many Requests` response. You should:

1. Wait for the rate limit window to reset
2. Implement exponential backoff in your application
3. Consider caching responses to reduce API calls

#### Best Practices

* Monitor your rate limit usage through the response headers
* Implement proper error handling for 429 responses
* Use caching to minimize API calls
* Reach out to us if your usecase requires customized rate limits


# Test Mode (/docs/developer-guide/test-mode)
Test Mode allows you to preview and validate your feedback forms before deploying them to production.

It helps ensure that everything works correctly across different devices, browsers, and trigger configurations—without polluting real feedback data.

***

### Why Use Test Mode?

* **Keep production reports clean:** Test submissions won’t appear in your production analytics or reports.
* **Save credits:** Actions performed in test mode (such as viewing or submitting feedback or pipelines) do not consume production credits.
* **Validate end-to-end flows:** Test all trigger types, integrations, and UI behavior before a public launch.

***

### How to Enable Test Mode

1. **Generate a Test API Key**
   * Go to your project’s **API Keys** section.
   * When creating a new key, select **Test** in the **Environment** dropdown.
   * Use a clear **Application Name** to identify test instances (e.g., `test-app-1`, `test-app-2`, etc.).

2. **Configure Feedback Form (Auto Trigger)**
   * In the feedback form configuration, map the **application names** associated with test keys.
   * This ensures that forms can be auto-triggered in test environments.

3. **Set Up SDK Configuration**
   * For both Auto and Manual triggers, use the **test API key** in your SDK setup.

<Callout title="Notes" type="info">
  1) Test Mode does not consume production credits.
  2) Feedback actions such as submission or viewing, and data pipelines, are excluded from production usage.
</Callout>

<Callout title="Important" type="warning">
  * Test Mode has lower rate limits than production.
  * Avoid including test keys in your production build / bundles / deployments.
</Callout>

### Rate Limits in Test Mode

Refer to the [Rate Limits](/docs/developer-guide/rate-limits) guide for specific limits applied in Test Mode.

***

### What Is Covered in Test Mode?

* Feedback form configuration (Auto trigger) mapped to test application names
* Summary and reports for feedbacks received via test applications
* Feedback reports (Audience Overview, Response Summary, Individual Reports, Export, Destinations)
* Data pipelines enabled under test mode (not counted toward usage)

<Callout type="info">
  1. When manually triggered, a feedback form can open in both production and test mode.
  2. **AI-powered message APIs** are always counted under production usage. Test Mode does not apply to AI messages.
</Callout>

***

## Switching Back to Production Mode

1. Go to your project’s **API Keys** section.
2. Generate a new API key and select **Production** in the **Environment** dropdown.
3. Update your **Feedback Form Configuration** to map production application names.
4. Update your **SDK configuration** to use the production API key.


# Hello World 22 (/docs/framework-examples/hello)
hello world22


# Overview (/docs/framework-examples)
hello world ss


# General FAQ (/docs/general-faq)
### General FAQ

<Accordions type="single">
  <Accordion title="Who is organization owner and how to change it?">
    <p>
      The organization owner is the user who has created the organization. To change the organization owner, you need to contact us at 

      [support@encatch.com](mailto:support@encatch.com)

      .
    </p>
  </Accordion>

  <Accordion title="How to delete the organization?">
    <p>
      To delete the organization, you need to contact us at 

      [support@encatch.com](mailto:support@encatch.com)

      .
    </p>
  </Accordion>

  <Accordion title="How to add a new member to the organization?">
    <p>
      You can add a new member to the organization by going to the 

      **organization**

       menu in your dashboard and clicking the add member button. You can add a new member to the organization by clicking the add member button.
    </p>
  </Accordion>

  <Accordion title="What counts as AI API calls?">
    <p>
      AI API calls are the calls made to the AI API endpoints when using the application.
    </p>

    <ul>
      <li>
        AI Generated Feedback form creation
      </li>

      <li>
        AI Obfuscation
      </li>

      <li>
        External Insights chats and report generation
      </li>

      <li>
        AI Filtering in destination
      </li>

      <li>
        Question translations generated using AI
      </li>

      <li>
        AI translation of qualitative responses
      </li>
    </ul>
  </Accordion>

  <Accordion title="What counts as data pipeline triggers?">
    <p>
      Data pipeline triggers are the triggers that are used to trigger the data pipeline.
    </p>

    <ul>
      <li>
        When a destination is configured for feedback form submission (irrespective of the message is sent to destination or dropped in the filter process)
      </li>

      <li>
        All other data pipeline processes where AI is explicitly mentioned in the triggers
      </li>
    </ul>
  </Accordion>
</Accordions>

#### Other documents and questions:

1. Billing FAQ, click [here](/docs/administrative-guide/billing/billing-faq) for more details.
2. Referrals FAQ, click [here](/docs/administrative-guide/referrals/referrals) for more details.
3. Rate Limiting, click [here](/docs/developer-guide/rate-limits) for more details.
4. Test Mode, click [here](/docs/developer-guide/test-mode) for more details.
5. Privacy Policy, click [here](/docs/administrative-guide/legal/privacy-policy) for more details.
6. Terms of Service, click [here](/docs/administrative-guide/legal/terms-of-service) for more details.


# Billing FAQ (/docs/administrative-guide/billing/billing-faq)
<Accordions type="multiple">
  <Accordion title="How to check my usage and plan limits?">
    <p>
      You can check your usage and plan limits by going to the 

      **billing**

       menu which is available in the left sidebar in your dashboard.
    </p>
  </Accordion>

  <Accordion title="When is my upgrade effective?">
    <p>
      Your upgrade will be effective immediately. 
    </p>
  </Accordion>

  <Accordion title="When is my downgrade effective?">
    <p>
      Your downgrade will be effective after the current billing cycle ends (for which you have already been charged). 
    </p>
  </Accordion>

  <Accordion title="How to upgrade or downgrade my plan?">
    <p>
      You can upgrade or downgrade your plan by going to the 

      **billing**

       menu which is available in the left sidebar in your dashboard.
    </p>
  </Accordion>

  <Accordion title="Refund Policy?">
    <p>
      We do not offer refunds. If you are not satisfied with Encatch, you can cancel your subscription at any time. Scheduled payments will not be deducted.
    </p>
  </Accordion>

  <Accordion title="Can I cancel my subscription?">
    <p>
      Yes, you can cancel your subscription at any time by going to the billing page in your dashboard and clicking the cancel subscription button. You'll continue to have access to your account until the end of your current billing period / expiry of your already paid plan.
    </p>
  </Accordion>

  <Accordion title="What happens if i dont renew my subscription?">
    <p>
      If you don't renew your subscription, you will be automatically downgraded to the free plan and you will lose access to all the features of the current plan which you were on.
    </p>
  </Accordion>

  <Accordion title="Do you offer upfront payments?">
    <p>
      Yes, we do offer upfront payments so that you can try out the features of the corresponsding plans. You can purchase a plan for a upfront payment and you will have access to the features of the plan for the duration of the payment.
    </p>
  </Accordion>
</Accordions>


# Filters (/docs/administrative-guide/data-pipelines/filters)
### Example use cases

* Filter out feedback from specific users based on their email, department, role, etc.
* Filter out feedback from specific devices based on their device id, device type, device model, etc.
* Filter out feedback from based on responses captures, such as someone entering junk text in a text field.

<Callout type="info">
  This feature is coming soon.
</Callout>


# Transformations (/docs/administrative-guide/data-pipelines/transformations)
### Example use cases

* Mask IP address
* Transform URLs into simpler formats

<Callout type="info">
  This feature is coming soon.
</Callout>


# Additional Settings (/docs/administrative-guide/feedback-management/additional-settings)
When you create API key, they are associated with your defined app names. To provide best and fast experience we cache feedback configurations for specific app names.

## Configuration Settings

Below settings are available to configure:

* **Config sync interval**: The interval at which the config sync will be performed by your SDK for any changes in your feedback configurations.
* **Feedback frequency**: A global setting to control the frequency between two feedback forms being displayed to your users, unless a form is marked as important.
* **Disable all feedback forms**: A global setting to disable all feedback forms from being displayed to your users for this specific app name.

<Callout type="info">
  The disable all feedback forms does not disable the feedback forms for other app names.
</Callout>

## Cache Management

* When you make changes to already created feedback forms, you can clear the cache for a specific app name by clicking the clear cache button, so that during next cycles of config sync, your SDK will fetch the latest feedback configurations.
* If your changes are not immediately needed, you dont need to perform this step since the cache will be cleared automatically after 15 minutes.

<Callout type="info" title="Usecase of disabling all feedback forms">
  Suppose your app is active for multiple channels(android - MYAPP\_ANDROID, ios - MYAPP\_IOS, web - MYAPP\_WEB) and you want to temporarily disable feedback forms for web then you can use this feature to disable all feedback forms for web where you have defined the app name as MYAPP\_WEB, during API key creation.
</Callout>


# API Keys (/docs/administrative-guide/feedback-management/api-keys)
## Managing API Keys

API keys are essential for integrating encatch feedback collection into your applications. They provide secure authentication between your application and the encatch platform.

### Understanding API Keys

Each API key consists of:

* **Name**: A descriptive identifier for your reference.
* **Key Prefix**: Helps you identify the generated key with the key name
* **Expiry Date**: When the key will automatically expire
* **Application Name**: The app names for which the key is valid. This is used to link which feedback forms are linked.
* **Environment**: The environment for which the key is valid. Test keys are used for testing purposes and are not counted towards your usage.
* **Allowed Domains**: The domains (for website it is the domain name and for mobile app it is the bundle id) for which the key is valid. This is used to restrict the key to only be used on specific domains.

<Callout type="warning">
  Use **\*** Asterisk to generate a key for all domains. Not recommended for production environments.
</Callout>

<Callout type="info" title="Important Notes">
  * System does not store the generated key. Incase you lose the key, you can generate a new key and use it in your application and delete the old key, keeping the application name same.
  * Keep **application name** same across two keys which are  meant for same purpose when old key is about to expire.
  * API keys are public when embedded in public websites. We apply rate limits to prevent abuse and ensure that the APIs (called from SDKs for feedback fetching and submission) is used fairly by all users. For information on rate limits, refer to the [Rate Limits](/docs/developer-guide/rate-limits) guide.
</Callout>

### Permissions

Permissions are associated with the API key and are used to control the actions that can be performed with the key.

1. **Users**: Manage users who can use the key.
   * **create**: Use create permission if you want to add a new user using the key.
   * **delete**: Use delete permission if you want to remove a user using the key.
   * **update**: Use update permission if you want to update the users using the key.
   * **read**: Use read permission if you want to view the users information using the key.
2. **Feedback Forms**: Manage feedback forms that can be used with the key.
   * **create**: Use create permission if you want to submit feedback using the key.
   * **read**: Use read permission if you want to read feedback configurations using the key.

<Callout type="warning" title="Important Notes on Permissions">
  * When creating API keys for frontend SDK's you enable create and update permissions, so that new users created in your application are automatically synced with encatch users in the current project.
  * You would chose not to enable the create permission if you have fixed users and prefer to sync from backend directly. Example,employee based applications where users are managed by HRMS.
  * When creating API keys for website (no login applications) you disable all user permissions, so that no one can create users, but can only submit feedback anonymously.
</Callout>


# Form Creation & Customization (/docs/administrative-guide/feedback-management/form-creation)
## Creating Feedback Forms

encatch provides a powerful visual form builder and pre-built templates to help you create effective feedback forms quickly.

### Getting Started

You can chose to create a feedback form using;

1. Pre-built templates
2. AI form builder
3. Start from scratch

All options allow you to fully manually customize the form to your needs before launching it.

### Features

1. **Multi-page support**: Either have one question per page or multiple questions per page. One question per page is recommended for best user experience for in-app feedback. For sharable link based feedback forms, you could chose to have multiple questions per page.
2. **Question types**: You can choose from a variety of question types including multiple choice, short answer, long answer, rating, and more.
3. **Multi-lingual support**: You can translate the form into different languages using AI's contextual understanding or translate it manually.
4. **Mobile-responsive**: The form is responsive and is build for all resolution.
5. **Dark mode**: The form is available in light and dark mode.
6. **Branding**: You can brand the form with your brand colors.

### Advanced customization options:

1. **Custom CSS**: You can add link to your own CSS file to override the default styles when basic branding options are not enough.
2. **Popup position**: You can choose to position the form in the top right, top left, bottom right, bottom left, center of the screen, or in a custom position.

### Frequency & Scheduling options:

Control when and how often your feedback forms appear to users:

**Feedback Frequency Types:**

* **Single-use**: One-time display per user, best for major campaigns
* **Recurring**: Periodic display with customizable intervals (days/weeks/months)
* **Only Show Once**: Prevents re-display even if dismissed without completion

**Scheduling Controls:**

* **Start Feedback**: Immediately or custom date/time
* **Stop Feedback**: Never (continuous) or custom end date
* **Stop Responses**: Set maximum response limits

### Targeting & Triggering options:

Control who sees your feedback forms and when they appear:

**Trigger Modes:**

* **Auto Trigger**: Automatic display based on configured conditions
* **Manual Trigger**: Programmatic control via JavaScript API for custom events

**Auto Trigger:**
Set triggers based on:

* **Time on Page**: After X seconds
* **Scroll Depth**: When user scrolls Y% (You need to define the element and pass scrolled percentage in your code.)
* **Custom Events**: Based on custom events you define in your code.
* **Page Views**: When user visits specific page url.

**Audience Targeting (WHO):**

* **User Types**: Everyone, logged-in users only, anonymous users only, or custom segments
* **User Filters**: Demographics, behavior, account type, custom attributes
* **Priority Levels**: High priority (bypasses frequency rules) or standard priority

**Application Targeting (WHERE):**

* **Platforms**: Web applications, mobile apps, desktop apps, browser extensions
* **Device Filters**: Desktop, mobile, tablet, smart TV
* **Operating Systems**: Windows, macOS, iOS, Android, Linux


# Overview (/docs/administrative-guide/feedback-management/overview)
## Introduction

Feedback Management in encatch provides a comprehensive suite of tools to collect, analyze, and act on user feedback. From creating customized feedback forms to setting up sophisticated targeting rules, you have complete control over how and when you engage with your users.

## Next Steps

<Cards>
  <Card icon={<BuildingIcon className="text-purple-300" />} title="Form Creation & Customization" href="/docs/administrative-guide/feedback-management/form-creation" description="Learn how to create and customize feedback forms in encatch" />

  <Card icon={<BuildingIcon className="text-purple-300" />} title="Reports & Export" href="/docs/administrative-guide/feedback-management/reports" description="Learn how to monitor, analyze, and understand feedback data in encatch" />

  <Card icon={<BuildingIcon className="text-purple-300" />} title="Additional Settings" href="/docs/administrative-guide/feedback-management/additional-settings" description="Learn how to configure additional features in encatch" />

  <Card icon={<BuildingIcon className="text-purple-300" />} title="Feedback Destinations" href="/docs/administrative-guide/feedback-management/feedback-destinations" description="Learn how to configure feedback destinations in encatch" />

  <Card icon={<BuildingIcon className="text-purple-300" />} title="API Keys" href="/docs/administrative-guide/feedback-management/api-keys" description="Learn how to manage API keys in encatch" />

  <Card icon={<BuildingIcon className="text-purple-300" />} title="Users" href="/docs/administrative-guide/feedback-management/users" description="Learn how to manage users in encatch" />
</Cards>


# Reports & Export (/docs/administrative-guide/feedback-management/reports)
## Overview of Feedback Reports

Encatch provides three comprehensive reporting views to help you understand and analyze your feedback data:

1. **Audience Analytics**: Provides insights about your audience and how they're engaging with your feedback forms.

2. **Response Summary**:
   Provides insights about what users are saying and question-level insights.

3. **Individual Responses**:
   Provides detailed insights into each user's feedback.

Each report provides filters that help you narrow down the data to your specific needs example date filters.

## Export Report

The Export Report feature enables you to download feedback data for offline analysis, reporting, and integration with other tools.

## Realtime Feedback Notifications

The destination feature in encatch allows you to filter and chose which individual user feedback you would like to be notified about.

Few available destinations are:

* Email
* Slack
* Jira
* GitLab
* Custom Webhook (that can be used with Zappier,n8n, MS power automate, etc.)

Some usecase for this feature are:

* You want to be notified about negative feedback from your users.
* You want to be notified about feedback from your users about a specific bug.


# Response Summary (/docs/administrative-guide/feedback-management/response-summary)
## Analyzing Response Data

The Response Summary provides detailed insights into how users are answering your feedback questions, helping you understand patterns and extract actionable insights.

### Overview Metrics

Track key performance indicators for your feedback form:

#### Response Statistics

* **Total Responses**: Number of completed submissions
* **Response Rate**: Percentage of users who complete vs view
* **Completion Time**: Average time to finish the form
* **Drop-off Points**: Where users abandon the form

### Question-Level Analytics

Dive deep into individual question performance:

#### Response Distribution

For each question, view:

* **Response Count**: How many users answered
* **Skip Rate**: Percentage who skipped (if optional)
* **Response Types**: Distribution of answers

#### Chart Types

Visualize data using appropriate formats:

##### Pie Charts

* **Best For**: Single-choice questions
* **Shows**: Percentage distribution
* **Example**: Yes/No questions, satisfaction ratings

##### Bar Charts

* **Best For**: Multiple choice, rankings
* **Shows**: Comparative volumes
* **Example**: Feature preferences, priority lists

##### Donut Charts

* **Best For**: Categories with sub-options
* **Shows**: Hierarchical data
* **Example**: Department feedback, nested choices

### Filtering and Segmentation

Customize your analysis with advanced filters:

#### Time Period Filters

* **Date Range**: Select specific time periods
* **Comparison**: Compare different periods
* **Trends**: Track changes over time

#### Add Conditions

Filter responses by:

* **User Segments**: Demographics, behavior
* **Response Values**: Specific answers
* **Metadata**: Device, location, source

#### Add Breakdowns

Segment data by:

* **User Attributes**: Age, plan type, etc.
* **Response Groups**: Satisfaction levels
* **Time Periods**: Daily, weekly, monthly

#### Behavior Filters

Analyze based on user actions:

* **Completion Status**: Full vs partial
* **Response Time**: Fast vs slow responders
* **Interaction Pattern**: Linear vs non-linear

### Interpreting Results

Transform raw data into insights:

#### Rating Questions

For satisfaction or NPS questions:

* **Average Score**: Overall satisfaction level
* **Distribution**: Spread of ratings
* **Trends**: Improvement or decline
* **Segments**: Which groups are happiest

**Action Items**:

* Address low-score feedback
* Identify improvement areas
* Celebrate high ratings
* Track progress over time

#### Multiple Choice Questions

For preference or feature questions:

* **Popular Choices**: Most selected options
* **Unexpected Results**: Surprising preferences
* **Missing Options**: Write-in responses
* **Correlations**: Related answer patterns

**Applications**:

* Product roadmap prioritization
* Resource allocation decisions
* Marketing message refinement
* User persona validation

#### Open-Ended Responses

For text-based feedback:

* **Theme Analysis**: Common topics
* **Sentiment Tracking**: Positive vs negative
* **Keyword Frequency**: Repeated terms
* **Actionable Feedback**: Specific suggestions

**Processing Tips**:

* Export for detailed analysis
* Use text analytics tools
* Categorize manually for accuracy
* Share verbatim quotes internally

### Advanced Analytics

#### Cross-Question Analysis

* **Answer Correlation**: How questions relate
* **Path Analysis**: Response sequences
* **Segment Profiles**: Group characteristics
* **Predictive Indicators**: Future behavior clues

#### Statistical Significance

* **Sample Size**: Ensure adequate responses
* **Confidence Intervals**: Margin of error
* **P-Values**: Statistical validity
* **Effect Size**: Practical importance

### View Detailed Metrics

Expand analysis capabilities:

#### Detailed Metric Views

Access additional data:

* **Response Timestamps**: When submitted
* **Completion Paths**: Navigation flow
* **Edit Patterns**: Changed answers
* **Device Analytics**: Platform details

#### Export Options

* **Raw Data**: CSV for custom analysis
* **Summary Reports**: PDF presentations
* **API Access**: Programmatic retrieval
* **Real-time Feeds**: Live data streams

### Best Practices

#### Regular Analysis

* **Daily Monitoring**: Active campaigns
* **Weekly Reviews**: Ongoing feedback
* **Monthly Reports**: Trend analysis
* **Quarterly Planning**: Strategic insights

#### Data Quality

* **Remove Duplicates**: Clean data sets
* **Filter Test Data**: Exclude internal tests
* **Validate Responses**: Check for quality
* **Handle Missing Data**: Appropriate methods

#### Actionable Insights

* **Prioritize Findings**: Focus on impact
* **Share Results**: Stakeholder communication
* **Track Actions**: Monitor improvements
* **Close the Loop**: Inform users of changes

### Common Analysis Scenarios

#### Product Feedback

* Feature request prioritization
* Usability issue identification
* Satisfaction trend tracking
* Competitive positioning

#### Customer Experience

* Journey pain points
* Service quality metrics
* Channel preferences
* Support effectiveness

#### Market Research

* Segment identification
* Preference mapping
* Price sensitivity
* Brand perception

### Integration with BI Tools

Connect response data to your analytics stack:

* **Export Formats**: CSV, JSON, API
* **Scheduling**: Automated exports
* **Data Warehouse**: ETL pipelines
* **Visualization**: Tableau, PowerBI

### Troubleshooting

Common issues and solutions:

* **Missing Responses**: Check question logic
* **Skewed Data**: Verify sampling method
* **Low Completion**: Analyze drop-off points
* **Export Errors**: Check data volume limits


# User Management (/docs/administrative-guide/feedback-management/users)
Users in encatch are your application users (end users) who interact with your application and provide feedback.

<Callout type="warning" title="Understanding Users vs Members">
  * **Users**: End users of your application who submit feedback. Your users can scoped to the project level. Therefore, same user in two projects are counted as two different users.
  * **Members**: Administrators who manage the project and have access to the portal.
</Callout>

### User Attributes

You can configure users atrributes like email, department, role, etc. to help you filter and analyze feedback data. User attributes are broken into 3 types

**Pre-configured attributes**: Attributes that are pre-defined by you, that are filterable in the portal.

* Examples include: email, department, role, etc.

**Dynamic attributes**: Attributes that are not planned in advance and are created on the fly from your code.

* Examples include: custom attributes, traits, etc.

**System attributes**: Attributes that are pre-defined by the system and are not editable by you.

* Examples include: user\_name, last\_seen, first\_seen, created\_at, updated\_at, etc.

### Manage Users

You can manage (create, view,edit,delete) users in the portal.

* Individually
* Bulk upload
* Sync from your backend using API keys (Comming soon)

<Callout type="info" title="Important Notes">
  - **user\_name** field should be unique for each user in the project.
  - When chosing to create a user from SDK, ensure that this field is not easily guessable or reproducible.
  - Only configure user fields which are useful for you to create filters and segments in the portal.
  - To protect users information, the API SDK cannot send back the user fields to your frontend application. Unless explicitly configured to show certain fields where dynamic attribute of users data is shown in your form. Example, a question like, "How has **\{\{user\_f\_name}}** been expereincing the app?"
</Callout>


# External Insights (/docs/administrative-guide/feedback-studio/external-insights)
External insights allows you to load feedback data from your external tools using csv format and then analyze it using AI.

### How to use External Insights

1. Go to the **Feedback Studio -> External Insights**
2. Upload your csv file which includes the feedback data you want to analyze.
3. Verify the sample loaded data is correct.
4. Start asking questions about the feedback data.
5. Once you are satisfied with the results, you can ask AI to generate a report in HTML format.
6. You can further enhance the report by asking AI to add additional data points to the report.
7. The report is self contained HTML which you can save as a file and share with your team members or modify further manually as needed.

### Example use cases

* You want to analyze the feedback data from social accounts like Twitter, Instagram, Youtube, Glassdoor, etc.
* Existing reports from encatch are not enough to answer your questions, you can export that data to a csv file and analyze it using External Insights.


# Privacy Policy (/docs/administrative-guide/legal/privacy-policy)
# Privacy Policy

Welcome to encatch, a product of **Phyder Mobile Solutions Pvt. Ltd.** ("we," "our," or "us"). We are committed to protecting your privacy and ensuring you understand how your information is collected, used, and shared.

This Privacy Policy applies to the **encatch** website ([https://encatch.com](https://encatch.com)) and our SaaS feedback platform.

## 1. Our Relationship: Data Controller vs. Data Processor

To ensure compliance with privacy laws (such as GDPR and CCPA), it is important to clarify the relationship between encatch (Phyder Mobile Solutions Pvt. Ltd.), our Customers, and End-Users.

* **The Customer (You) is the "Data Controller":** If you integrate the encatch SDK into your application, you retain ownership of the data collected from your users. You are responsible for obtaining necessary consents and ensuring your use of our service complies with applicable laws.
* **encatch is the "Data Processor":** We process data on your behalf. We store, analyze, and manage the data solely to provide the Service to you, strictly following your configuration and instructions.
* **The End-User is the "Data Subject":** If you are an end-user of an application that uses encatch, please direct any privacy questions or data deletion requests to the application owner (our Customer).

## 2. Information We Collect

### A. From Website Visitors

When you visit our marketing website ([https://encatch.com](https://encatch.com)), we collect anonymous usage statistics to improve our user experience.

* **Analytics:** We use tools like **Google Analytics** to view data such as device type, browser version, page views and geographic location.

### B. From Customers (You)

When you sign up for encatch, we collect the following to manage your account and services:

* **Account Data:** Name, email address, and password.
* **Project & Configuration Data:** All metadata you create to set up your account, including project names, survey questions, widget appearance settings, targeting rules, and other customization preferences.
* **Billing Data:** Payment information (processed by secure third-party payment gateways; we do not store raw credit card numbers).
* **Operational Data:** Logs of your interactions with our dashboard and API.

### C. From End-Users (Via your App)

When you use our SDK, we collect the following on your behalf:

* **Feedback Content:** Text responses, ratings, and survey answers.
* **Technical Metadata:** Browser type, OS, and device information.
* **Custom Context:** Any user attributes (e.g., User IDs, emails, or plan types) you explicitly choose to send to us via the SDK.

## 3. How We Use Information

We use the collected data to:

1. **Provide the Service:** Storing feedback, preserving your project configurations, rendering widgets, and generating reports.
2. **AI Enhancements (Optional):** If enabled by the Administrator, processing feedback text to provide summaries or sentiment analysis.
3. **System Improvement:** Monitoring database performance and debugging technical issues.
4. **Communication:** Sending transactional emails (invoices, alerts) or product updates.

## 4. Sharing with Third-Party Service Providers

To provide a scalable and robust service, we engage trusted third-party service providers ("Subprocessors") to handle specific technical operations, such as cloud hosting, database management, and AI processing.

**Current categories of providers we may use include, but are not limited to:**

* **Cloud Infrastructure:** (e.g., **Amazon Web Services (AWS)**) for hosting servers and secure storage.
* **Database Services:** (e.g., **PlanetScale**, **Clickhouse Cloud**) for relational and analytical data storage.
* **AI & LLM Providers:** (e.g., **OpenAI**, **Google Gemini**) for natural language processing features. *Note: Data is only sent here if you enable AI features.*
* **Analytics Tools:** (e.g., **Google Analytics**) for website traffic monitoring.

**Important Note on Third-Party Policies:**
While we select our partners carefully, these providers operate under their own Privacy Policies. We encourage you to review their policies to understand how they handle data. By using encatch, you acknowledge that data may be processed by these third parties to fulfill the services you request.

## 5. Cookies and Tracking

We use cookies and local storage for:

* **Authentication:** Keeping you logged into the dashboard.
* **User Experience:** Remembering widget states (e.g., ensuring an End-User doesn't see the same survey repeatedly).
* **Analytics:** Understanding traffic on our marketing site.

## 6. Data Security and Retention

* **Security:** We utilize industry-standard encryption (HTTPS/TLS) for data in transit and encryption for sensitive data at rest. Access to production data is restricted to authorized personnel only.
* **Retention:** We retain Customer Data (including your project configurations and collected feedback) as long as your account is active. Upon account cancellation, data is deleted from our active databases within a reasonable timeframe (typically 30 days), though encrypted backups may be retained for a limited period for disaster recovery.

## 7. Changes to This Privacy Policy

We reserve the right to modify this Privacy Policy at any time to reflect changes in our technology, legal requirements, or business operations.

* **Notification:** If we make material changes, we will notify you via email or through a prominent notice on the encatch dashboard.
* **Acceptance:** Your continued use of the Service after any changes constitutes your acceptance of the new Privacy Policy. We encourage you to review this page periodically for the latest information on our privacy practices.

## 8. Contact Us

If you have questions about this policy or our data practices, please contact us at:

**encatch** (A product of **Phyder Mobile Solutions Pvt. Ltd.**)

Email: [support@encatch.com](mailto:support@encatch.com)

Website: [https://encatch.com](https://encatch.com)


# Terms of Service (/docs/administrative-guide/legal/terms-of-service)
# Terms of Service

Welcome to **encatch**. These Terms of Service ("Terms") constitute a legally binding agreement between you ("Customer," "User," or "You") and **Phyder Mobile Solutions Pvt. Ltd.** ("Company," "we," "us," or "our"), the owner and operator of the encatch platform.

By accessing or using the encatch website ([https://encatch.com](https://encatch.com)), installing our SDK, or using our services (collectively, the "Service"), you agree to be bound by these Terms. If you do not agree to these Terms, do not use the Service.

## 1. Description of Service

encatch is a feedback management platform that allows application developers to collect, manage, and analyze user feedback via an SDK and dashboard. The Service may include features such as data storage, analytics, and AI-assisted summaries.

We may update, modify, or discontinue features of the Service from time to time to improve performance or comply with regulations.

## 2. Accounts and Registration

To use the Service, you must register for an account. You agree to:

* Provide accurate, current, and complete information during registration.
* Maintain the security of your password and account credentials.
* Notify us immediately of any unauthorized use of your account.

You are responsible for all activities that occur under your account, including the actions of any team members you invite to your workspace.

## 3. Intellectual Property Rights

### A. Our IP (The Platform)

**Phyder Mobile Solutions Pvt. Ltd.** retains all rights, title, and interest in and to the encatch Service, including our source code, SDKs, design, logos, algorithms, databases, and documentation. Nothing in these Terms grants you a license to use our intellectual property except as explicitly permitted for using the Service.

### B. Your IP (Customer Data)

You retain all rights and ownership of the data you submit to the Service ("Customer Data"), including:

* Your project configurations (survey questions, targeting rules).
* The feedback and metadata collected from your End-Users.

### C. License to Host

By using the Service, you grant us a worldwide, non-exclusive, royalty-free license to host, copy, process, and display your Customer Data solely for the purpose of providing the Service to you (e.g., storing the feedback in our database and displaying it on your dashboard).

## 4. Artificial Intelligence (AI) Features

Our Service includes optional AI features (powered by third-party providers like OpenAI and Google Gemini) to summarize feedback or analyze sentiment. By enabling these features, you acknowledge that:

1. **Accuracy:** AI-generated content is probabilistic and may contain errors. You should not rely solely on AI outputs for critical business decisions without human verification.
2. **Processing:** Data sent to AI models is processed according to our Privacy Policy and the policies of the respective AI providers.
3. **No Liability:** We are not liable for any inaccuracies, bias, or offensive content generated by the AI models.

## 5. Acceptable Use Policy

You agree not to use the Service to:

1. Collect sensitive personal information (e.g., health data, financial data, government IDs) via the feedback forms unless you have a specific legal basis and adequate security measures in place.
2. Reverse engineer, decompile, or attempt to extract the source code of the SDK or platform.
3. Use the Service to distribute malware, spam, or harmful content.
4. Interfere with the integrity or performance of the Service (e.g., DDoS attacks or placing an excessive load on our infrastructure).

## 6. Payment and Subscription

* **Fees:** Certain features of the Service may be subject to fees. You agree to pay all applicable fees in connection with your selected subscription plan.
* **Billing:** Payments are processed by third-party gateways. We do not store your full credit card details.
* **Refunds:** Unless required by law, payments are non-refundable.
* **Taxes:** You are responsible for any applicable taxes associated with your purchase.

## 7. Termination

* **By You:** You may stop using the Service at any time by cancelling your account via the dashboard or contacting support.
* **By Us:** We may suspend or terminate your access to the Service immediately if you violate these Terms (e.g., non-payment or violating the Acceptable Use Policy).
* **Effect of Termination:** Upon termination, your right to use the Service will end. We will delete your Customer Data in accordance with our Privacy Policy retention schedule.

## 8. Disclaimers

**The Service is provided on an "AS IS" and "AS AVAILABLE" basis.**

To the fullest extent permitted by law, Phyder Mobile Solutions Pvt. Ltd. disclaims all warranties, express or implied, including warranties of merchantability, fitness for a particular purpose, and non-infringement. We do not guarantee that the Service will be uninterrupted, error-free, or secure, or that the AI features will be accurate.

## 9. Limitation of Liability

In no event shall **Phyder Mobile Solutions Pvt. Ltd.**, its directors, employees, or partners be liable for any indirect, incidental, special, consequential, or punitive damages, including loss of profits, data, use, or goodwill.

Our total liability for any claim arising out of or relating to these Terms or the Service shall not exceed **the amount you paid to us for the Service in the six (6) months preceding the event giving rise to the claim.**

## 10. Governing Law and Jurisdiction

These Terms shall be governed by and construed in accordance with the laws of **India**. Any disputes arising under or in connection with these Terms shall be subject to the exclusive jurisdiction of the courts located in **Mumbai, Maharashtra, India**.

## 11. Changes to Terms

We reserve the right to modify these Terms at any time. If we make material changes, we will notify you via email or a notice within the Service. Your continued use of the Service after such changes constitutes your acceptance of the new Terms.

## 12. Contact Us

If you have any questions about these Terms, please contact us at:

**encatch** (A product of **Phyder Mobile Solutions Pvt. Ltd.**)

Email: [support@encatch.com](mailto:support@encatch.com)

Website: [https://encatch.com](https://encatch.com)


# Referrals (/docs/administrative-guide/referrals/referrals)
We believe in the power of community and we want to reward you for referring and continuous educating your users about encatch and potential benefits of using it.

### Referral Program Rules and Guidelines

<Callout type="info" title="Who can refer?">
  1. Only users who have purchased a paid plan can refer new users.
  2. Your referral codes are applicable till the code expiry period / no of times
     the code is used (You can view this information in the **billing page -> referrals**).
  3. If you discontinue your subscription, your referral code will be temporarily disabled (and not elligible for commissions) until you have an active subscription again.
</Callout>

<Accordions type="multiple">
  <Accordion title="How to refer a user to encatch?">
    <p>
      You can refer a user by sharing the referral link with them (generated from your 

      **billing page -> referrals**

      ). When the user signs up and purchases a paid plan anytime in the future, you will earn a commission.
    </p>
  </Accordion>

  <Accordion title="Will referral code be automatically shown on subscription page?">
    <p>
      If the user had clicked on your referral link, the referral code will be automatically shown on the subscription page during renewals. User can chose to manually enter / edit the referral code if they want to.
    </p>
  </Accordion>

  <Accordion title="Is referrals one time or recurring?">
    <p>
      Referrals are recurring. You will earn a commission for as long as the user
      you referred is a customer of encatch and on renewal chose to use your
      referral code. If they update with someone else's referral code, you will no
      longer be eligible for commissions.
    </p>
  </Accordion>

  <Accordion title="How much can I earn?">
    <p>
      You will earn a commission of % percentage of the purchase amount of the new user (This percentage is shown to you while creating the referral code). The commission is paid in the form of payout which can be requested via email.
    </p>
  </Accordion>

  <Accordion title="How to view my estimated earnings?">
    <p>
      You can view your estimated earnings by going to the 

      **referrals**

       menu in your dashboard and clicking the view estimated earnings page. You can see the estimated earnings amount where subscription for current billing month is already paid for.
    </p>
  </Accordion>
</Accordions>

## Payout FAQ

<Accordions type="multiple">
  <Accordion title="How to request a payout?">
    <p>
      At the moment, you can request a payout only via email. Please send an email to 

      [support@encatch.com](mailto:support@encatch.com)

       with your payout request amount and the payment method you want to be paid in.
    </p>
  </Accordion>

  <Accordion title="How will I be paid?">
    <p>
      You will be paid via Paypal / Payoneer. You can request a payout at any time by going to the 

      **referrals**

       menu in your dashboard and clicking the request payout button.
    </p>
  </Accordion>

  <Accordion title="How often will I be paid?">
    <p>
      You are eligible for payout 15 days after the user has consumed current billing month's subscription. You can request a payout of maximum once in a month and once minimum payout amount is $100. Payout requests will be processed within 25 business days.
    </p>
  </Accordion>

  <Accordion title="How much will be deducted during payout?">
    <p>
      During payout, an applicable deduction as per the payment provider charges will be deducted from the payout amount.
    </p>
  </Accordion>

  <Accordion title="How to view my payout history?">
    <p>
      You can view your payout history by going to the 

      **referrals**

       menu in your dashboard and clicking the view payout history page. You can see the list of payouts you have received.
    </p>
  </Accordion>
</Accordions>

#### Program Terms and Conditions

<Callout type="warning">
  **Encatch's Rights and Discretion:**

  Encatch reserves the right to reverse any final referral decisions, modify the referral program terms, conditions, and benefits at its sole discretion. This includes but is not limited to:

  * Reversing referral commissions that have been awarded
  * Modifying commission rates and payout structures
  * Changing eligibility requirements for referrals
  * Suspending or terminating elligible users' referral accounts
  * Updating program rules and guidelines

  Any modifications to the referral program will be communicated to elligible users through appropriate channels. Continued participation in the referral program constitutes acceptance of any such changes.
</Callout>


# Members (/docs/administrative-guide/system-setup/members)
### Inviting Team Members

* Only users with appropriate permissions can invite new members to the organization or project level.
* By inviting member at organization level you grant them across all projects (based on scopes defined in that role).
* By inviting member at project level you grant them only to that project.
* People you are invite are auto accepted to the organization and project. If a user has previously not joined encatch, you will see **invited** status in the members list. If the invited member has already joined encatch, you will see **active** status in the members list.
* An invitation email is sent to the invited member to join the organization / project.

<Callout type="info" title="Important Notes">
  - Any member assigned at organization level cannot be added as a member at project level and vice versa.
  - If you want to add a member at project level, you need to remove them from the organization level first.
  - Organization owner will have access to all organization and project level features and cannot be removed from the organization.
  - A user can be added as organization admin in multiple organizations but will be owner of only one organization.
</Callout>

### Enterprise Feature

Enterprises have the flexibility to send invitation emails from their own email domain or use encatch's email domain with custom branding and mail content.


# Organization & Projects (/docs/administrative-guide/system-setup/overview)
## Platform Hierarchy

The encatch platform follows a hierarchical structure that organizes your feedback collection and management:
read about the platform hierarchy [here](/docs/administrative-guide#platform-hierarchy).

## Organization / Project Management

* Use the **Manage** option in the sidebar to access the organization and project management page. The page will show you the list of organizations and projects you have access to.
* Roles and permissions (for orgnization and projects level) are created / managed at the organization level only.
* Members can be chosen to be invited at organization level or at project level.

#### Important Notes:

* One email address can only be associated with one organization as owner.
* At present, reassigning organization owner to a different user is restricted from admin portal as self service. Contact us for such requests.
* You can only access the organization and project management page if you have the **Manage** permission.
* Every new user registration on the encatch admin portal automatically creates an organization, with the registering user becoming the organization owner.


# Role & Permissions (/docs/administrative-guide/system-setup/roles-permissions)
## Roles and permissions

Roles define what actions users can perform within the organization and projects. Permissions can be customized at both the **organization level** and the **project level**.

#### Default Roles

* By default, a organization admin role is created with all permissions at organization level. This role cannot be deleted or modified.

#### Custom Roles

You can create custom roles to meet your organizational and project needs.

* When creating a new role at organization level, you can choose to limit the role with permissions at organization level or across projects.

<Callout type="info" title="Important Notes">
  - Organization admin role cannot be deleted or modified.
  - Organization Owner (the user who creates the organization) is automatically added as an organization admin and cannot be removed.
</Callout>

#### Example of custom roles:

* You may create a role as system admin, which will have access to organization level features that allow to manage roles and member invitations only.
* You may create a project level role as feedback management who has access to view and manage feedback within the project.
* You may create a project level role as integration manager who has access to manage data pipelines within the project, since these contain sensitive information and may need to be managed by a dedicated team.


# Encatch with LLMs (/docs/developer-guide/ai-guides/llms)
### Full Global Context:

You can use the [llms-full.txt](/llms-full.txt) file to get updated code suggestions to easily integrate with your LLM / vibe coding tools.

This link covers the full documentation of the Encatch API and SDKs including administrative guide.

### Page Specific Context:

If you would like to get only a page specific context you can

1. Choose **Copy Markdown** option from the page actions (Below the page title).
2. From page actions, choose **Open** with your favorite LLM like Claude, ChatGPT, etc (Below the page title).
3. append the current url with **.mdx** (dot mdx extension). Example: **[docs/developer-guide/ai-guides/llms](/docs/developer-guide/ai-guides/llms)** -> **[docs/developer-guide/ai-guides/llms.mdx](/docs/developer-guide/ai-guides/llms.mdx)**


# User API Guide (/docs/developer-guide/api-guides/user-api-guides)
### Overview

The UI uses a small set of REST endpoints via internal fetch hooks (for example `useGetConnectors`, `useGetDestinations`, `useCreateDestination`, `useEnableDestination`, `useDeleteDestination`). Each hook delegates to backend URLs configured in `modulePermissions.*` (see code for exact url/method values used in your deployment).

> Note: The examples below use generic routes and shapes. Replace `BASE_URL` and paths with the actual `modulePermissions.*` URLs from your environment.

***

### Auth & headers

The UI sends standard headers (see `@encatch/-constants/headers`) and relies on session/auth middleware. A typical header set looks like:

```http
Authorization: Bearer <access_token>
Content-Type: application/json
X-Engage-Org: <organizationId>
X-Engage-Project: <projectId>
```

Use the existing `useEngageFetchApi()` wrapper in UI code to match the project's auth flow.

***

### List connectors (pre-configured templates)

Purpose: fetch connector templates (Slack, webhook, email, gitlab, jira, ...)

Query params commonly supported:

* page (number) — 1-indexed
* page\_size (number)
* purpose (optional) — purpose filter (R/B/P)

Example request (GET):

```http
GET BASE_URL/pre-configured-connectors?page=1&page_size=20
Authorization: Bearer <token>
```

Example JSON response shape

```json
{
  "pagination": { "current_page": 1, "page_size": 20, "total_count": 42, "total_pages": 3 },
  "connectors": [
    {
      "connector_id": 10,
      "connector_type": "slack",
      "connector_name": "Slack Incoming Webhook",
      "connector_description": "Post to slack",
      "connector_config": "{...}",
      "pipeline_type": "realtime",
      "purpose": "R"
    }
  ]
}
```

Hook used in UI: `useGetConnectors(params)` — returns `connectors`, `pagination`, `isLoading`, `isError`.

***

### List destinations (project-level bindings)

Purpose: fetch destinations for a project (optionally filtered by feedback configuration). Supports pagination and column filtering.

Query params commonly supported:

* page (number)
* page\_size (number)
* feedback\_configuration\_id (optional)
* plus additional filter params (column filter keys supported by backend)

Example request (GET):

```http
GET BASE_URL/destinations?page=1&page_size=10&feedback_configuration_id=fc_abc123
Authorization: Bearer <token>
```

Example response shape

```json
{
  "pagination": { "current_page": 1, "page_size": 10, "total_count": 2, "total_pages": 1 },
  "connectors": [
    {
      "project_connector_id": "pc_001",
      "project_id": 123,
      "feedback_configuration_id": "fc_abc123",
      "connector_id": 10,
      "connector_project_name": "Slack - Feedback Alerts",
      "connector_project_description": "Post feedback to #feedback",
      "connector_name": "Slack Incoming Webhook",
      "connector_type": "slack",
      "purpose": "R",
      "pipeline_type": "realtime",
      "is_enabled": "Y",
      "updated_by": "user_1",
      "updated_at": "2025-09-03T12:00:00Z"
    }
  ]
}
```

Hook used in UI: `useGetDestinations(page, pageSize, filters, enabled, feedbackId)` — returns `destinations`, `pagination`, `isLoading`, `isError`.

***

### Create destination

Purpose: create a new project-scoped destination (bind a connector to a project/feedback).

Request body (CreateDestinationRequest)

```json
{
  "connector_id": 123,
  "feedback_configuration_id": "fc_abc123",
  "connector_project_name": "Slack - Feedback Alerts",
  "connector_project_description": "Post feedback to #feedback",
  "purpose": "R",
  "pipeline_type": "realtime",
  "is_enabled": "Y",
  "active_status": "A"
}
```

Example response (on success)

```json
{
  "message": "Destination created",
  "project_connector_id": "pc_001"
}
```

Hook used in UI: `useCreateDestination()` — this wraps a POST mutation and invalidates `QUERY_KEYS.DESTINATIONS` on success.

***

### Update destination definition / config

Purpose: update destination definition (connector selection) or connector-specific config. Use the destination edit endpoint. The body typically includes connector config blob and updateable fields like `connector_project_name`, `connector_project_description`, `is_enabled`, and connector-specific config payload.

Example patch request shape (pseudo)

```json
{
  "connector_project_name": "Slack - Alerts v2",
  "connector_config": { "webhook_url": "https://hooks..." },
  "is_enabled": "Y"
}
```

There are separate endpoints in the UI hooks for `updateDef` and `updateConfig` (see `-services/hooks/useUpdateDestinationDefiniton.ts` and `useUpdateDestinationConfig.ts`).

***

### Enable / disable destination

Purpose: toggle `is_enabled` flag for a destination.

Example request (PATCH / POST):

```json
{ "destinationId": "pc_001", "is_enabled": "N" }
```

Hook used in UI: `useEnableDestination()` — toggles and refetches cache.

***

### Delete destination

Purpose: remove a destination from a project.

Example request (DELETE):

```http
DELETE BASE_URL/destinations/pc_001
Authorization: Bearer <token>
```

Hook used in UI: `useDeleteDestination(projectConnectorId)` — invalidates queries and shows a toast on success.

***

### Export / Test endpoints

* `TestTemplateDialog` triggers a test payload to verify a destination's connector config. It typically calls a `test` endpoint with the destination ID and returns success/failure and raw response body for debugging.
* Export endpoints exist for downloading feedback results (see `results/export` hooks); they may trigger background jobs and offer job status polling endpoints.

***

### Pagination & filtering

* Pagination is 1-indexed in the UI hooks and returned in a `pagination` object with `current_page`, `page_size`, `total_count`, `total_pages`.
* Column filtering is passed as query params. Use `getFilterParams()` (see UI code) to map column filters to query params.

***

### Error handling and retries

* The UI expects standard HTTP status codes. On 4xx the UI surfaces an error page/toast. On 5xx you may want to implement retries with exponential backoff.
* For webhooks and external sinks, backend should implement retry/backoff and a dead-letter strategy for permanent failures.

***

### Example JS (client) snippets

Create destination (fetch wrapper):

```js
async function createDestination(data) {
  const res = await fetch(`${BASE_URL}/destinations`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
    body: JSON.stringify(data)
  });
  if (!res.ok) throw new Error(`Create failed: ${res.status}`);
  return res.json();
}
```

Get destinations with pagination:

```js
async function getDestinations(page=1, pageSize=10, filters={}) {
  const params = new URLSearchParams({ page, page_size: pageSize });
  Object.entries(filters).forEach(([k,v]) => v !== undefined && v !== '' && params.append(k, v));
  const res = await fetch(`${BASE_URL}/destinations?${params.toString()}`, { headers: { Authorization: `Bearer ${token}` } });
  if (!res.ok) throw new Error('Fetch failed');
  return res.json();
}
```

***

### Notes & references

* Exact URLs and methods are configured in `modulePermissions.*` in the UI codebase; reference these values for the canonical endpoints and HTTP verbs.
* See the UI hooks in `admin/ui-v2/src/routes/.../module/encatch/destinations/-services/hooks/` for concrete usage and response handling.

If you'd like, I can also:

* Extract the `modulePermissions.*` URL/method values and embed them into this guide for a specific environment.
* Generate an OpenAPI-style JSON example for the destination endpoints.


# Flutter SDK (/docs/developer-guide/sdk-guides/flutter)
🚀 **Coming Soon!**

We're working hard to bring you an amazing Flutter SDK experience. Our team is actively developing comprehensive documentation, examples, and best practices to help you integrate encatch seamlessly into your Flutter applications.

Stay tuned for updates - we can't wait to share what we're building! 💪


# Other SDKs (/docs/developer-guide/sdk-guides/others)
import { SuggestSdkButton } from "@/components/fumadocs-custom/suggest-sdk-button";

<div className="flex justify-between w-full">
  <p>
    We are always looking to add more SDKs as adoption takes place. Don't see your favorite SDK? Let us know which SDK you'd like us to build next!
  </p>

  <SuggestSdkButton />
</div>


# React Native SDK (/docs/developer-guide/sdk-guides/react-native)
🚀 **Coming Soon!**

We're working hard to bring you an amazing React Native SDK experience. Our team is actively developing comprehensive documentation, examples, and best practices to help you integrate encatch seamlessly into your React Native applications.

Stay tuned for updates - we can't wait to share what we're building! 💪


# JavaScript Web SDK (/docs/developer-guide/sdk-guides/web)
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
import { TypeTable } from 'fumadocs-ui/components/type-table';
import { StatusGrid } from '@/components/fumadocs-custom/status-grid';

{/* Features and compatibility overview. */}

{/* <StatusGrid
    items={[
    { status: "check", label: "Android",description: "Has been tested" },
    { status: "check", label: "iOS",description: "Has been tested" },
    { status: "unknown", label: "MacOS",description: "Not tested or verified" },
    { status: "unknown", label: "Windows",description: "Not tested or verified" },
    { status: "unknown", label: "Linux",description: "Not tested or verified" },
    { status: "unknown", label: "Web",description: "Not tested or verified" },
    ]}
  /> */}

The encatch JavaScript SDK provides seamless integration for web applications, enabling automated feedback collection and analytics with minimal setup.

## Quick Start

Get encatch running in your application in under 5 minutes with below steps.

## Installation & Initialization

<Tabs items={['Package Manager']}>
  <Tab value="Package Manager">
    Install the encatch JavaScript SDK using your preferred package manager:

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @encatch/web-sdk
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @encatch/web-sdk
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @encatch/web-sdk
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @encatch/web-sdk
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    After installation, import and initialize the SDK in your application:

    <CodeBlockTabs defaultValue="ES6 Modules">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="ES6 Modules">
          ES6 Modules
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="CommonJS">
          CommonJS
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="TypeScript">
          TypeScript
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="ES6 Modules">
        ```javascript
        import { Encatch } from '@encatch/web-sdk';

        // Initialize the SDK
        const encatch = new Encatch();
        encatch.init('<YOUR_PROJECT_API_KEY>');
        ```
      </CodeBlockTab>

      <CodeBlockTab value="CommonJS">
        ```javascript
        const { Encatch } = require('@encatch/web-sdk');

        // Initialize the SDK
        const encatch = new Encatch();
        encatch.init('<YOUR_PROJECT_API_KEY>');
        ```
      </CodeBlockTab>

      <CodeBlockTab value="TypeScript">
        ```typescript
        import { Encatch } from '@encatch/web-sdk';

        // Initialize the SDK with TypeScript support
        const encatch = new Encatch();
        encatch.init('<YOUR_PROJECT_API_KEY>');
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="CDN">
    Add the following script to the `<head>` section of your HTML, preferably just before the closing `</head>` tag. Replace `<your_project_api_key>` with your actual project API key from the encatch dashboard.

    ```html
    <html>
        <head>
            ....other head content
            <script type="module">
                (function(){window.encatch||(window.encatch={_i:[],apiKey:"",config:{host:void 0,isAutoCaptureEnabled:!0,themeMode:"light",language:"en"},initialized:!1,chunkUrlLoader:i=>window.encatch.config.host+i,init(i,e){if(window.encatch.initialized)return;window.encatch.apiKey=i,e!=null&&e.host&&(window.encatch.config.host=e.host),e!=null&&e.identity&&(window.encatch.config.identity=e.identity),(e==null?void 0:e.processAfterIdentitySet)!==void 0?window.encatch.config.processAfterIdentitySet=e.processAfterIdentitySet:window.encatch.config.processAfterIdentitySet=!1,(e==null?void 0:e.isAutoCaptureEnabled)!==void 0&&(window.encatch.config.isAutoCaptureEnabled=e.isAutoCaptureEnabled),e!=null&&e.themeMode?window.encatch.config.themeMode=e.themeMode:window.encatch.config.themeMode="light",e!=null&&e.language?window.encatch.config.language=e.language:window.encatch.config.language="en",window.encatch.initialized=!0;const g=`${window.encatch.config.host}/plugin/sdk/encatch-web-sdk.js`,t=document.createElement("script");t.src=g,t.type="module",t.async=!0;const n=document.head.firstChild;n?document.head.insertBefore(t,n):document.head.appendChild(t);const d=document.createElement("div");d.id="enisght-root",document.body.appendChild(d)}},["trackEvent","stopSession","identify","resetSession","openFeedbackById","openFeedbackByName","setThemeMode","setLanguage","verifyFeedbackIds","forceFetchEligibleFeedbacks","capturePageScrollEvent"].forEach(i=>{window.encatch[i]=(...e)=>{window.encatch._i.push([i,...e])}}))})();
                encatch.init('<YOUR_PROJECT_API_KEY>');
            </script>
        </head>
    <body>
        ....other body content
    </body>
    </html>
    ```
  </Tab>
</Tabs>

<Callout title="Note on Server Side Rendering Frameworks (SSR)" type="warn">
  encatch web is a client side SDK and relies on window object to be available.
  So ensure it is not used in server side components.
</Callout>

<Accordions>
  <Accordion title="Framework Examples">
    <Tabs items={['React','Vue.js','Svelte','Angular','SolidJS','Next.js','Nuxt.js','TanStack']}>
      <Tab value="React">
        ```javascript
        import { Encatch } from '@encatch/web-sdk';
        import { useEffect } from 'react';

        function App() {
        useEffect(() => {
        const encatch = new Encatch();
        encatch.init('<YOUR_PROJECT_API_KEY>');
        }, []);

        return <div>Your React App</div>;
        }

        ```
      </Tab>

      <Tab value="Vue.js">
        ```javascript
        import { Encatch } from '@encatch/web-sdk';
        import { onMounted } from 'vue';

        export default {
          setup() {
            onMounted(() => {
              const encatch = new Encatch();
              encatch.init('<YOUR_PROJECT_API_KEY>');
            });
          }
        }
        ```
      </Tab>

      <Tab value="Svelte">
        <Steps>
          <Step>
            **Create a Svelte Component**

            Create a new component file `src/lib/EncatchComponent.svelte`:

            ```svelte
            <script>
              import { onMount } from 'svelte';
              import { Encatch } from '@encatch/web-sdk';

              onMount(() => {
                const encatch = new Encatch();
                encatch.init('<YOUR_PROJECT_API_KEY>');
              });
            </script>
            ```
          </Step>

          <Step>
            **Include in Layout**

            Add the component to your root layout file `src/routes/+layout.svelte`:

            ```svelte
            <script>
              import EncatchComponent from '$lib/EncatchComponent.svelte';
            </script>

            <EncatchComponent />
            <slot />
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="Angular">
        <Steps>
          <Step>
            **Create an Angular Service**

            Create a new service file `src/app/services/encatch.service.ts`:

            ```typescript
            import { Injectable } from "@angular/core";
            import { Encatch } from "@encatch/web-sdk";

            @Injectable({
              providedIn: "root",
            })
            export class EncatchService {
              private encatch: any;

              constructor() {
                this.encatch = new Encatch();
                this.encatch.init("<YOUR_PROJECT_API_KEY>");
              }
            }
            ```
          </Step>

          <Step>
            **Include in App Component**

            Add the service to your main app component `src/app/app.component.ts`:

            ```typescript
            import { Component } from "@angular/core";
            import { EncatchService } from "./services/encatch.service";

            @Component({
              selector: "app-root",
              template: ` <router-outlet></router-outlet> `,
            })
            export class AppComponent {
              constructor(private encatchService: EncatchService) {}
            }
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="SolidJS">
        <Steps>
          <Step>
            **Create a Component**

            Create a new component file `src/components/EncatchComponent.tsx`:

            ```typescript
            import { onMount } from "solid-js";
            import { Encatch } from "@encatch/web-sdk";

            export default function EncatchComponent() {
              onMount(() => {
                const encatch = new Encatch();
                encatch.init("<YOUR_PROJECT_API_KEY>");
              });

              return null;
            }
            ```
          </Step>

          <Step>
            **Include in App**

            Add the component to your main app file `src/App.tsx`:

            ```typescript
            import { Component } from "solid-js";
            import EncatchComponent from "./components/EncatchComponent";

            const App: Component = () => {
              return (
                <>
                  <EncatchComponent />
                  <div>Your SolidJS App</div>
                </>
              );
            };

            export default App;
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="Next.js">
        <Steps>
          <Step>
            **Create a Client Component**

            Create a new component file `components/EncatchComponent.tsx`:

            ```javascript
            "use client";
            import { Encatch } from "@encatch/web-sdk";
            import { useEffect } from "react";

            export default function EncatchComponent({
              children,
            }: {
              children: React.ReactNode,
            }) {
              useEffect(() => {
                const encatch = new Encatch();
                encatch.init("<YOUR_PROJECT_API_KEY>");
              }, []);

              return <>{children}</>;
            }
            ```
          </Step>

          <Step>
            **Include in Layout**

            Add the component to your root layout file `app/layout.tsx`:

            ```javascript
            import EncatchComponent from "@/components/EncatchComponent";

            export default function Layout({ children }) {
              return (
                <>
                  <Navbar />
                  <EncatchComponent />
                  <main>{children}</main>
                  <Footer />
                </>
              );
            }
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="Nuxt.js">
        <Steps>
          <Step>
            **Create a Plugin**

            Create a new plugin file `plugins/encatch.client.ts`:

            ```typescript
            import { Encatch } from "@encatch/web-sdk";

            export default defineNuxtPlugin(() => {
              const encatch = new Encatch();
              encatch.init("<YOUR_PROJECT_API_KEY>");
            });
            ```
          </Step>

          <Step>
            **Alternative: Use in App.vue**

            You can also initialize the SDK directly in your `app.vue` file:

            ```vue
            <template>
              <div>
                <NuxtPage />
              </div>
            </template>

            <script setup>
            import { Encatch } from "@encatch/web-sdk";

            onMounted(() => {
              const encatch = new Encatch();
              encatch.init("<YOUR_PROJECT_API_KEY>");
            });
            </script>
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="TanStack">
        <Steps>
          <Step>
            **Create a Client Component**

            Create a new component file `components/EncatchComponent.tsx`:

            ```javascript
            "use client";
            import { Encatch } from "@encatch/web-sdk";
            import { useEffect } from "react";

            export default function EncatchComponent() {
              useEffect(() => {
                const encatch = new Encatch();
                encatch.init("<YOUR_PROJECT_API_KEY>");
              }, []);

              return null;
            }
            ```
          </Step>

          <Step>
            **Include in Layout**

            Add the component to your layout file:

            ```javascript
            import EncatchComponent from "@/components/EncatchComponent";

            export default function Layout({ children }) {
              return (
                <>
                  <Navbar />
                  <EncatchComponent />
                  <main>{children}</main>
                  <Footer />
                </>
              );
            }
            ```
          </Step>
        </Steps>
      </Tab>
    </Tabs>
  </Accordion>
</Accordions>

#### For enterprise version

```ts
encatch.init('<YOUR_PROJECT_API_KEY>', {
  host: 'https://your-encatch-instance'
});
```

## How to use

### Getting the encatch instance

Post Initialization, you need to get the encatch instance.

```javascript
const encatch = Encatch.getInstance();
```

### SDK Lifecycle Management

The Encatch Web SDK provides flexible lifecycle control through the `autoStartEnabled` configuration flag and the `start()` / `stop()` methods.

<Accordions>
  <Accordion title="Initialization Options">
    <Tabs items={['Initialization Modes','start()','stop()','Usage Patterns']}>
      <Tab value="Initialization Modes">
        <Tabs items={['Auto Mode','Manual Mode']}>
          <Tab value="Auto Mode">
            **Auto Mode (`autoStartEnabled: true`)**

            The SDK automatically starts and begins fetching feedback configurations as soon as the page loads.

            ```javascript
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: true  // SDK starts automatically
            });
            ```

            **Behavior:**

            * SDK initializes immediately on page load
            * Automatically fetches eligible feedback configurations as anonymous user
            * Triggers and feedback rules activate automatically
            * User can be identified via `setUser()` at any time

            **Use Cases:**

            * Standard web applications where feedback should be available immediately
            * Sites where user identification happens after page load
            * Applications with anonymous user feedback
          </Tab>

          <Tab value="Manual Mode">
            **Manual Mode (`autoStartEnabled: false`)**

            The SDK waits for explicit initialization via the `start()` method.

            ```javascript
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: false  // SDK waits for start() call
            });
            ```

            **Behavior:**

            * SDK loads but remains inactive
            * No API calls are made until `start()` is called
            * No feedback configurations are fetched
            * Full developer control over when SDK becomes active

            **Use Cases:**

            * Applications requiring user consent before tracking (GDPR compliance)
            * Authenticated-only feedback (start SDK after login)
            * Conditional SDK activation based on user role/permissions
            * Performance optimization (delay SDK until after critical page rendering)
          </Tab>
        </Tabs>
      </Tab>

      <Tab value="start()">
        **`encatch.start(userId?, traits?)`**

        Activates the SDK and optionally identifies a user.

        **Parameters:**

        <TypeTable
          type={{
    userId: {
      description: 'Unique identifier for the user',
      type: 'string',
      default: 'undefined',
      required: false
    },
    traits: {
      description: 'User properties and traits (see User Identification section)',
      type: 'object',
      default: 'undefined',
      required: false
    }
  }}
        />

        **Behavior:**

        * Changes `autoStartEnabled` from false to true
        * Fetches eligible feedback configurations for that user
        * Activates triggers and feedback rules
        * If called when already started, does nothing (no-op)

        <Accordions>
          <Accordion title="Example Usage">
            ```javascript
            // Basic start without user identification
            encatch.start();

            // Start with user identification
            encatch.start("user_12345", {
              $set: {
                email: "user@example.com",
                plan: "premium"
              }
            });

            // Consent-based activation
            document.getElementById('accept-cookies').addEventListener('click', () => {
              encatch.start();
            });

            // Post-login activation
            async function handleLogin(credentials) {
              const user = await authenticateUser(credentials);

              encatch.start(user.id, {
                $set: {
                  email: user.email,
                  accountType: user.accountType
                }
              });
            }
            ```
          </Accordion>
        </Accordions>
      </Tab>

      <Tab value="stop()">
        **`encatch.stop()`**

        Deactivates the SDK with behavior dependent on the original initialization mode.

        <Accordions>
          <Accordion title="Behaviour in Manual Mode">
            **Behavior (Manual Mode - `autoStartEnabled: false`):**

            Complete Reset - Everything is cleared:

            * Clears all pending and submitted feedbacks
            * Removes frequency tracking data
            * Erases user identification data
            * Removes cached configuration
            * Sets `autoStartEnabled` back to false
            * SDK returns to inactive state

            ```javascript
            // Original initialization with manual mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: false
            });

            // Later...
            encatch.start();
            // ... SDK is active ...

            encatch.stop();
            // Result: COMPLETE RESET
            // Must call start() again to reactivate
            ```
          </Accordion>

          <Accordion title="Behaviour in Auto Mode">
            **Behavior (Auto Mode - `autoStartEnabled: true`):**

            User Anonymization Only - SDK keeps running:

            * Makes user anonymous (calls `setUser()` with no params)
            * SDK remains active (`autoStartEnabled` stays true)
            * Does NOT clear feedbacks
            * Does NOT clear frequency tracking
            * Does NOT clear configuration

            ```javascript
            // Original initialization with auto mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: true
            });

            // Later...
            encatch.setUser("user_123", { email: "user@example.com" });

            encatch.stop();
            // Result: USER ANONYMIZATION
            // User becomes anonymous, SDK still active
            ```

            **Use Cases:**

            * Logout handler (behavior depends on initialization)
            * GDPR consent withdrawal
            * User session termination
          </Accordion>
        </Accordions>
      </Tab>

      <Tab value="Usage Patterns">
        **Common Implementation Patterns:**

        <Accordions type="single">
          <Accordion title="Consent-First Activation">
            ```javascript
            // Initialize in manual mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: false
            });

            // Show consent banner
            showConsentBanner({
              onAccept: () => {
                encatch.start();
              },
              onDecline: () => {
                // SDK remains inactive
              }
            });
            ```
          </Accordion>

          <Accordion title="Authentication-Required Feedback">
            ```javascript
            // Initialize in manual mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: false
            });

            // Start after authentication
            async function onAuthSuccess(user) {
              encatch.start(user.id, {
                $set: {
                  email: user.email,
                  role: user.role
                }
              });
            }

            // Stop on logout
            function onLogout() {
              encatch.stop(); // Complete reset
            }
            ```
          </Accordion>

          <Accordion title="Anonymous-First, Identify Later">
            ```javascript
            // Initialize in auto mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: true  // Starts immediately, anonymous
            });

            // Identify user after they log in
            function onLogin(user) {
              encatch.setUser(user.id, {
                $set: { email: user.email }
              });
            }

            // Anonymize on logout (SDK keeps running)
            function onLogout() {
              encatch.stop(); // User becomes anonymous
            }
            ```
          </Accordion>

          <Accordion title="Role-Based Activation">
            ```javascript
            // Initialize in manual mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              autoStartEnabled: false
            });

            // Only start for certain user roles
            async function initializeForUser(user) {
              if (user.role === 'beta-tester' || user.role === 'premium') {
                encatch.start(user.id, {
                  $set: {
                    role: user.role,
                    segment: 'feedback-enabled'
                  }
                });
              }
            }
            ```
          </Accordion>
        </Accordions>

        **Troubleshooting:**

        **Issue:** SDK not showing feedback after initialization

        * **Solution:** Check if you're in manual mode and call `start()`

        **Issue:** `stop()` not clearing data

        * **Reason:** SDK was initialized with `autoStartEnabled: true` (auto mode)
        * **Solution:** Initialize with `autoStartEnabled: false` for complete reset behavior

        **Issue:** `start()` called but nothing happens

        * **Reason:** SDK already started (`autoStartEnabled: true`)
        * **Solution:** Check initialization value
      </Tab>
    </Tabs>
  </Accordion>
</Accordions>

### User Identification

The Encatch Web SDK provides a powerful user identification system through the `setUser()` method. This allows you to track users across sessions, associate feedback with specific users, and manage user properties with advanced operators for counters, one-time values, and property removal.

**Method:** `encatch.setUser(userId?, traits?)`

Identifies a user or makes them anonymous.

**Parameters:**

<TypeTable
  type={{
  userId: {
    description: 'Unique identifier for the user (typically email, user ID, or username). Omit or pass null/undefined to make user anonymous.',
    type: 'string',
    default: 'undefined',
    required: false
  },
  traits: {
    description: 'User properties and attributes. Supports special operators: $set, $set_once, $counter, $unset',
    type: 'object',
    default: 'undefined',
    required: false
  }
}}
/>

<Tabs items={['Core Concepts','Basic Usage','Property Operators','Combining Operators','Usage Patterns']}>
  <Tab value="Core Concepts">
    **User Identity Structure**

    Every user in Encatch has two components:

    ```javascript
    {
      userName: string,      // Unique identifier (typically email or user ID)
      properties: {          // User traits and attributes
        $set?: {...},        // Properties to set/update
        $set_once?: {...},   // Properties to set only once
        $counter?: {...},    // Numeric counters (increment/decrement)
        $unset?: [...],      // Properties to remove
      }
    }
    ```

    **Anonymous vs Identified Users**

    * **Anonymous User**: No userName or `userName: ""` - feedback is tracked but not associated with a specific identity
    * **Identified User**: Has a userName - feedback is associated with this user across sessions and devices
  </Tab>

  <Tab value="Basic Usage">
    <Tabs items={['Identify User','Make Anonymous','With Properties']}>
      <Tab value="Identify User">
        ```javascript
        // Basic identification with just user ID
        encatch.setUser("user_12345");

        // Identification with email
        encatch.setUser("user@example.com");
        ```
      </Tab>

      <Tab value="Make Anonymous">
        ```javascript
        // Call setUser() with no parameters
        encatch.setUser();

        // Or explicitly pass undefined
        encatch.setUser(undefined);
        ```

        **What happens:**

        * User identification is cleared
        * User becomes anonymous: `{ userName: "", properties: {} }`
        * Feedback configuration is re-fetched for anonymous context
        * Previous user data is removed from localStorage
      </Tab>

      <Tab value="With Properties">
        ```javascript
        // Identification with properties
        encatch.setUser("user@example.com", {
          $set: {
            name: "John Doe",
            plan: "premium",
            email: "user@example.com"
          }
        });
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="Property Operators">
    <Tabs items={['$set','$set_once','$counter','$unset']}>
      <Tab value="$set">
        **Set or Update Properties**

        Sets properties on the user profile. If the property already exists, it will be overwritten.

        ```javascript
        encatch.setUser("user@example.com", {
          $set: {
            name: "John Doe",
            email: "user@example.com",
            plan: "premium",
            lastLogin: "2024-01-15T10:30:00Z",
            preferences: {
              theme: "dark",
              language: "en",
              notifications: true
            },
            metadata: {
              source: "web",
              version: "2.1.0"
            }
          }
        });
        ```

        **Use Cases:**

        * User profile information (name, email, company)
        * Current subscription tier or plan
        * User preferences and settings
        * Last activity timestamps
        * Any property that should be updated on each call

        **Behavior:**

        * Overwrites existing values
        * Creates new properties if they don't exist
        * Supports nested objects
        * Supports any data type (string, number, boolean, object, array)
      </Tab>

      <Tab value="$set_once">
        **Set Properties Only Once**

        Sets properties only if they don't already exist. Will NOT overwrite existing values.

        ```javascript
        encatch.setUser("user@example.com", {
          $set_once: {
            firstSeen: "2024-01-01T00:00:00Z",
            signupMethod: "oauth",
            registrationSource: "google",
            originalReferrer: "https://google.com",
            initialPlan: "free"
          }
        });
        ```

        **Use Cases:**

        * First seen / registration date
        * Signup method (oauth, email, etc.)
        * Original traffic source / UTM parameters
        * Initial subscription tier
        * Any immutable property that should never change

        **Behavior:**

        * Sets value only if property doesn't exist
        * Does NOT overwrite if property already exists
        * Perfect for tracking "first time" data

        **Example Sequence:**

        ```javascript
        // First call - sets the property
        encatch.setUser("user@example.com", {
          $set_once: { signupMethod: "email" }
        });
        // Result: signupMethod = "email"

        // Second call - does NOT overwrite
        encatch.setUser("user@example.com", {
          $set_once: { signupMethod: "oauth" }
        });
        // Result: signupMethod = "email" (unchanged)
        ```
      </Tab>

      <Tab value="$counter">
        **Increment/Decrement Numeric Values**

        Maintains numeric counters that can be incremented or decremented.

        ```javascript
        encatch.setUser("user@example.com", {
          $counter: {
            feedbackCount: 1,      // Increment by 1
            loginCount: 1,         // Increment by 1
            pageViews: 5,          // Increment by 5
            sessionCount: 1,       // Increment by 1
            errorCount: -1         // Decrement by 1
          }
        });
        ```

        **Use Cases:**

        * Track number of feedbacks submitted
        * Count login sessions
        * Track page views
        * Count feature usage
        * Track errors or failures (using negative values to decrement)

        **Behavior:**

        * Adds to existing value (or creates with initial value if doesn't exist)
        * Supports positive values (increment)
        * Supports negative values (decrement)
        * Server-side aggregation ensures accurate counts

        **Example Sequence:**

        ```javascript
        // Initial call
        encatch.setUser("user@example.com", {
          $counter: { loginCount: 1 }
        });
        // Result: loginCount = 1

        // Second call
        encatch.setUser("user@example.com", {
          $counter: { loginCount: 1 }
        });
        // Result: loginCount = 2

        // Decrementing
        encatch.setUser("user@example.com", {
          $counter: { credits: 10 }
        });
        // Result: credits = 10

        encatch.setUser("user@example.com", {
          $counter: { credits: -3 }
        });
        // Result: credits = 7
        ```
      </Tab>

      <Tab value="$unset">
        **Remove Properties**

        Removes properties from the user profile.

        ```javascript
        encatch.setUser("user@example.com", {
          $unset: ["trialFlag", "onboardingComplete", "temporaryData"]
        });
        ```

        **Use Cases:**

        * Remove temporary flags
        * Clean up completed onboarding state
        * Remove expired trial indicators
        * Delete obsolete properties

        **Behavior:**

        * Removes specified properties from user profile
        * No error if property doesn't exist
        * Accepts array of property names (strings)
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="Combining Operators">
    You can use multiple operators in a single `setUser()` call:

    ```javascript
    encatch.setUser("user@example.com", {
      // Set regular properties
      $set: {
        lastLogin: new Date().toISOString(),
        currentPlan: "premium",
        status: "active"
      },

      // Set properties only once
      $set_once: {
        firstSeen: "2024-01-01T00:00:00Z",
        signupMethod: "oauth"
      },

      // Increment counters
      $counter: {
        loginCount: 1,
        pageViews: 1,
        sessionCount: 1
      },

      // Remove obsolete properties
      $unset: ["trialExpired", "onboardingStep"]
    });
    ```
  </Tab>

  <Tab value="Advanced Usage Patterns">
    <Accordions type="single">
      <Accordion title="Common Implementation Patterns">
        <Tabs items={['Login Flow','Logout Flow','Registration','Subscription Upgrade','Feature Tracking','Onboarding','Error Tracking']}>
          <Tab value="Login Flow">
            ```javascript
            // On successful login
            async function handleLogin(credentials) {
              const user = await authenticateUser(credentials);

              encatch.setUser(user.email, {
                $set: {
                  email: user.email,
                  name: user.name,
                  plan: user.subscriptionTier,
                  lastLogin: new Date().toISOString()
                },
                $set_once: {
                  firstLogin: user.createdAt,
                  signupMethod: user.authMethod
                },
                $counter: {
                  loginCount: 1,
                  sessionCount: 1
                }
              });
            }
            ```
          </Tab>

          <Tab value="Logout Flow">
            ```javascript
            // On logout - make user anonymous
            function handleLogout() {
              clearUserSession();

              // Make user anonymous
              encatch.setUser();

              // Or use stop() which also anonymizes (if SDK in auto mode)
              // encatch.stop();
            }
            ```
          </Tab>

          <Tab value="Registration">
            ```javascript
            // On new user registration
            async function handleRegistration(userData) {
              const user = await createUser(userData);

              encatch.setUser(user.email, {
                $set: {
                  email: user.email,
                  name: user.name,
                  plan: "free",
                  status: "active"
                },
                $set_once: {
                  registeredAt: new Date().toISOString(),
                  signupMethod: userData.method,
                  referralSource: userData.utm_source || "direct",
                  initialPlan: "free"
                },
                $counter: {
                  feedbackCount: 0,
                  loginCount: 1
                }
              });
            }
            ```
          </Tab>

          <Tab value="Subscription Upgrade">
            ```javascript
            // When user upgrades subscription
            function handleSubscriptionUpgrade(newPlan) {
              encatch.setUser(currentUser.email, {
                $set: {
                  plan: newPlan,
                  upgradeDate: new Date().toISOString(),
                  status: "premium"
                },
                $counter: {
                  upgradeCount: 1
                }
              });
            }
            ```
          </Tab>

          <Tab value="Feature Tracking">
            ```javascript
            // Track when user uses a specific feature
            function trackFeatureUsage(featureName) {
              encatch.setUser(currentUser.email, {
                $set: {
                  lastFeatureUsed: featureName,
                  lastActivity: new Date().toISOString()
                },
                $counter: {
                  [`${featureName}Count`]: 1,
                  totalFeatureUsage: 1
                }
              });
            }
            ```
          </Tab>

          <Tab value="Onboarding">
            ```javascript
            // Start onboarding
            function startOnboarding() {
              encatch.setUser(user.email, {
                $set: {
                  onboardingStep: 1,
                  onboardingStarted: new Date().toISOString()
                },
                $set_once: {
                  firstOnboardingDate: new Date().toISOString()
                }
              });
            }

            // Complete onboarding
            function completeOnboarding() {
              encatch.setUser(user.email, {
                $set: {
                  onboardingCompleted: new Date().toISOString()
                },
                $unset: ["onboardingStep"],  // Remove temporary step tracking
                $counter: {
                  onboardingCompletions: 1
                }
              });
            }
            ```
          </Tab>

          <Tab value="Error Tracking">
            ```javascript
            // Track user errors
            function trackUserError(errorType) {
              encatch.setUser(currentUser.email, {
                $set: {
                  lastError: errorType,
                  lastErrorTime: new Date().toISOString()
                },
                $counter: {
                  [`${errorType}Count`]: 1,
                  totalErrors: 1
                }
              });
            }

            // Track error resolution
            function trackErrorResolution() {
              encatch.setUser(currentUser.email, {
                $counter: {
                  errorsResolved: 1,
                  totalErrors: -1  // Decrement total errors
                }
              });
            }
            ```
          </Tab>
        </Tabs>
      </Accordion>

      <Accordion title="Integration with SDK Lifecycle">
        <Tabs items={['Auto Mode','Manual Mode','Initial Config']}>
          <Tab value="Auto Mode">
            ```javascript
            // Initialize SDK in auto mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              host: "https://api.encatch.com",
              autoStartEnabled: true
            });

            // Later, identify user (SDK already running)
            encatch.setUser("user@example.com", {
              $set: { plan: "premium" }
            });
            ```
          </Tab>

          <Tab value="Manual Mode">
            ```javascript
            // Initialize SDK in manual mode
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              host: "https://api.encatch.com",
              autoStartEnabled: false
            });

            // Start SDK and identify user simultaneously
            encatch.start("user@example.com", {
              $set: {
                email: "user@example.com",
                plan: "premium"
              }
            });

            // Or start first, then identify
            encatch.start();
            encatch.setUser("user@example.com", {
              $set: { plan: "premium" }
            });
            ```
          </Tab>

          <Tab value="Initial Config">
            ```javascript
            // Provide user info in initial configuration
            encatch.init('<YOUR_PROJECT_API_KEY>', {
              host: "https://api.encatch.com",
              autoStartEnabled: true,
              setUser: {
                userId: "user@example.com",
                traits: {
                  $set: {
                    plan: "premium",
                    name: "John Doe"
                  }
                }
              }
            });
            ```
          </Tab>
        </Tabs>
      </Accordion>
    </Accordions>
  </Tab>
</Tabs>

### Custom Properties with Feedback Submission

Attach custom metadata to feedback submissions. Send additional context like feature names, user segments, experiment IDs, or any key-value data with each feedback.

<Accordions type="single">
  <Accordion title="Basic Usage">
    <Tabs items={['Set Globally','Set Per-Feedback']}>
      <Tab value="Set Globally">
        Set custom properties that apply to all future feedback submissions:

        ```javascript
        encatch.setCustomProperties({
          currentFeature: "Dashboard",
          userSegment: "Premium",
          experimentId: "exp_123"
        });
        ```

        **Use Cases:**

        * App version tracking
        * User tier/plan information
        * Environment (production/staging)
        * Current feature or page context
        * Session-level metadata
      </Tab>

      <Tab value="Set Per-Feedback">
        Pass custom properties when opening a specific feedback form:

        ```javascript
        // By ID
        encatch.openFeedbackById(
          "fc_abc123",              // Feedback configuration ID
          "light",                  // Theme (optional)
          "en",                     // Language (optional)
          null,                     // Event (optional)
          {                         // Custom properties
            pageName: "Product Details",
            productId: "prod_456",
            pricePoint: "Premium"
          }
        );

        // By name
        encatch.openFeedbackByName(
          "Product Feedback",
          "light",
          "en",
          null,
          {
            category: "Electronics",
            brand: "Apple",
            stock: "In Stock"
          }
        );
        ```

        **Use Cases:**

        * Product/item-specific context
        * Page-specific metadata
        * Temporary context for single feedback
        * Error details
        * Transaction information
      </Tab>
    </Tabs>

    **How It Works:**

    Custom properties are sent with feedback submissions as key-value pairs. All values must be strings (convert numbers and booleans to strings).

    **Property Format:**

    ```typescript
    {
      key: string;      // Property name
      value: string;    // Property value (must be string)
    }
    ```
  </Accordion>

  <Accordion title="Global vs Per-Feedback">
    <Tabs items={['Global Properties','Per-Feedback Properties','Combining Both']}>
      <Tab value="Global Properties">
        Set once, apply to all feedbacks until changed:

        ```javascript
        // Set global properties
        encatch.setCustomProperties({
          appVersion: "2.1.0",
          environment: "production",
          userTier: "Premium"
        });

        // All subsequent feedbacks include these properties
        encatch.openFeedbackById("fc_feature1");
        encatch.openFeedbackById("fc_feature2");
        ```
      </Tab>

      <Tab value="Per-Feedback Properties">
        Specific to one feedback instance:

        ```javascript
        // These properties only apply to this feedback
        encatch.openFeedbackById("fc_product", "light", "en", null, {
          productId: "prod_123",
          productName: "Widget Pro"
        });

        // Next feedback won't have productId/productName
        encatch.openFeedbackById("fc_general");
        ```
      </Tab>

      <Tab value="Combining Both">
        Per-feedback properties override global properties with the same key:

        ```javascript
        // Global
        encatch.setCustomProperties({
          environment: "production",
          feature: "Dashboard"
        });

        // Per-feedback (overrides 'feature')
        encatch.openFeedbackById("fc_abc123", "light", "en", null, {
          feature: "Settings",  // Overrides global 'feature'
          page: "Settings/Profile"
        });

        // Submitted properties:
        // - environment: "production" (from global)
        // - feature: "Settings" (overridden)
        // - page: "Settings/Profile" (from per-feedback)
        ```
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Common Examples">
    <Accordions type="single">
      <Accordion title="Feature Usage Tracking">
        ```javascript
        // Track current feature
        function onFeatureChange(featureName) {
          encatch.setCustomProperties({
            currentFeature: featureName,
            timestamp: new Date().toISOString()
          });
        }
        ```
      </Accordion>

      <Accordion title="Experiment Tracking">
        ```javascript
        // Track A/B test variant
        const experimentVariant = getExperimentVariant();

        encatch.setCustomProperties({
          experiment: "checkout_flow_test",
          variant: experimentVariant
        });
        ```
      </Accordion>

      <Accordion title="Product Context">
        ```javascript
        // When user views product page
        function showProductFeedback(product) {
          encatch.openFeedbackById("fc_product", "light", "en", null, {
            productId: product.id,
            productName: product.name,
            category: product.category,
            price: product.price.toString(),
            inStock: product.inStock.toString()
          });
        }
        ```
      </Accordion>

      <Accordion title="Error Context">
        ```javascript
        // Attach error details
        function reportBug(errorCode, errorMessage) {
          encatch.openFeedbackById("fc_bug_report", "light", "en", null, {
            errorCode: errorCode,
            errorMessage: errorMessage,
            userAgent: navigator.userAgent,
            timestamp: Date.now().toString()
          });
        }
        ```
      </Accordion>

      <Accordion title="Page Context">
        ```javascript
        // Track page information
        encatch.setCustomProperties({
          page: window.location.pathname,
          referrer: document.referrer,
          viewport: `${window.innerWidth}x${window.innerHeight}`
        });
        ```
      </Accordion>

      <Accordion title="Campaign Tracking">
        ```javascript
        // UTM parameters
        const urlParams = new URLSearchParams(window.location.search);

        encatch.setCustomProperties({
          utm_source: urlParams.get('utm_source') || "direct",
          utm_medium: urlParams.get('utm_medium') || "none",
          utm_campaign: urlParams.get('utm_campaign') || "none"
        });
        ```
      </Accordion>
    </Accordions>
  </Accordion>
</Accordions>

> **Important:** All property values must be strings. Convert numbers, booleans, and other types to strings before passing them.

### Triggers

The encatch SDK provides comprehensive event tracking capabilities with four distinct approaches: automatic event capture for common interactions, custom event tracking for business-specific metrics, scroll event tracking for engagement analysis, and manual feedback control for programmatic trigger management.

<Accordions type="single">
  <Accordion title="Manual">
    Override automatic triggering with manual control over feedback form presentation.

    <Tabs items={['openFeedbackById()','openFeedbackByName()']}>
      <Tab value="openFeedbackById()">
        Display a specific feedback form by its unique identifier.

        **Example Usage:**

        ```javascript
        // Basic usage
        encatch.openFeedbackById('feedback_config_123');

        // With theme and language overrides
        encatch.openFeedbackById('feedback_config_123', 'dark', 'es');

        // With event context for tracking
        encatch.openFeedbackById('feedback_config_123', 'light', 'en', 'button_click');
        ```

        **Use Cases:**

        * Programmatic feedback form display
        * Integration with existing UI components
        * Custom feedback triggers
        * A/B testing specific feedback forms

        **Parameters:**

        <TypeTable
          type={{
      feedbackId: {
        description: 'Unique feedback configuration ID',
        type: 'string',
        required: true
      },
      theme: {
        description: 'Override default theme for the feedback form',
        type: '"light" | "dark"',
        default: 'Current theme setting',
        required: false
      },
      language: {
        description: 'Override default language for the feedback form',
        type: 'string',
        default: 'Current language setting',
        required: false
      },
      eventContext: {
        description: 'Event context for analytics and tracking',
        type: 'string',
        default: 'undefined',
        required: false
      }
    }}
        />
      </Tab>

      <Tab value="openFeedbackByName()">
        Display a feedback form by its configured title/name.

        **Example Usage:**

        ```javascript
        // Open by form title
        encatch.openFeedbackByName('Product Satisfaction Survey');

        // With customization options
        encatch.openFeedbackByName('Feature Feedback', 'dark', 'fr', 'feature_usage');
        ```

        **Use Cases:**

        * Content-driven feedback display
        * User-friendly feedback triggers
        * CMS integration scenarios
        * Non-technical implementation

        **Parameters:**

        <TypeTable
          type={{
      feedbackTitle: {
        description: 'Display name of the feedback form',
        type: 'string',
        required: true
      },
      theme: {
        description: 'Override default theme for the feedback form',
        type: '"light" | "dark"',
        default: 'Current theme setting',
        required: false
      },
      language: {
        description: 'Override default language for the feedback form',
        type: 'string',
        default: 'Current language setting',
        required: false
      },
      eventContext: {
        description: 'Event context for analytics and tracking',
        type: 'string',
        default: 'undefined',
        required: false
      }
    }}
        />
      </Tab>
    </Tabs>

    > **Best Practice:** Use feedback IDs for programmatic control and names for content-driven scenarios. IDs are more stable across configuration changes.
  </Accordion>

  <Accordion title="Automatic">
    **Auto-captured Events**: The SDK automatically tracks common user interactions and page events without any manual implementation required.

    <Accordions type="single">
      <Accordion title="Properties">
        | Event              | Description                             | Properties                                               |
        | ------------------ | --------------------------------------- | -------------------------------------------------------- |
        | `page_view`        | Page navigation and route changes       | `path`, `title`, `referrer`, `timestamp`                 |
        | `session_start`    | User session initialization             | `session_id`, `user_agent`, `device_info`                |
        | `click`            | User clicks on interactive elements     | `element_id`, `element_type`, `location`, `text_content` |
        | `form_interaction` | Form field focus, input, and validation | `field_name`, `field_type`, `interaction_type`           |
        | `error`            | JavaScript errors and exceptions        | `message`, `stack_trace`, `line_number`, `column_number` |
        | `performance`      | Page load and performance metrics       | `load_time`, `dom_content_loaded`, `first_paint`         |
      </Accordion>
    </Accordions>

    **Configuration:**

    ```javascript
    // Disable automatic event tracking
    encatch.init('<YOUR_PROJECT_API_KEY>', {
      isAutoCaptureEnabled: false
    });

    // Enable specific auto-events only
    encatch.init('<YOUR_PROJECT_API_KEY>', {
      isAutoCaptureEnabled: true,
      autoCaptureConfig: {
        pageViews: true,
        clicks: true,
        errors: true,
        performance: false,
        forms: true
      }
    });
    ```

    **Use Cases:**

    * Basic user behavior analytics without custom implementation
    * Page engagement and navigation tracking
    * Error monitoring and debugging
    * Performance analysis
    * Form abandonment analysis

    **Automatic Context Enrichment:**
    All auto-captured events are automatically enhanced with:

    * Current page path and title
    * Session information and user identity
    * Device and browser metadata
    * Timestamp and user agent
    * Geographic location (if available)
  </Accordion>

  <Accordion title="Custom Event">
    **Custom Events**: Track specific events that are unique to your application's needs and business logic using the `trackEvent` method.

    **`trackEvent(eventName, properties?)`**

    **Use Cases:**

    * User behavior analytics
    * Feature usage tracking
    * Conversion funnel analysis
    * Custom business metrics
    * Application-specific interactions
    * A/B test tracking
    * User journey mapping

    **Parameters:**

    <TypeTable
      type={{
    eventName: {
      description: 'Unique identifier for the event',
      type: 'string',
      required: true
    },
    properties: {
      description: 'Additional event metadata and context',
      type: 'object',
      default: 'undefined',
      required: false
    }
  }}
    />

    **Example Usage:**

    ```javascript
    // Basic event tracking
    encatch.trackEvent('page_view');

    // E-commerce events
    encatch.trackEvent('purchase_completed', {
      productId: 'prod_123',
      amount: 99.99,
      currency: 'USD',
      category: 'electronics',
      quantity: 2,
      payment_method: 'credit_card'
    });

    // User interaction tracking
    encatch.trackEvent('button_click', {
      buttonId: 'cta-subscribe',
      location: 'hero-section',
      action: 'newsletter_signup',
      timestamp: Date.now()
    });

    // Feature usage tracking
    encatch.trackEvent('feature_used', {
      feature: 'advanced_search',
      filters_applied: ['price', 'category', 'rating'],
      results_count: 25,
      search_time: 1.2
    });

    // Video engagement
    encatch.trackEvent('video_interaction', {
      video_id: 'tutorial_101',
      action: 'play',
      current_time: 45,
      total_duration: 180,
      quality: '720p'
    });

    // Form analytics
    encatch.trackEvent('form_step_completed', {
      form_name: 'onboarding',
      step: 2,
      step_name: 'personal_info',
      time_spent: 120,
      completion_rate: 0.75
    });
    ```

    **Event Enhancement:**
    The SDK automatically enriches tracked events with:

    * Current page path and title
    * Session information and user identity
    * Device and browser metadata
    * Timestamp and user agent
    * Geographic location (if available)

    <Accordions type="single">
      <Accordion title="Enhanced Event Tracking">
        **Automatic Context Enrichment**

        All tracked events are automatically enhanced with contextual information:

        ```javascript
        // Basic event call
        encatch.trackEvent('purchase_completed', {
          product_id: 'item_123',
          amount: 99.99
        });

        // Automatically enhanced with:
        // {
        //   product_id: 'item_123',
        //   amount: 99.99,
        //   path: '/checkout/success',        // Current page path
        //   event: 'purchase_completed',      // Event name
        //   timestamp: 1642694400000,         // Unix timestamp
        //   session_id: 'sess_abc123',        // Session identifier
        //   user_agent: 'Mozilla/5.0...',     // Browser information
        //   referrer: 'https://google.com',   // Page referrer
        //   viewport: '1920x1080'             // Screen resolution
        // }
        ```

        **Event-Driven Feedback Triggers**

        Events can automatically trigger relevant feedback forms based on your configuration:

        ```javascript
        // E-commerce example
        encatch.trackEvent('purchase_completed', {
          order_id: 'order_123',
          total: 149.99,
          items_count: 3
        });
        // May trigger post-purchase satisfaction survey

        // Feature usage example
        encatch.trackEvent('feature_used', {
          feature: 'advanced_search',
          user_type: 'premium',
          success: true
        });
        // May trigger feature-specific feedback form

        // Support interaction example
        encatch.trackEvent('support_chat_ended', {
          duration: 180, // seconds
          resolved: true,
          agent_id: 'agent_456'
        });
        // May trigger support experience survey
        ```
      </Accordion>
    </Accordions>
  </Accordion>

  <Accordion title="Scroll Event">
    **Scroll Events**: Track user engagement and reading behavior through scroll depth analytics, perfect for content optimization and user experience insights.

    **`captureScrollEvent(scrollPercent)`**

    **Use Cases:**

    * Content engagement analysis
    * Reading behavior tracking
    * Page performance optimization
    * A/B testing scroll depth
    * Content length optimization
    * User experience research
    * Conversion funnel analysis

    **Parameters:**

    <TypeTable
      type={{
    scrollPercent: {
      description: 'Percentage scrolled (0-100)',
      type: 'number',
      required: true
    }
  }}
    />

    **Example Usage:**

    ```javascript
    // Basic page scroll tracking
    window.addEventListener('scroll', () => {
      const scrollPercent = Math.round(
        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
      );
      encatch.captureScrollEvent(scrollPercent);
    });

    // Article reading progress
    const articleElement = document.getElementById('article-content');
    articleElement.addEventListener('scroll', () => {
      const scrollPercent = Math.round(
        (articleElement.scrollTop / (articleElement.scrollHeight - articleElement.clientHeight)) * 100
      );
      encatch.captureScrollEvent(scrollPercent);
    });

    // Custom container scroll tracking
    const scrollableDiv = document.getElementById('product-list');
    scrollableDiv.addEventListener('scroll', () => {
      const scrollPercent = Math.round(
        (scrollableDiv.scrollTop / (scrollableDiv.scrollHeight - scrollableDiv.clientHeight)) * 100
      );
      encatch.captureScrollEvent(scrollPercent);
    });

    // Manual scroll capture
    encatch.captureScrollEvent(25);  // 25% scrolled
    encatch.captureScrollEvent(50);  // 50% scrolled
    encatch.captureScrollEvent(75);  // 75% scrolled
    encatch.captureScrollEvent(100); // 100% scrolled
    ```

    **Scroll Milestones:**

    ```javascript
    // Track common scroll milestones
    const milestones = [25, 50, 75, 100];
    let trackedMilestones = new Set();

    window.addEventListener('scroll', () => {
      const scrollPercent = Math.round(
        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
      );

      milestones.forEach(milestone => {
        if (scrollPercent >= milestone && !trackedMilestones.has(milestone)) {
          encatch.captureScrollEvent(milestone);
          trackedMilestones.add(milestone);

          // Optional: Track milestone achievement
          encatch.trackEvent('scroll_milestone_reached', {
            milestone: milestone,
            page: window.location.pathname,
            time_to_reach: Date.now() - pageLoadTime
          });
        }
      });
    });
    ```

    > **Note:** This method accepts a single number representing the scroll percentage (0-100). Your application must calculate the scroll percentage from any scrollable element before passing it to the method.
  </Accordion>
</Accordions>

### UI Customization

Dynamically control the appearance and localization of feedback forms and interfaces.

<Accordions type="single">
  <Accordion title="Theme">
    **`setThemeMode(theme)`**

    <TypeTable
      type={{
  theme: {
    description: 'Theme mode for the interface',
    type: '"light" | "dark"',
    required: true
  }
}}
    />

    **Example Usage:**

    ```javascript
    // Basic theme switching
    encatch.setThemeMode('dark');   // Switch to dark theme
    encatch.setThemeMode('light');  // Switch to light theme

    ```

    **Use Cases:**

    * Dark mode toggle implementation
    * System theme synchronization
    * User preference persistence
    * Accessibility compliance
  </Accordion>

  <Accordion title="Language">
    **`setLanguage(languageCode)`**

    <TypeTable
      type={{
  languageCode: {
    description: 'ISO 639-1 language code for UI localization',
    type: 'string',
    required: true
  }
}}
    />

    **Example Usage:**

    ```javascript
    // Language localization
    encatch.setLanguage('es');      // Spanish
    encatch.setLanguage('fr');      // French
    encatch.setLanguage('de');      // German
    encatch.setLanguage('YOUR_ADMIN_CONFIG_LANGUAGE_CODE');
    ```

    **Use Cases:**

    * Internationalization (i18n) implementation
    * Multi-language application support
    * User language preference persistence
    * Browser language detection and fallback

    > **Note:** Language changes affect all subsequent feedback forms. You may ideally call this when user switches languages in your application.
  </Accordion>
</Accordions>

### Feedback Event Listeners

Listen to form interactions in real-time. Track when users view, submit, close forms, change sections, answer questions, or encounter errors.

**Two Ways to Subscribe:**

1. **Configuration-time** - Register during SDK initialization (simple, automatic cleanup)
2. **Runtime** - Register anytime with `encatch.on()` (flexible, component-scoped)

<Accordions type="single">
  <Accordion title="Event Types">
    | Event                    | When It Fires                   |
    | ------------------------ | ------------------------------- |
    | `form:view`              | Feedback form opens             |
    | `form:submit`            | User submits feedback           |
    | `form:close`             | User closes/dismisses form      |
    | `form:section:change`    | User navigates between sections |
    | `form:question:answered` | User answers any question       |
    | `form:error`             | Validation or API error occurs  |
  </Accordion>

  <Accordion title="Subscription Methods">
    <Tabs items={['Configuration-Time','Runtime','Comparison']}>
      <Tab value="Configuration-Time">
        **Configuration-Time (Simple)**

        Register listeners during initialization. Best for static, application-wide handlers.

        ```javascript
        encatch.init('<YOUR_PROJECT_API_KEY>', {
          host: "https://api.encatch.com",
          autoStartEnabled: true,

          onFormEvent: (formEvent) => {
            formEvent.onView((data) => {
              console.log('Form viewed:', data);
            });

            formEvent.onSubmit((data) => {
              console.log('Form submitted:', data);
              // Show success message
              alert('Thank you for your feedback!');
            });

            formEvent.onClose((data) => {
              console.log('Form closed');
            });
          }
        });
        ```

        **Available Methods:**

        <TypeTable
          type={{
    'formEvent.onView': {
      description: 'Called when feedback form opens',
      type: '(callback: (data) => void) => void'
    },
    'formEvent.onSubmit': {
      description: 'Called when user submits feedback',
      type: '(callback: (data) => void) => void'
    },
    'formEvent.onClose': {
      description: 'Called when user closes/dismisses form',
      type: '(callback: (data) => void) => void'
    },
    'formEvent.onSectionChange': {
      description: 'Called when user navigates between sections',
      type: '(callback: (data) => void) => void'
    },
    'formEvent.onQuestionAnswered': {
      description: 'Called when user answers any question',
      type: '(callback: (data) => void) => void'
    },
    'formEvent.onError': {
      description: 'Called when validation or API error occurs',
      type: '(callback: (data) => void) => void'
    }
  }}
        />

        **Pros:**

        * Simple setup
        * Automatic cleanup
        * No memory leaks
        * Perfect for vanilla JS apps

        **Cons:**

        * Static only
        * Can't unsubscribe
        * One handler per event type
      </Tab>

      <Tab value="Runtime">
        **Runtime (Flexible)**

        Subscribe anytime after SDK loads. Best for component-scoped logic and dynamic behavior.

        ```javascript
        // Subscribe
        const unsubscribe = encatch.on('form:submit', (data) => {
          console.log('Form submitted:', data);
          alert('Thank you!');
        });

        // Later, unsubscribe
        unsubscribe();
        ```

        **All Event Types:**

        ```javascript
        encatch.on('form:view', callback);
        encatch.on('form:submit', callback);
        encatch.on('form:close', callback);
        encatch.on('form:section:change', callback);
        encatch.on('form:question:answered', callback);
        encatch.on('form:error', callback);
        ```

        **Pros:**

        * Dynamic subscription
        * Component-scoped
        * Multiple handlers per event
        * Full control over lifecycle
        * Unsubscribe when needed

        **Cons:**

        * Must manage cleanup manually
        * Risk of memory leaks if forgotten
      </Tab>

      <Tab value="Comparison">
        **When to Use Each Method**

        **Use Configuration-Time When:**

        * Simple static handlers
        * Application-wide tracking
        * No need for cleanup
        * Vanilla JS apps
        * Analytics integration

        **Use Runtime When:**

        * React/Vue/Angular components
        * Need to unsubscribe
        * Dynamic behavior
        * Multiple independent handlers
        * Third-party plugins
        * Component lifecycle management
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Event Payloads">
    <Accordions type="single">
      <Accordion title="form:view">
        Fired when feedback form opens.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          feedbackIdentifier: "fi_xyz789",
          timestamp: 1705334400000
        }
        ```
      </Accordion>

      <Accordion title="form:submit">
        Fired when user submits feedback.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          feedbackIdentifier: "fi_xyz789",
          response: {
            sections: [
              {
                sectionId: "s1",
                questions: [
                  { questionId: "q1", answer: "Very satisfied" }
                ]
              }
            ]
          },
          timestamp: 1705334460000
        }
        ```
      </Accordion>

      <Accordion title="form:close">
        Fired when user closes/dismisses form.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          feedbackIdentifier: "fi_xyz789",
          timestamp: 1705334470000
        }
        ```
      </Accordion>

      <Accordion title="form:section:change">
        Fired when user navigates between sections.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          sectionIndex: 1,
          sectionId: "section_2",
          timestamp: 1705334430000
        }
        ```
      </Accordion>

      <Accordion title="form:question:answered">
        Fired when user answers any question.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          questionId: "q_rating_1",
          questionType: "rating",
          answer: 5,
          timestamp: 1705334445000
        }
        ```
      </Accordion>

      <Accordion title="form:error">
        Fired when validation or API error occurs.

        ```typescript
        {
          feedbackConfigurationId: "fc_abc123",
          questionId: "q_email_1",
          error: "Invalid email format",
          timestamp: 1705334455000
        }
        ```
      </Accordion>
    </Accordions>
  </Accordion>

  <Accordion title="Common Use Cases">
    <Accordions type="single">
      <Accordion title="Analytics Tracking">
        ```javascript
        encatch.on('form:submit', (data) => {
          // Google Analytics
          gtag('event', 'feedback_submit', {
            form_id: data.feedbackConfigurationId
          });

          // Mixpanel
          mixpanel.track('Feedback Submitted', data);
        });
        ```
      </Accordion>

      <Accordion title="Show Success Message">
        ```javascript
        encatch.on('form:submit', (data) => {
          showNotification('Thank you for your feedback!', 'success');
        });
        ```
      </Accordion>

      <Accordion title="Track Low Ratings">
        ```javascript
        encatch.on('form:submit', (data) => {
          // Check if rating is low
          const rating = data.response.sections
            ?.flatMap(s => s.questions)
            ?.find(q => q.questionType === 'rating')?.answer;

          if (rating <= 2) {
            notifySupport('Low rating received', data);
          }
        });
        ```
      </Accordion>

      <Accordion title="React Component Integration">
        ```javascript
        function FeedbackTracker() {
          useEffect(() => {
            const unsub = encatch.on('form:submit', (data) => {
              console.log('Submitted:', data);
            });

            return () => unsub(); // Cleanup on unmount
          }, []);

          return null;
        }
        ```
      </Accordion>

      <Accordion title="Track Form Abandonment">
        ```javascript
        let viewTime = null;

        encatch.on('form:view', () => {
          viewTime = Date.now();
        });

        encatch.on('form:close', (data) => {
          if (viewTime) {
            const timeSpent = Date.now() - viewTime;
            analytics.track('Form Abandoned', { timeSpent });
          }
        });

        encatch.on('form:submit', () => {
          viewTime = null; // Reset if submitted
        });
        ```
      </Accordion>
    </Accordions>
  </Accordion>
</Accordions>

### Custom CSS Styling

Customize the appearance of feedback forms by providing your own CSS stylesheet URL. Override default styles to match your brand's design system.

<Accordions type="single">
  <Accordion title="Basic Setup">
    Provide a URL to your custom CSS file during SDK initialization:

    ```javascript
    encatch.init('<YOUR_PROJECT_API_KEY>', {
      host: "https://api.encatch.com",
      customCssLink: "https://your-domain.com/styles/feedback-custom.css"
    });
    ```
  </Accordion>

  <Accordion title="CSS Loading Priority">
    The SDK loads CSS in the following order (later styles override earlier ones):

    1. **Default SDK styles** - Base styles from encatch-web-sdk.css
    2. **Your global custom CSS** - From `config.customCssLink` (SDK initialization)
    3. **Form-specific CSS** - From feedback configuration (set in admin dashboard)

    ```javascript
    // Your custom CSS (priority 2)
    encatch.init('<YOUR_PROJECT_API_KEY>', {
      customCssLink: "https://cdn.example.com/encatch-custom.css"
    });

    // Form-specific CSS (priority 3 - highest)
    // Set in admin dashboard: feedback configuration → appearance → custom CSS
    ```
  </Accordion>

  <Accordion title="Hosting Your CSS">
    <Tabs items={['CDN Hosting','Self-Hosting']}>
      <Tab value="CDN Hosting">
        **CDN Hosting (Recommended)**

        ```javascript
        encatch.init('<YOUR_PROJECT_API_KEY>', {
          customCssLink: "https://cdn.example.com/encatch-custom.css"
        });
        ```

        **Benefits:**

        * Fast loading via CDN
        * Browser caching
        * Easy to update
        * High availability
      </Tab>

      <Tab value="Self-Hosting">
        **Self-Hosting**

        ```javascript
        encatch.init('<YOUR_PROJECT_API_KEY>', {
          customCssLink: "https://yoursite.com/assets/feedback-styles.css"
        });
        ```

        **Requirements:**

        * Must be served over HTTPS
        * Must have proper CORS headers
        * Recommended cache headers for performance
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Troubleshooting">
    **Issue: CORS Error**

    ```
    Failed to load resource: net::ERR_BLOCKED_BY_CORS
    ```

    **Solution:** Add CORS headers to your server

    **Issue: Mixed Content Error**

    ```
    Mixed Content: The page was loaded over HTTPS, but requested an insecure stylesheet
    ```

    **Solution:** Use HTTPS for your CSS URL

    **Verify the URL is accessible:**

    ```javascript
    // Test in browser console
    console.log(encatch.config.customCssLink);
    // Open the URL in a new tab to verify it loads
    ```
  </Accordion>
</Accordions>

### Prepopulated Answers

Override default form behavior by prepopulating questions with predefined answers. Useful for carrying context from your application into the feedback form.

<Accordions type="single">
  <Accordion title="Answer Format">
    **Answer Format:**

    Each prepopulated answer has three properties:

    <TypeTable
      type={{
  sectionIndex: {
    description: 'Zero-based index of the section containing the question',
    type: 'number',
    required: true
  },
  questionIndex: {
    description: 'Zero-based index of the question within the section',
    type: 'number',
    required: true
  },
  value: {
    description: 'Answer value (format depends on question type)',
    type: 'Answer',
    required: true
  }
}}
    />
  </Accordion>

  <Accordion title="Supported Question Types">
    | Question Type    | Value Format                           | Example                                        |
    | ---------------- | -------------------------------------- | ---------------------------------------------- |
    | Short Answer     | `{ shortAnswer: string }`              | `{ shortAnswer: "Great!" }`                    |
    | Long Text        | `{ longText: string }`                 | `{ longText: "Detailed feedback here..." }`    |
    | NPS              | `{ nps: number }`                      | `{ nps: 9 }`                                   |
    | Rating           | `{ rating: number }`                   | `{ rating: 5 }`                                |
    | Single Choice    | `{ singleChoice: string }`             | `{ singleChoice: "option_id_1" }`              |
    | Multiple Choice  | `{ multipleChoiceMultiple: string[] }` | `{ multipleChoiceMultiple: ["opt1", "opt2"] }` |
    | Nested Selection | `{ nestedSelection: string[] }`        | `{ nestedSelection: ["cat1", "subcat2"] }`     |
  </Accordion>

  <Accordion title="Basic Usage">
    Pass prepopulated answers when opening a feedback form:

    <Tabs items={['openFeedbackById()','openFeedbackByName()']}>
      <Tab value="openFeedbackById()">
        ```javascript
        encatch.openFeedbackById(
          "fc_abc123",              // Feedback configuration ID
          "light",                  // Theme (optional)
          "en",                     // Language (optional)
          null,                     // Event (optional)
          null,                     // Custom properties (optional)
          [                         // Prepopulated answers
            {
              sectionIndex: 0,
              questionIndex: 0,
              value: { shortAnswer: "Great product!" }
            },
            {
              sectionIndex: 0,
              questionIndex: 1,
              value: { rating: 5 }
            }
          ]
        );
        ```
      </Tab>

      <Tab value="openFeedbackByName()">
        ```javascript
        encatch.openFeedbackByName(
          "Product Feedback",       // Feedback name
          "light",                  // Theme (optional)
          "en",                     // Language (optional)
          null,                     // Event (optional)
          null,                     // Custom properties (optional)
          [                         // Prepopulated answers
            {
              sectionIndex: 0,
              questionIndex: 1,
              value: { nps: 9 }
            }
          ]
        );
        ```
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Examples by Question Type">
    <Tabs items={['Short Answer','Rating','NPS','Single Choice','Multiple Choice','Multiple Questions']}>
      <Tab value="Short Answer">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 0,
            value: { shortAnswer: "Product Dashboard" }
          }
        ]);
        ```
      </Tab>

      <Tab value="Rating">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 1,
            value: { rating: 4 }
          }
        ]);
        ```
      </Tab>

      <Tab value="NPS">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 0,
            value: { nps: 9 }
          }
        ]);
        ```
      </Tab>

      <Tab value="Single Choice">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 2,
            value: { singleChoice: "option_yes" }
          }
        ]);
        ```
      </Tab>

      <Tab value="Multiple Choice">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 3,
            value: {
              multipleChoiceMultiple: ["feature_a", "feature_b", "feature_c"]
            }
          }
        ]);
        ```
      </Tab>

      <Tab value="Multiple Questions">
        ```javascript
        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 0,
            value: { shortAnswer: "Dashboard Page" }
          },
          {
            sectionIndex: 0,
            questionIndex: 1,
            value: { rating: 5 }
          },
          {
            sectionIndex: 1,
            questionIndex: 0,
            value: { longText: "The interface is very intuitive!" }
          }
        ]);
        ```
      </Tab>
    </Tabs>
  </Accordion>

  <Accordion title="Common Use Cases">
    <Accordions type="single">
      <Accordion title="Context from Current Page">
        ```javascript
        // Prepopulate with current page context
        const currentPage = window.location.pathname;
        const currentFeature = "Dashboard";

        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 0,
            value: { shortAnswer: currentPage }
          },
          {
            sectionIndex: 0,
            questionIndex: 1,
            value: { shortAnswer: currentFeature }
          }
        ]);
        ```
      </Accordion>

      <Accordion title="User Satisfaction Score">
        ```javascript
        // Prepopulate based on user behavior
        const userEngagementScore = calculateEngagement(); // Returns 1-5

        encatch.openFeedbackById("fc_abc123", "light", "en", null, null, [
          {
            sectionIndex: 0,
            questionIndex: 0,
            value: { rating: userEngagementScore }
          }
        ]);
        ```
      </Accordion>

      <Accordion title="Error Reporting">
        ```javascript
        // Prepopulate with error details
        function reportError(errorMessage) {
          encatch.openFeedbackById("fc_error_report", "light", "en", null, null, [
            {
              sectionIndex: 0,
              questionIndex: 0,
              value: { shortAnswer: window.location.pathname }
            },
            {
              sectionIndex: 0,
              questionIndex: 1,
              value: { longText: errorMessage }
            },
            {
              sectionIndex: 0,
              questionIndex: 2,
              value: { shortAnswer: navigator.userAgent }
            }
          ]);
        }

        // Usage
        try {
          riskyOperation();
        } catch (error) {
          reportError(error.message);
        }
        ```
      </Accordion>

      <Accordion title="Feature Request with Context">
        ```javascript
        // Prepopulate feature request form
        function requestFeature(featureName) {
          encatch.openFeedbackById("fc_feature_request", "light", "en", null, null, [
            {
              sectionIndex: 0,
              questionIndex: 0,
              value: { shortAnswer: featureName }
            },
            {
              sectionIndex: 0,
              questionIndex: 1,
              value: { singleChoice: "high_priority" }
            }
          ]);
        }
        ```
      </Accordion>

      <Accordion title="Post-Purchase Feedback">
        ```javascript
        // Prepopulate after purchase
        function showPurchaseFeedback(orderId, productName) {
          encatch.openFeedbackById("fc_purchase", "light", "en", null, null, [
            {
              sectionIndex: 0,
              questionIndex: 0,
              value: { shortAnswer: orderId }
            },
            {
              sectionIndex: 0,
              questionIndex: 1,
              value: { shortAnswer: productName }
            },
            {
              sectionIndex: 0,
              questionIndex: 2,
              value: { nps: 10 }
            }
          ]);
        }
        ```
      </Accordion>
    </Accordions>
  </Accordion>
</Accordions>

> **Note:** Prepopulated answers are displayed to users as editable values. Users can modify or keep the prepopulated data before submitting the form.

### Advanced SDK Methods

<Accordions type="single">
  <Accordion title="Advanced SDK Methods">
    <Tabs items={['Refresh Feedbacks','Validate Feedback Ids']}>
      <Tab value="Refresh Feedbacks">
        Force refresh of available feedback configurations from the server.

        **Use Cases:**

        * After user role changes that affect feedback eligibility
        * When user properties are updated that impact targeting
        * To ensure the latest feedback configurations are available
        * During application state transitions

        **Example Usage:**

        ```javascript
        // Refresh feedback configurations
        encatch.forceFetchEligibleFeedbacks();

        // Typical usage after user identification
        encatch.identify('user_123', { role: 'premium' });
        encatch.forceFetchEligibleFeedbacks(); // Fetch premium-specific feedback
        ```

        > **Performance Note:** This method triggers an immediate API call. Use sparingly and only when necessary to avoid unnecessary server load.
      </Tab>

      <Tab value="Validate Feedback Ids">
        Validate which feedback configuration IDs are currently available and eligible for the user.

        <TypeTable
          type={{
          feedbackIds: {
            description: 'Array of feedback configuration IDs to validate',
            type: 'string[]',
            required: true
          }
        }}
        />

        **Returns:** `string[]` - Array of valid, eligible feedback IDs

        **Example Usage:**

        ```javascript
        const feedbackIds = ['config_123', 'config_456', 'config_789'];
        const validIds = encatch.verifyFeedbackIds(feedbackIds);


        // Output: ['config_123', 'config_789']

        // Use valid IDs for conditional display
        if (validIds.includes('config_123')) {
          // Show feedback trigger button
          document.getElementById('feedback-btn').style.display = 'block';
        }
        ```
      </Tab>
    </Tabs>
  </Accordion>
</Accordions>


# Next.js (/docs/framework-examples/ui-frameworks/nextjs)
# Next.js

## Overview

## Getting started


# React.js (/docs/framework-examples/ui-frameworks/reactjs)
# React.js

## Overview

## Getting started


# AI Filters (/docs/administrative-guide/data-pipelines/destinations/ai-filters)
## Overview

The AI Filter feature allows you to intelligently filter feedback before it reaches your destination. Using natural language prompts, you can instruct an AI model to analyze feedback and decide whether it should be forwarded or blocked.

<Callout type="info">
  AI Filters use AI Credits. Each execution consumes 1 AI Credit.
</Callout>

## How It Works

<Steps>
  <Step>
    **Configure Your Prompt**

    Write a clear instruction that tells the AI what feedback to forward or block. Be specific about your criteria.
  </Step>

  <Step>
    **Select Context Data**

    Choose which feedback data fields to include in the analysis:

    * Questions and answers
    * Device information
    * Geographic information
    * User information
  </Step>

  <Step>
    **Test Your Filter**

    Use the test feature to see how your filter responds to sample feedback. Review the decision, reason, and confidence level.
  </Step>

  <Step>
    **Save & Enable**

    Once satisfied with test results, save your configuration and enable the filter to start filtering feedback automatically.
  </Step>
</Steps>

## Key Features

* **Natural Language Prompts**: Write instructions in plain English - no complex syntax required
* **Context-Aware Analysis**: Include relevant feedback data for better filtering decisions
* **Default Forward on Error**: Configure behavior when AI processing fails
* **Test Before Deploy**: Preview filter decisions with sample feedback data

## Writing Effective Prompts

To create effective prompts, follow these guidelines:

* **Be Specific**: Clearly state what feedback should be forwarded or blocked
* **Define Criteria**: Specify the criteria for your decision (sentiment, topic, quality, etc.)
* **Use Examples**: Include examples of feedback that should be forwarded/blocked (optional but helpful)
* **Reference Context**: Mention the available data fields in your prompt when relevant

A well-structured prompt typically includes:

1. Clear instruction on what the AI should do
2. Specific criteria for forwarding/blocking
3. Examples or scenarios (optional)

## Example Prompts

### Example 1: Forward Only Positive Feedback

Use this prompt to forward only positive or neutral feedback:

```text
Analyze the feedback and determine if it should be forwarded to the destination.

Forward the feedback ONLY if:
- The overall sentiment is positive or neutral
- The feedback contains constructive suggestions or praise
- The rating (if available) is 3 stars or higher

Do NOT forward if:
- The feedback is primarily negative or critical
- The feedback contains complaints without constructive elements
- The rating is below 3 stars

Respond with a clear decision: FORWARD or DO NOT FORWARD, along with a brief reason.
```

### Example 2: Filter by Topic Relevance

Use this prompt to filter feedback based on topic relevance:

```text
Review the feedback and determine if it's relevant to our product features.

Forward the feedback if it discusses:
- Product features, functionality, or usability
- User experience improvements
- Feature requests or bug reports

Do NOT forward if it discusses:
- Pricing or billing questions
- Account management issues
- Spam or irrelevant content

Provide your decision with a brief explanation.
```

### Example 3: Quality-Based Filtering

Use this prompt to filter based on feedback quality:

```text
Evaluate the feedback quality and completeness.

Forward the feedback if:
- It contains substantive content (not just "good" or "bad")
- It includes specific details or examples
- It provides actionable insights

Do NOT forward if:
- The feedback is too brief or lacks substance
- It contains only generic responses
- It appears to be spam or automated

Explain your decision based on the quality and completeness of the feedback.
```

## Context Data Fields

When configuring your filter, you can include these data fields in the analysis:

* **Questions**: The questionnaire structure and questions asked
* **Answers**: The user's responses to questions
* **Device Info**: Device type, OS, browser, timezone, theme, etc.
* **Geo Info**: Location data (country, region, city, postcode)
* **User Info**: User-related information (if available)

<Callout type="warn">
  Select only relevant fields to optimize performance and reduce token usage. At least one field must be selected.
</Callout>

## Settings

### Default Forward on AI Filter Error

When enabled, feedback will be automatically forwarded if AI filter processing fails. This ensures no feedback is lost due to technical issues.

<Callout type="info">
  **Recommended**: Enable this setting to prevent data loss, unless you have strict requirements to block feedback when AI processing fails.
</Callout>

## Why AI Filters Fail

AI filters may fail to process feedback for several reasons. Understanding these scenarios helps you configure your settings appropriately and troubleshoot issues effectively.

<Accordions type="single">
  <Accordion title="1. AI Credits Exhausted">
    Your AI filter requires available AI Credits to process feedback. If your account has exhausted all AI Credits, the filter will fail to execute.

    **Solution**: Purchase additional AI Credits or wait for your credit limit to reset. Check your billing dashboard to monitor credit usage and set up alerts for low credit balances.
  </Accordion>

  <Accordion title="2. Prompt Window Too Large">
    The combined size of your prompt and selected context data fields may exceed the AI model's token limit. This happens when:

    * Your prompt is extremely long
    * You've selected too many context fields
    * The feedback data itself is very large

    **Solution**: Simplify your prompt, reduce the number of context fields selected, or break down complex filtering logic into multiple simpler filters.
  </Accordion>

  <Accordion title="3. Internal System Issues">
    Occasionally, internal system errors or processing issues may cause the AI filter to fail. These are temporary issues that typically resolve automatically.

    **Solution**: Retry the operation after a few moments. If the issue persists, check system status or contact support. Enable "Default Forward on AI Filter Error" to ensure feedback isn't lost during these incidents.
  </Accordion>

  <Accordion title="4. AI Service Downtime">
    The underlying AI service provider may experience downtime or service interruptions, preventing the filter from processing feedback.

    **Solution**: Enable "Default Forward on AI Filter Error" to automatically forward feedback when the AI service is unavailable. Monitor service status and retry once the service is restored.
  </Accordion>
</Accordions>

<Callout type="warn">
  To prevent data loss when AI filters fail, always enable "Default Forward on AI Filter Error" unless you have strict requirements to block feedback during failures.
</Callout>

## Testing Your Filter

To test your AI filter:

1. Click **"Test AI Filter"** (always enabled by default)
2. Optionally check **"Save Configuration"** to save your changes
3. Optionally check **"Enable AI Filter"** to activate the filter
4. Click **"Execute Process"** to test with sample feedback

The test results will show:

* **Decision**: Whether the feedback would be FORWARDED or NOT FORWARDED
* **Reason**: The AI's explanation for the decision
* **Confidence**: How confident the AI is in its decision
* **Token Usage**: How many tokens were consumed

<Callout type="info">
  Each test execution consumes 1 AI Credit.
</Callout>

## Tips for Success

* **Start Simple**: Begin with a basic prompt and refine based on test results
* **Test Thoroughly**: Test with various types of feedback to ensure it works as expected
* **Be Specific**: Vague prompts lead to inconsistent results - be as specific as possible
* **Use Context Wisely**: Only include context fields that are relevant to your filtering logic
* **Iterate**: Adjust your prompt based on test results and real-world performance

## Common Use Cases

* **Quality Control**: Filter out low-quality or spam feedback
* **Topic Filtering**: Only forward feedback relevant to specific topics
* **Sentiment Analysis**: Forward only positive or constructive feedback
* **Compliance**: Filter out inappropriate or non-compliant content

## Troubleshooting

<Accordions type="single">
  <Accordion title="Filter is too restrictive">
    Make your criteria less strict or add more conditions for forwarding. Review your prompt and ensure it's not blocking valid feedback.
  </Accordion>

  <Accordion title="Filter is too permissive">
    Add more specific criteria or tighten your requirements. Be more explicit about what should be blocked.
  </Accordion>

  <Accordion title="Inconsistent results">
    Make your prompt more explicit with clear examples and criteria. Test with multiple feedback samples to identify patterns.
  </Accordion>

  <Accordion title="High token usage">
    Reduce the number of context fields selected or simplify your prompt. Only include fields that are essential for your filtering logic.
  </Accordion>

  <Accordion title="Empty prompt field">
    The Execute button is disabled when the prompt is empty. Enter a prompt to enable execution.
  </Accordion>
</Accordions>


# Destinations (/docs/administrative-guide/data-pipelines/destinations)
Using AI filter you can decide which feedback data to filter before it is sent to the destination. An example usecase is send feedback notifications only if rating is 3 or below.

#### Available Destinations

* Email
* Slack
* Jira
* GitLab
* Custom Webhook (that can be used with Zappier,n8n, MS power automate, etc. or your own custom webhook endpoint)


# Overview (/docs/developer-guide/data-pipelines/destination)
## What are Destinations?

Destinations are external systems and services where Encatch automatically delivers your feedback responses.

### Use cases for destinations

* You want to send feedback responses when you receive a new feedback response to your email inbox
* Report to team members when you receive a new feedback response mentioned as a bug or issue
* Trigger a workflow with Zappier, n8n, MS power automate, etc. or your own custom webhook endpoint on a specific feedback response

### Available Destinations

Below are the list of available destinations:

* **Email**: Send feedback responses to your email inbox
* **Slack**: Send feedback responses to your Slack channel as a message
* **GitLab**: Create an issue in your GitLab repository based on the feedback response
* **Jira**: Create an issue in your Jira project based on the feedback response
* **Webhook**: Send feedback responses to your custom webhook endpoint (that can be used with Zappier, n8n, MS power automate, etc. or your own custom webhook endpoint)

### How to configure a destination?

1. To configure a destination, you need to go to the **Data Pipelines** section of the application and click on the **Destinations**.
2. Then, you need to click on the **Add Destination** button.
3. Then, you need to select the destination type, choose the feedback form and configure the destination details.
4. Then, you need to click on the **Save** button.

### Destination Filters

You can choose to filter unwanted feedback responses before they are sent to the destination. Use the AI filter to filter unwanted feedback responses based on the feedback response content, rating, etc.

### Other options

* Before you enable the destination, you can test the destination by clicking on the **Test** button.
* You can temporarily disable the destination to stop it from processing any feedback responses