Userback

https://docs.userback.io/
Admin
Userback is a feedback collection and management platform that enables seamless integration of user...
Tokens:46,475
Snippets:590
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Userback via npm

Source: https://docs.userback.io/docs/quickstart-guide

Install the package and initialize it during page load.

```javascript
npm install @userback/widget
```

```javascript
import Userback from "@userback/widget";

// identify your logged-in users (optional)
const options = {
  user_data: {
    id: "123456", // example data
    info: {
      name: "someone", // example data
      email: "someone@example.com" // example data
    }
  }
};

Userback("YOUR_ACCESS_TOKEN", options);
```

--------------------------------

### Use Global Userback Helper in Component

Source: https://docs.userback.io/docs/vue

Example of using the custom helper function within a component setup.

```javascript
import { getUserback } from './userback';

export default {
  setup() {
    function openFeedback() {
      const userback = getUserback();
      userback.openForm('bug');
    }

    return { openFeedback };
  }
};
```

--------------------------------

### startSessionReplay(options)

Source: https://docs.userback.io/docs/javascript-sdk

Starts session replay programmatically if it is disabled for the domain.

```APIDOC
## startSessionReplay(options: object)

### Description
Starts session replay programmatically. Options include block_rule, ignore_rule, log_level, and tags.
```

--------------------------------

### Install Userback via script tag

Source: https://docs.userback.io/docs/quickstart-guide

Paste this snippet before the closing body tag to load the widget.

```html
<script>
  window.Userback = window.Userback || {};
  Userback.access_token = 'YOUR_ACCESS_TOKEN';

  // identify your logged-in users (optional)
  Userback.user_data = {
    id: "123456", // example data
    info: {
      name: "someone", // example data
      email: "someone@example.com" // example data
    }
  };

  (function(d) {
    var s = d.createElement('script');s.async = true;
    s.src = 'https://static.userback.io/widget/v1.js';
    (d.head || d.body).appendChild(s);
  })(document);
</script>
```

--------------------------------

### GET /project

Source: https://docs.userback.io/reference/listprojects

Retrieves a list of projects with pagination metadata and HATEOS links.

```APIDOC
## GET /project

### Description
Retrieves a paginated list of projects available to the authenticated user.

### Method
GET

### Endpoint
/project

### Response
#### Success Response (200)
- **_links** (object) - A collection of Hypermedia Application Language (HATEOS) links.
- **_pagination** (object) - Pagination metadata including totalPages, totalRecords, pageSize, records, and pageNumber.
- **data** (array) - List of projects.
```

--------------------------------

### Install via Script Tag

Source: https://docs.userback.io/docs/widget-installation-methods

Use this method to ensure console logs and errors are captured from page load by initializing in the head.

```html
<head>
  <script src="https://static.userback.io/widget/v1.js"></script>
</head>
<body>
  <script>
  Userback.init('YOUR_ACCESS_TOKEN', {
    user_data: {
      id: "123456", // example data
      info: {
        name: "someone", // example data
        email: "someone@example.com" // example data
      }
    }
  });
  </script>
</body>
```

--------------------------------

### Basic Userback GTM Installation

Source: https://docs.userback.io/docs/google-tag-manager

Use this snippet in a Custom HTML tag to load the Userback widget without user data.

```html
<script>
  window.Userback = window.Userback || {};
  Userback.access_token = 'YOUR_ACCESS_TOKEN';

  (function(d) {
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://static.userback.io/widget/v1.js';
    (d.head || d.body).appendChild(s);
  })(document);
</script>
```

--------------------------------

### Install Userback NPM package

Source: https://docs.userback.io/docs/angularjs

Command to add the Userback widget dependency to your Angular project.

```shell
npm i @userback/widget
```

--------------------------------

### GET https://rest.userback.io/1.0/project/{id}

Source: https://docs.userback.io/reference/getproject

Retrieves a project by its unique ID.

```APIDOC
## GET https://rest.userback.io/1.0/project/{id}

### Description
Retrieves a project by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/project/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - Workspace Member ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### GET /projects

Source: https://docs.userback.io/reference/listprojects

Retrieves a paginated list of projects available to the authenticated user.

```APIDOC
## GET /projects

### Description
Lists all projects available to the user. Supports pagination, sorting, and filtering.

### Method
GET

### Endpoint
/projects

### Parameters
#### Query Parameters
- **page** (PAGE_NUM) - Optional - Page number for pagination.
- **limit** (PAGE_LIMIT) - Optional - Number of records per page.
- **sort** (SORT) - Optional - Sort results by a field (e.g., "name,asc").
- **filter** (FILTER) - Optional - Filter results using OData syntax.

### Response
#### Success Response (200)
- **_links** (object) - Pagination links.
- **data** (array) - List of BaseProject objects.

#### BaseProject Schema
- **id** (ID) - Unique primary key.
- **name** (string) - Project name.
- **url** (string) - Project URL.
- **logo** (string) - Logo URL.
- **isArchived** (boolean) - Whether the project is archived.
- **created** (string) - Creation date in RFC 3339 format.
- **createdBy** (ID) - User ID of the creator.
```

--------------------------------

### GET /projects

Source: https://docs.userback.io/reference/listprojects

Retrieves a list of available projects with support for pagination, sorting, and filtering.

```APIDOC
## GET /projects

### Description
Lists available projects for the authenticated user.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/projects

### Parameters
#### Query Parameters
- **page** (integer) - Optional - The page number to retrieve.
- **limit** (integer) - Optional - The number of items to return per page.
- **sort** (string) - Optional - The field to sort the results by.
- **filter** (string) - Optional - Filter criteria for the projects list.
```

--------------------------------

### GET /feedback

Source: https://docs.userback.io/reference/listfeedbacks

Retrieves a paginated list of available feedbacks.

```APIDOC
## GET /feedback

### Description
Lists available feedbacks from the Userback system.

### Method
GET

### Endpoint
/feedback

### Parameters
#### Query Parameters
- **page** (integer) - Optional - Current pagination page number
- **limit** (integer) - Optional - Page size
- **sort** (string) - Optional - Sorting criteria
- **filter** (string) - Optional - Filtering criteria

### Response
#### Success Response (200)
- **_links** (object) - Navigation links
- **_pagination** (object) - Pagination metadata
- **data** (array) - An array of Feedback objects returned by the API
```

--------------------------------

### Set Default Language

Source: https://docs.userback.io/docs/dynamic-language

Examples of setting the widget language to specific locales.

```javascript
Userback.widget_settings = { language: 'en' };
```

```javascript
Userback.widget_settings = { language: 'fr' };
```

```javascript
Userback.widget_settings = { language: 'zh-CN' };
```

--------------------------------

### OpenAPI Path Definition for ListProjects

Source: https://docs.userback.io/reference/listprojects

Defines the GET /project endpoint and its associated response codes.

```json
"/project": {
      "get": {
        "operationId": "ListProjects",
        "responses": {
          "200": {
            "description": "Ok",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ProjectListResponse"
                }
              }
            }
          },
          "401": {
            "description": "Not Authorized",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPError"
                }
              }
            }
          },
          "422": {
            "description": "Validation Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPError"
                }
              }
            }
          },
          "429": {
            "description": "Too Many Requests",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPError"
                }
              }
            }
          },
          "500": {
            "description": "Interal Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/HTTPError"
                }
              }
            }
```

--------------------------------

### Basic usage of pre-filling fields

Source: https://docs.userback.io/docs/prefill-fields

Sets multiple feedback form fields simultaneously. Requires the Userback widget to be installed.

```javascript
Userback.email = 'jane.doe@example.com'; 
Userback.name = 'Jane Doe';
Userback.categories = "Frontend";
Userback.priority = "urgent"; // Options: low, neutral, high, urgent
```

--------------------------------

### Filtering and Sorting API Usage

Source: https://docs.userback.io/reference/filtering-and-sorting

Examples of how to apply filter and sort query parameters to list endpoints.

```APIDOC
## Filtering

### Description
Filtering allows you to narrow down results on list endpoints using the `filter` query parameter. String values must be enclosed in single quotes (').

### Query Parameters
- **filter** (string) - Optional - The filter expression using operators: eq, ne, ge, gt, le, lt, and, or.

### Request Example
GET /rest/1.0/feedback?filter=name eq 'Joe'
GET /rest/1.0/feedback?filter=voteCount gt 5
GET /rest/1.0/feedback?filter=voteCount gt 5 and feedbackType eq 'Bug'

## Sorting

### Description
Sorting is achieved through the `sort` query parameter. Only one field can be sorted at a time.

### Query Parameters
- **sort** (string) - Optional - The field to sort by, followed by the order (e.g., 'field,desc' or 'field,asc').

### Request Example
GET /rest/1.0/feedback?sort=modified,desc
```

--------------------------------

### Feedback Response Structure

Source: https://docs.userback.io/reference/overview

Example of the JSON structure returned for a feedback object, demonstrating model property naming conventions.

```json
{
  id: 11,
  name: "Example Feedback",
  isArchived: false,
  ...
	Screenshots: [
    {
      id: 481,
      url: 'https://www.example.com/screenshot.png',
      width: 1024,
      height: 768,
    },
    ...
  ],
  Project: {
  	id: 54,
    name: "My Example Project"
  }
}
```

--------------------------------

### GET /sessionRecording/{id}

Source: https://docs.userback.io/reference/getsessionrecording

Retrieves a SessionRecording by ID.

```APIDOC
## GET /sessionRecording/{id}

### Description
Retrieves a SessionRecording by ID.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/sessionRecording/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - SessionRecording ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Initialize Userback with options

Source: https://docs.userback.io/docs/npm

Define configuration options for the Userback widget.

```typescript
const options: UserbackOptions = {
  email: "user@example.com",
  user_data: { id: 123, info: { name: "John Doe" } },
  widget_settings: { style: 'circle' }
};
```

--------------------------------

### GET /feedback/comment/{id}

Source: https://docs.userback.io/reference/feedback-comment

Retrieves a Feedback comment by Id.

```APIDOC
## GET /feedback/comment/{id}

### Description
Retrieves a Feedback comment by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/feedback/comment/{id}

### Parameters
#### Path Parameters
- **id** (double) - Required - Feedback Comment id

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Create UserbackProvider.client.jsx

Source: https://docs.userback.io/docs/nextjs

Initializes the Userback widget and provides the instance via React context. Store the access token in an environment variable instead of hardcoding.

```javascript
'use client';

import React, {
  createContext,
  useContext,
  useEffect,
  useState,
} from 'react';
import Userback from '@userback/widget';

// Create the context
const UserbackContext = createContext(null);

// Access token for embedding the Userback widget (not the API token).
// Recommended: store it in an environment variable like NEXT_PUBLIC_USERBACK_TOKEN instead of hardcoding.
const token = 'YOUR_ACCESS_TOKEN';

export const UserbackProvider = ({ children }) => {
  const [userback, setUserback] = useState(null);

  useEffect(() => {
    const init = async () => {
      const instance = await Userback(token, {
        user_data: {
          id: '123456',
          info: {
            name: 'Jane Doe',
            email: 'jane.doe@example.com',
          },
        },
        autohide: false,
      });
      setUserback(instance);
    };

    init();
  }, []);

  return (
    <UserbackContext.Provider value={userback}>
      {children}
    </UserbackContext.Provider>
  );
};

// Custom hook to access Userback instance
export const useUserback = () => useContext(UserbackContext);
```

--------------------------------

### Userback(token, options)

Source: https://docs.userback.io/docs/npm

Initializes the Userback widget in your application. Returns a promise that resolves to the Userback instance.

```APIDOC
## Userback(token, options)

### Description
Initializes the Userback widget. This function can be used to identify logged-in users by passing user data in the options object.

### Parameters
- **token** (string) - Required - Your Userback access token.
- **options** (object) - Optional - Configuration object including user_data (id, info: {name, email}).

### Example
```javascript
import Userback from '@userback/widget';

const options = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "someone@example.com"
    }
  }
};

Userback('YOUR_ACCESS_TOKEN', options).then((userback) => {
  userback.openForm();
});
```
```

--------------------------------

### showLauncher(project_key) / hideLauncher()

Source: https://docs.userback.io/docs/javascript-sdk

Controls the visibility of the Userback widget button on the screen.

```APIDOC
## showLauncher(project_key?: string) / hideLauncher()

### Description
Show or hide the Userback widget button on the screen. Optionally switch to a different project by providing a project_key.
```

--------------------------------

### Configure Live Environment

Source: https://docs.userback.io/docs/javascript-sdk

Sets the screenshot engine mode based on the hosting environment.

```javascript
Userback.is_live = true;
```

--------------------------------

### Create design implementation plan prompt

Source: https://docs.userback.io/docs/userback-mcp

Use this prompt to convert UX feedback into actionable implementation plans with acceptance criteria.

```text
Build an implementation plan for any requested UX changes in the App project and include acceptance criteria for QA.
```

--------------------------------

### GET /member/{id}

Source: https://docs.userback.io/reference/member

Retrieves the details of a specific workspace member by their ID.

```APIDOC
## GET https://rest.userback.io/1.0/member/{id}

### Description
Retrieves a Member by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/member/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - Workspace Member ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### GET /member/{id}

Source: https://docs.userback.io/reference/getmember

Retrieves a Member by Id from the Userback REST API.

```APIDOC
## GET /member/{id}

### Description
Retrieves a Member by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/member/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - Workspace Member ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### GET /feedback/{id}

Source: https://docs.userback.io/reference/feedback

Retrieves a specific feedback item by its unique identifier.

```APIDOC
## GET /feedback/{id}

### Description
Retrieves a feedback by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/feedback/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - Feedback ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Initialize Userback in Vue

Source: https://docs.userback.io/docs/vue

Initialize the widget before mounting the Vue app to ensure global availability.

```javascript
import Userback from '@userback/widget';

const token = 'YOUR_ACCESS_TOKEN';
// identify your logged-in users (optional)
const options = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "someone@example.com"
    }
  }
};

// Initialize Userback before mounting the app
Userback(token, options).then((userback) => {
  const app = createApp(App);
  // Make Userback instance globally available
  app.config.globalProperties.$userback = userback;
  app.mount("#app");
});
```

```typescript
import { createApp } from 'vue';
import Userback, { UserbackOptions, UserbackWidget } from '@userback/widget';
import App from './App.vue';  // Assuming App.vue is the entry component

const token: string = 'YOUR_ACCESS_TOKEN';

const options: UserbackOptions = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "someone@example.com",
    }
  }
};

// Initialize Userback before mounting the app
Userback(token, options).then((userback: UserbackWidget) => {
  const app = createApp(App);

  // Make Userback instance globally available
  app.config.globalProperties.$userback = userback;

  // Mount the app
  app.mount("#app");
});
```

--------------------------------

### Use Userback instance

Source: https://docs.userback.io/docs/npm

Initialize the widget and trigger form actions using the returned instance.

```typescript
const userback: UserbackWidget = await Userback('YOUR_ACCESS_TOKEN', options);
userback.openForm('bug');
```

--------------------------------

### Configure full widget settings

Source: https://docs.userback.io/docs/widget-customization

Sets the complete configuration for the Userback widget, including language, position, button styling, and help links.

```javascript
Userback.widget_settings = {
  language: "en",
  position: "e",
  main_button_text: "Feedback",
  main_button_background_colour: "#3E3F3A",
  main_button_text_colour: "#FFFFFF",
  device_type: "desktop,tablet,phone",
  help_link: "https://www.example.com",
  help_title: "Contact Us",
  help_message: "Get in touch with us",
  logo: "//example.com/logo.jpg"
};
```

--------------------------------

### Configure Cursor MCP

Source: https://docs.userback.io/docs/userback-mcp

Add the Userback server configuration to the Cursor MCP settings.

```json
{
  "mcpServers": {
    "userback": {
      "url": "https://mcp.userback.io/v1/mcp/"
    }
  }
}
```

--------------------------------

### GET /1.0/workflow

Source: https://docs.userback.io/reference/listworkflows

Retrieves a list of all workflows available in the account, supporting pagination, sorting, and filtering.

```APIDOC
## GET https://rest.userback.io/1.0/workflow

### Description
List all workflows available.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/workflow

### Parameters
#### Query Parameters
- **page** (int32) - Optional - Page number - used for pagination (Defaults to 1)
- **limit** (int32) - Optional - Page limit - used to limit the result set to a number of records per page (Defaults to 25)
- **sort** (string) - Optional - Allows to sort the results by single field
- **filter** (string) - Optional - Allows filtering results using odata filter syntax

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Manage shared Userback instance in a module

Source: https://docs.userback.io/docs/react

Create a dedicated module to initialize and export the Userback instance for use across the application.

```javascript
// userbackClient.js
import Userback from '@userback/widget';

let userbackInstance;

export async function initUserback(options) {
  userbackInstance = await Userback('YOUR_ACCESS_TOKEN', options);
  return userbackInstance;
}

export function getUserback() {
  return userbackInstance;
}
```

--------------------------------

### GET https://rest.userback.io/1.0/member

Source: https://docs.userback.io/reference/listmembers

Retrieves a list of available members with support for pagination, sorting, and filtering.

```APIDOC
## GET https://rest.userback.io/1.0/member

### Description
Lists available members from the Userback system.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/member

### Parameters
#### Query Parameters
- **page** (int32) - Optional - Page number for pagination (1 to 2147483647, default: 1)
- **limit** (int32) - Optional - Number of records per page (1 to 50, default: 25)
- **sort** (string) - Optional - Sort results by a single field (format: field,asc|desc)
- **filter** (string) - Optional - Filter results using OData filter syntax

### Response
#### Success Response (200)
- **Ok** - Successfully retrieved the list of members

#### Error Responses
- **401** - Not Authorized
- **422** - Validation Error
- **429** - Too Many Requests
- **500** - Internal Server Error
```

--------------------------------

### Environment and Screenshot Configuration

Source: https://docs.userback.io/docs/javascript-sdk

Configure the screenshot engine and environment settings.

```APIDOC
## Userback.is_live

### Description
Configures the screenshot engine. Set to `true` for public-facing sites to enable the live screenshot server.

### Usage
`Userback.is_live = true;`

## Userback.native_screenshot

### Description
Forces the use of the browser's native Screen Capture API for improved rendering of complex elements like shadow DOM and iframes.

### Usage
`Userback.native_screenshot = true;`
```

--------------------------------

### Configure Windsurf MCP

Source: https://docs.userback.io/docs/userback-mcp

Add the Userback server configuration to the Windsurf mcp.json file.

```json
{
  "mcpServers": {
    "Userback": {
      "url": "https://mcp.userback.io/v1/mcp/"
    }
  }
}
```

--------------------------------

### List workflows cURL request

Source: https://docs.userback.io/reference/listworkflows

Retrieves a list of workflows using a GET request with pagination parameters.

```Shell
curl --request GET \
     --url 'https://rest.userback.io/1.0/workflow?page=1&limit=25' \
     --header 'accept: application/json'
```

--------------------------------

### GET https://rest.userback.io/1.0/sessionRecording

Source: https://docs.userback.io/reference/listsessionrecordings

Retrieves a paginated list of session recordings. Supports sorting and OData-style filtering.

```APIDOC
## GET https://rest.userback.io/1.0/sessionRecording

### Description
Lists available SessionRecordings.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/sessionRecording

### Parameters
#### Query Parameters
- **page** (int32) - Optional - Page number - used for pagination (Defaults to 1)
- **limit** (int32) - Optional - Page limit - used to limit the result set to a number of records per page (Defaults to 25)
- **sort** (string) - Optional - Allows to sort the results by single field
- **filter** (string) - Optional - Allows filtering results using odata filter syntax

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Wrap application with UserbackProvider

Source: https://docs.userback.io/docs/react

Initialize the provider at the root of the React application to make the instance available to all child components.

```javascript
// main.jsx or App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserbackProvider } from './UserbackProvider';

ReactDOM.createRoot(document.getElementById('root')).render(
  <UserbackProvider>
    <App />
  </UserbackProvider>
);
```

--------------------------------

### Managing persistent widget switching

Source: https://docs.userback.io/docs/handling-multiple-feedback-widgets

Demonstrates how the active project persists across subsequent SDK calls after an initial switch.

```javascript
Userback.showLauncher('PROJECT_KEY_A'); // switches to and shows Project A
Userback.openForm('bug');   // still Project A, no need to repeat the key
```

```javascript
Userback.openForm('bug', null, 'PROJECT_KEY_B'); // switches to Project B
Userback.hideLauncher(); // hides the launcher
Userback.showLauncher(); // shows the launcher for Project B
```

--------------------------------

### GET /feedback/comment

Source: https://docs.userback.io/reference/listfeedbackcomments

Retrieves a list of feedback comments based on optional pagination, sorting, and filtering parameters.

```APIDOC
## GET https://rest.userback.io/1.0/feedback/comment

### Description
Lists available feedback comments from the system.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/feedback/comment

### Parameters
#### Query Parameters
- **page** (int32) - Optional - Page number for pagination (1 to 2147483647, default: 1)
- **limit** (int32) - Optional - Number of records per page (1 to 50, default: 25)
- **sort** (string) - Optional - Sort results by a single field (format: field,asc|desc)
- **filter** (string) - Optional - Filter results using OData filter syntax

### Response
#### Success Response (200)
- **Ok**

#### Error Responses
- **401** - Not Authorized
- **422** - Validation Error
- **429** - Too Many Requests
- **500** - Internal Server Error
```

--------------------------------

### Configure Visual Studio Code MCP

Source: https://docs.userback.io/docs/userback-mcp

Add the Userback server configuration to the VS Code MCP settings.

```json
{
  "servers": {
    "Userback": {
      "url": "https://mcp.userback.io/v1/mcp/",
      "type": "http"
    }
  }
}
```

--------------------------------

### Access Userback Instance via Async/Await

Source: https://docs.userback.io/docs/npm

Initialize and interact with the widget instance using asynchronous patterns.

```javascript
const userback = await Userback('YOUR_ACCESS_TOKEN', options);
userback.openForm(); // Example: manually open the widget
```

--------------------------------

### GET /project/{id}

Source: https://docs.userback.io/reference/project

Retrieves a project by its unique ID. This endpoint requires authentication via a Bearer token.

```APIDOC
## GET /project/{id}

### Description
Retrieves a project by Id.

### Method
GET

### Endpoint
https://rest.userback.io/1.0/project/{id}

### Parameters
#### Path Parameters
- **id** (int32) - Required - Workspace Member ID (0 to 2147483647)

### Response
#### Success Response (200)
- Ok

#### Error Responses
- 401: Not Authorized
- 404: Not Found
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Control Session Replay

Source: https://docs.userback.io/docs/javascript-sdk

Start or stop session replay manually, with optional configuration for blocking or ignoring elements.

```javascript

Userback.startSessionReplay({
    block_rule: '.userback-block', // optional
    ignore_rule: '.userback-ignore', // optional
    log_level: ['log', 'warn', 'info', 'debug', 'error'], // optional
    tags: ['tag1', 'tag2'] // optional
}); 
```

```javascript

Userback.stopSessionReplay(); 
```

--------------------------------

### Configure Userback Widget Settings

Source: https://docs.userback.io/docs/javascript-sdk

Use this object to dynamically set the widget's theme, position, and form behavior. Ensure this is defined before the widget initializes.

```javascript
Userback.widget_settings = {
    language                      : "en",
    ui_theme                      : 'light', 
    style                         : "text",    
    position                      : "e",
    trigger_type                  : "page_load", 
    main_button_text              : "Feedback", 
    main_button_background_colour : "#3E3F3A",  
    main_button_text_colour       : "#FFFFFF",
    device_type                   : "desktop,tablet,phone", 
    help_link                     : "https://www.example.com", 
    help_title                    : "Contact Us",              
    help_message                  : "Get in touch with us",    
    logo                          : '//example.com/logo.jpg',   
    form_settings: {
        // General Feedback Form
        general: {
            rating_type             : "star",
            rating_help_message     : "How would you like to rate your experience?", 
        },
        // Bug Form
        bug: {...},
        // Feature Request Form
        feature_request: {...}
    }
};
```

--------------------------------

### Userback.custom_data

Source: https://docs.userback.io/docs/attach-custom-data

Sets static custom data for the Userback widget, useful when the SDK has not been initialized or when using the Basic Snippet installation.

```APIDOC
## Userback.custom_data

### Description
Sets static custom data for the Userback widget. This is useful when the SDK has not been initialized or when using the Basic Snippet installation.

### Parameters
- **custom_data** (object) - Required - An object containing key-value pairs of custom data. Values must be JSON strings, numbers, or booleans.

### Example
```javascript
Userback.custom_data = {
    page_name: 'Checkout',
    user_status: 'Active'
};
```
```

--------------------------------

### Available MCP Tools

Source: https://docs.userback.io/docs/userback-mcp

A list of tools available for interaction with the Userback platform through an MCP-compliant client.

```APIDOC
## Available Tools

| Tool name | Description |
| :--- | :--- |
| **add_feedback** | Create a new feedback item in a project. |
| **add_feedback_comment** | Add a comment or reply to an existing feedback item. |
| **get_feedback** | View full details for specific feedback items. |
| **get_feedback_logs** | See recent technical logs for a feedback item. |
| **list_account_users** | View account members and assignees. |
| **list_projects** | See accessible projects and workflow info. |
| **list_workflows** | View status/workflow states for a project. |
| **search_feedback_filter** | Search feedback using filters with paginated results. |
| **search_feedback_semantic** | Find feedback by meaning using natural-language search. |
| **set_feedback_assignee** | Assign, reassign, or unassign a feedback item. |
| **set_feedback_workflow** | Update a feedback item’s status/workflow step. |
| **update_feedback** | Edit feedback fields such as title, description, priority, assignee, or status. |
```

--------------------------------

### Add UserbackProvider to Root Layout

Source: https://docs.userback.io/docs/nextjs

Wraps the application layout with the UserbackProvider to ensure the widget is available globally.

```javascript
import './globals.css';
import { Inter } from 'next/font/google';
import UserbackProvider from '../components/UserbackProvider.client';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'My App',
  description: 'App with Userback Integration',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <UserbackProvider>
          {children}
        </UserbackProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Initialize Userback widget in Next.js

Source: https://docs.userback.io/docs/nextjs

A client-side component to initialize the Userback widget. It is recommended to store the access token in an environment variable.

```javascript
'use client';

import { useEffect } from 'react';
import Userback from '@userback/widget';

const UserbackWidget = () => {
  useEffect(() => {
    // Access token for embedding the Userback widget (not the API token).
		// Recommended: store it in an environment variable like NEXT_PUBLIC_USERBACK_TOKEN instead of hardcoding.
    const token = 'YOUR_ACCESS_TOKEN'; 
    const options = {
      user_data: {
        id: '123456',
        info: {
          name: 'someone',
          email: 'someone@example.com'
        }
      }
    };

    Userback(token, options).then((userback_instance) => {
      console.log('Userback widget loaded');
    });
  }, []);

  return null;
};

export default UserbackWidget;
```

```typescript
'use client';

import { useEffect } from 'react';
import Userback from '@userback/widget';
import type { UserbackOptions, UserbackWidget } from '@userback/widget';

const UserbackWidget = () => {
  useEffect(() => {
    // Access token for embedding the Userback widget (not the API token).
		// Recommended: store it in an environment variable like NEXT_PUBLIC_USERBACK_TOKEN instead of hardcoding.
    const token: string = 'YOUR_ACCESS_TOKEN';

    const options: UserbackOptions = {
      user_data: {
        id: '123456',
        info: {
          name: 'someone',
          email: 'someone@example.com'
        }
      }
    };

    Userback(token, options).then((userback_instance: UserbackWidget) => {
      console.log('Userback widget loaded');
    });
  }, []);

  return null;
};

export default UserbackWidget;
```

--------------------------------

### Launcher Controls

Source: https://docs.userback.io/docs/npm

Methods to show or hide the Userback launcher button.

```APIDOC
## showLauncher()
## hideLauncher()

### Description
Controls the visibility of the Userback widget launcher button on the page.
```

--------------------------------

### Webhook JSON Payload Structure

Source: https://docs.userback.io/docs/webhooks

Example of the JSON data structure sent to your webhook endpoint, containing event details and metadata.

```json
{
  "action": "create",
  "type": "feedback",
  "data": {
    "id"                : 2007850,
    "feedback_type"     : "bug",
    "project"           : "Pied Piper",
    "page"              : "https://example.com/pricing",
    "email"             : "user@example.com",
    "name"              : "John Doe",
    "location"          : "San Francisco US 94103",
    "priority"          : "Urgent",
    "category"          : "UI,Frontend",
    "assignee"          : {
        "name"  : "John Doe",
        "email" : "assignee@example.com"
    },
    "rating"            : 5,
    "vote"              : 0,
    "dpi"               : "2.0",
    "colour_depth"      : "24-bit",
    "title"             : "Feedback Title",
    "description"       : "...",
    "browser"           : "Chrome 138.0.7204",
    "window_size"       : "1920 x 1080",
    "screen_resolution" : "1920 x 1080",
    "video"             : "https://example.com/video.mp4",
    "screenshot"        : [
        {
            "url"         : "https://example.com/screenshot.png",
            "window_size" : "1920 x 1080"
        }
    ],
    "attachment"        : "https://example.com/attachment.zip",
    "comments"          : [
        {
            "comment"           : "This button is misaligned",
            "attachment"        : "",
            "position_x"        : 120,
            "position_y"        : 340,
            "screenshot_number" : 1
        }
    ], // screenshot pin comments
    "custom_data"       : {...},
    "user_data"         : {...},
    "console_logs"      : "Error: something went wrong\r\nWarning: deprecated call\r\n",
    "html_content"      : "...",
    "share_url"         : "https://app.userback.io/viewer/123456/98765/2007850MSNv8n6f/"
  },
  "timestamp": 1667263011,
  "url": "https://app.userback.io/viewer/123456/98765/2007850MSNv8n6f/",
  "feedback_url": "https://app.userback.io/viewer/123456/98765/2007850MSNv8n6f/"
}
```

--------------------------------

### POST https://rest.userback.io/1.0/feedback/screenshot

Source: https://docs.userback.io/reference/createscreenshot

Creates a new feedback screenshot by providing a feedback ID and an array of files.

```APIDOC
## POST https://rest.userback.io/1.0/feedback/screenshot

### Description
Create new FeedbackScreenshots.

### Method
POST

### Endpoint
https://rest.userback.io/1.0/feedback/screenshot

### Parameters
#### Request Body
- **feedbackId** (int32) - Required - Feedback ID (1 to 281474976710655)
- **files** (array of files) - Required - Files to upload (length between 1 and 3)

### Response
#### Success Response (201)
- Created

#### Error Responses
- 401: Not Authorized
- 412: Precondition Failed
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### POST https://rest.userback.io/1.0/workflow

Source: https://docs.userback.io/reference/createworkflow

Creates a new workflow in the specified project.

```APIDOC
## POST https://rest.userback.io/1.0/workflow

### Description
Create a new workflow.

### Method
POST

### Endpoint
https://rest.userback.io/1.0/workflow

### Request Body
- **name** (string) - Required - The name of the workflow (length 1-255, pattern ^[\w\-\s\.\!\#]+$)
- **color** (string) - Required - The color of the workflow in hex format (length <= 7, pattern ^#([A-F0-9]{6}|[A-F0-9]{3})$)
- **projectId** (int32) - Required - ID of the project (0 to 2147483647)

### Response
#### Success Response (201)
- Created

#### Error Responses
- 401: Not Authorized
- 422: Validation Error
- 429: Too Many Requests
- 500: Internal Server Error
```

--------------------------------

### Set static custom data with custom_data

Source: https://docs.userback.io/docs/attach-custom-data

Use this object for static data, particularly when the SDK is not yet initialized or when using the Basic Snippet installation.

```javascript
Userback.custom_data = {
    page_name: 'Checkout',
    user_status: 'Active'
};
```

--------------------------------

### Retrieve a feedback comment via cURL

Source: https://docs.userback.io/reference/feedback-comment

Use this cURL command to perform a GET request to the feedback comment endpoint. Replace 'id' in the URL with the actual feedback comment ID.

```Shell
curl --request GET \
     --url https://rest.userback.io/1.0/feedback/comment/id \
     --header 'accept: application/json'
```

--------------------------------

### Manage Widget Launcher Visibility

Source: https://docs.userback.io/docs/javascript-sdk

Show or hide the widget button, with an optional project key to switch projects.

```javascript
Userback.showLauncher(); // Show the widget
Userback.hideLauncher(); // Hide the widget
Userback.showLauncher('PROJECT_KEY');  // Switch to this project, then show the widget
```

--------------------------------

### Create FeedbackScreenshot Request

Source: https://docs.userback.io/reference/createscreenshot

Initializes the request structure for creating a new feedback screenshot via the REST API.

```Shell
Loading…
```

--------------------------------

### Initialize Userback in main.ts

Source: https://docs.userback.io/docs/angularjs

Initialize the widget after the Angular application has been bootstrapped. The options object is optional and used for identifying users.

```javascript
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";
import Userback from "@userback/widget";

// Identify your logged-in users (optional)
const options = {
  user_data: {
    id: "123456", // Unique user ID
    info: {
      name: "someone", // User's name
      email: "someone@example.com" // User's email
    }
  }
};

// Bootstrapping the Angular application
bootstrapApplication(AppComponent, appConfig)
  .then(() => {
    // After app is bootstrapped, initialize Userback
    Userback('YOUR_ACCESS_TOKEN', options)
      .then((userback_instance) => {
        console.log("Userback successfully initialized");
      })
  });
```

```typescript
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component"; 
import Userback from "@userback/widget";
import type { UserbackOptions, UserbackWidget } from "@userback/widget";

// identify your logged-in users (optional)
const options: UserbackOptions = {
  user_data: {
    id: "123456",
    info: {
      name: "someone",
      email: "someone@example.com"
    }
  }
};

bootstrapApplication(AppComponent, appConfig)
  .then(() => {
    // After app is bootstrapped, initialize Userback
    Userback('YOUR_ACCESS_TOKEN', options)
      .then((userback_instance: UserbackWidget) => {
        console.log("Userback successfully initialized");
      })
  })
```

--------------------------------

### Access Userback Instance via .then()

Source: https://docs.userback.io/docs/npm

Handle the initialized widget instance using promise chaining.

```javascript
Userback('YOUR_ACCESS_TOKEN', options).then((userback) => {
  userback.openForm(); // Example: manually open the widget
});
```

--------------------------------

### Implement Userback via React Context

Source: https://docs.userback.io/docs/react

Expose the Userback instance globally using a Context Provider to manage widget state and user identification.

```javascript
// UserbackProvider.jsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import Userback from '@userback/widget';

const UserbackContext = createContext(null);

export const UserbackProvider = ({ children }) => {
  const [userback, setUserback] = useState(null);

  useEffect(() => {
    const init = async () => {
      const instance = await Userback('YOUR_ACCESS_TOKEN', {
        user_data: {
          id: '123456',
          info: {
            name: 'Jane Doe',
            email: 'jane.doe@example.com',
          },
        },
      });
      setUserback(instance);
    };

    init();
  }, []);

  return (
    <UserbackContext.Provider value={ userback }>
      {children}
    </UserbackContext.Provider>
  );
};

export const useUserback = () => useContext(UserbackContext);
```

--------------------------------

### Identify feedback patterns prompt

Source: https://docs.userback.io/docs/userback-mcp

Use this prompt to cluster feedback themes and estimate impact for project management.

```text
Analyze all "In Progress" feedback in the APP project in Userback, cluster recurring themes, estimate impact, and propose efficient implementation to minimize time spent.
```

--------------------------------

### Create Global Userback Helper

Source: https://docs.userback.io/docs/vue

Create a reusable helper function to access the Userback instance globally.

```javascript
// userback.js
import { getCurrentInstance } from 'vue';

export function useUserback() {
  const instance = getCurrentInstance();
  if (!instance || !instance.proxy) {
    throw new Error('useUserback must be called within a Vue component setup.');
  }

  const userback = instance.proxy.$userback;
  if (!userback) {
    throw new Error('Userback is not initialized. Make sure initUserback was called.');
  }

  return userback;
}
```

--------------------------------

### Initialize Userback Widget

Source: https://docs.userback.io/docs/npm

Embed the widget and optionally identify users during initialization.

```javascript
import Userback from '@userback/widget';

// Optionally identify logged-in users
const options = {
  user_data: {
    id: "123456", // Unique user ID
    info: {
      name: "someone", // User's name
      email: "someone@example.com" // User's email
    }
  }
};

Userback('YOUR_ACCESS_TOKEN', options);
```

```typescript
import Userback, { UserbackOptions } from '@userback/widget';

// Optionally identify logged-in users
const options: UserbackOptions = {
  user_data: {
    id: "123456", // Unique user ID
    info: {
      name: "someone", // User's name
      email: "someone@example.com" // User's email
    }
  }
};

// Initialize Userback with the access token and options
Userback('YOUR_ACCESS_TOKEN', options);
```

--------------------------------

### Set User Data on Website

Source: https://docs.userback.io/docs/google-tag-manager

Define user identification variables on the window object before GTM loads.

```html
<script>
  window.userbackAccessToken = 'YOUR_ACCESS_TOKEN'; // set server-side
  window.userbackUserData = {
    id: '123456',
    info: {
      name: 'Jane Doe',
      email: 'jane@example.com'
    }
  };
</script>
```
Tokens:
Raw