mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-24 18:59:22 -06:00
Code Issues Packages Projects Releases 119 Wiki Activity

chore: restructure api docs and rewrite framework-guides

Browse Source
This commit is contained in:
ShubhamPalriwala
2023-08-25 17:42:49 +05:30
parent 544b7b401f
commit 524916c20c
17 changed files with 975 additions and 1056 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
apps/formbricks-com/app/docs/api/get-responses/page.mdx
View File

@@ -1,104 +0,0 @@
export const meta = {
title: "API: Get Responses",
description: "Fetch all the responses for your environment.",
};
[API]()
# API: Get Responses
## List all Responses {{ tag: 'GET', label: '/api/v1/responses' }}
<Row>
<Col>
Retrieve all the responses you have received for all your surveys.
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
### Optional Query Params
<Properties>
<Property name="surveyId" type="string">
SurveyId to filter responses by.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/responses">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/responses' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{title:'200 Success'}}
{
"data":[
{
"id":"cllnfybxd051rpl0gieavthr9",
"createdAt":"2023-08-23T07:56:33.121Z",
"updatedAt":"2023-08-23T07:56:41.793Z",
"surveyId":"cllnfy2780fromy0hy7uoxvtn",
"finished":true,
"data":{
"ec7agikkr58j8uonhioinkyk":"Loved it!",
"gml6mgy71efgtq8np3s9je5p":"clicked",
"klvpwd4x08x8quesihvw5l92":"Product Manager",
"kp62fbqe8cfzmvy8qwpr81b2":"Very disappointed",
"lkjaxb73ulydzeumhd51sx9g":"Not interesed.",
"ryo75306flyg72iaeditbv51":"Would love if it had dark theme."
},
"meta":{
"url":"https://app.formbricks.com/s/cllnfy2780fromy0hy7uoxvtn",
"userAgent":{
"os":"Linux",
"browser":"Chrome"
}
},
"personAttributes":null,
"person":null,
"notes":[],
"tags":[]
}
]
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "cllnfy2780fromy0hy7uoxvt not found",
"details": {
"resource_id": "survey",
"resource_type": "cllnfy2780fromy0hy7uoxvt"
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>

9
apps/formbricks-com/app/docs/api/overview/page.mdx
View File

@@ -8,7 +8,7 @@ export const meta = {
# API Overview
Formbricks offers two types of APIs: the Public Client API and the User API. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
Formbricks offers two types of APIs: the **Public Client API** and the **User API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
## Public Client API
@@ -24,4 +24,9 @@ API requests made to the User API are authorized using a personal API key. This
To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/api-key-setup).
By understanding the differences between these two APIs, you can choose the appropriate one for your needs, ensuring a secure and efficient integration with the Formbricks platform.
<Note>
By understanding the differences between these two APIs, you can choose the appropriate one for your needs,
ensuring a secure and efficient integration with the Formbricks platform.
</Note>
---

320
apps/formbricks-com/app/docs/api/survey-response/page.mdx Normal file
View File

@@ -0,0 +1,320 @@
import { Fence } from "@/components/shared/Fence";
export const meta = {
title: "Client API Overview",
description:
"Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
};
[Client API]()
# Client API Overview
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
---
## List all responses {{ tag: 'GET', label: '/api/v1/responses' }}
<Row>
<Col>
Retrieve all the responses you have received for all your surveys.
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
### Optional Query Params
<Properties>
<Property name="surveyId" type="string">
SurveyId to filter responses by.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/responses">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/responses' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{title:'200 Success'}}
{
"data":[
{
"id":"cllnfybxd051rpl0gieavthr9",
"createdAt":"2023-08-23T07:56:33.121Z",
"updatedAt":"2023-08-23T07:56:41.793Z",
"surveyId":"cllnfy2780fromy0hy7uoxvtn",
"finished":true,
"data":{
"ec7agikkr58j8uonhioinkyk":"Loved it!",
"gml6mgy71efgtq8np3s9je5p":"clicked",
"klvpwd4x08x8quesihvw5l92":"Product Manager",
"kp62fbqe8cfzmvy8qwpr81b2":"Very disappointed",
"lkjaxb73ulydzeumhd51sx9g":"Not interesed.",
"ryo75306flyg72iaeditbv51":"Would love if it had dark theme."
},
"meta":{
"url":"https://app.formbricks.com/s/cllnfy2780fromy0hy7uoxvtn",
"userAgent":{
"os":"Linux",
"browser":"Chrome"
}
},
"personAttributes":null,
"person":null,
"notes":[],
"tags":[]
}
]
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "cllnfy2780fromy0hy7uoxvt not found",
"details": {
"resource_id": "survey",
"resource_type": "cllnfy2780fromy0hy7uoxvt"
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
Add a new response to a survey.
<Row>
<Col>
### Mandatory Body Fields
<Properties>
<Property name="surveyId" type="string">
The id of the survey the response belongs to.
</Property>
<Property name="finished" type="boolean">
Marks whether the response is complete or not.
</Property>
<Property name="data" type="string">
The data of the response as JSON object (key: questionId, value: answer).
</Property>
</Properties>
### Optional Body Fields
<Properties>
<Property name="personId" type="string" required>
Internal Formbricks id to identify the user sending the response
</Property>
</Properties>
### Parameters Explained
| field name | required | default | description |
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
| personId | no | - | The person this response is connected to. |
| surveyId | yes | - | The survey this response is connected to. |
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses' \
--data-raw '{
"surveyId":"clfqz1esd0000yzah51trddn8",
"personId": "clfqjny0v000ayzgsycx54a2c",
"finished": true,
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}'
```
```json {{ title: 'Example Request Body' }}
{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "clisyqeoi000219t52m5gopke",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"person": {
"id": "clfqjny0v000ayzgsycx54a2c",
"attributes": {
"email": "me@johndoe.com"
}
},
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "surveyId was not provided.",
"details": {
"surveyId": "This field is required."
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Update a response {{ tag: 'POST', label: '/api/v1/client/responses/[responseId]' }}
Update an existing response in a survey.
<Row>
<Col>
### Mandatory Body Fields
<Properties>
<Property name="data" type="string">
The data of the response as JSON object (key: questionId, value: answer).
</Property>
</Properties>
### Parameters Explained
| field name | required | default | description |
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/[responseId]">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/[responseId]' \
--data-raw '{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clggpvpvu0009n40g8ikawby8": 5,
}
}'
```
```json {{ title: 'Example Request Body' }}
{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clggpvpvu0009n40g8ikawby8": 5,
}
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "clisyqeoi000219t52m5gopke",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"person": {
"id": "clfqjny0v000ayzgsycx54a2c",
"attributes": {
"email": "me@johndoe.com"
}
},
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
"clggpvpvu0009n40g8ikawby8": 5
}
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "data was not provided.",
"details": {
"data": "This field is required."
}
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "Response not found"
}
```
</CodeGroup>
</Col>
</Row>

399
apps/formbricks-com/app/docs/api/webhook/page.mdx Normal file
View File

@@ -0,0 +1,399 @@
export const meta = {
title: "Webhook API Overview",
description: "Learn how to use the Formbricks Webhook API.",
};
[Webhook API]()
# Webhook API Overview
Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks in Formbricks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
Before you start managing webhooks, you need to create an API key. This will be used for authorization when making requests to the Webhook API. Please see the [API key setup page](/docs/api/api-key-setup) for more details on how to create and manage your API keys.
The behavior of the webhooks is determined by their trigger settings. The trigger determines which updates the webhook sends. Current available triggers include "responseCreated", "responseUpdated", and "responseFinished". This allows you to customize your webhooks to only send notifications for the events that are relevant to your application.
Webhooks are tied to a specific Formbricks environment. Once set, a webhook will receive updates from all surveys within this environment. This makes it easy to manage your data flow and ensure that all relevant updates are caught by the webhook.
Our API has several REST endpoints enabling you to manage these webhooks, providing a great deal of flexibility:
1. **List Webhooks:** Retrieve a list of all existing webhooks.
1. **Retrieve Webhook by ID:** Retrieve a specific webhook by it's ID.
1. **Create a New Webhook:** Add a new webhook to your system.
1. **Get a Specific Webhook:** Query the details of a specific webhook using its unique ID.
1. **Delete a Webhook:** Remove an existing webhook.
These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.
---
## List Webhooks {{ tag: 'GET', label: '/api/v1/webhooks' }}
<Row>
<Col>
Learn how to retrieve a list of all webhooks via API.
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/webhooks">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/webhooks' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": [
{
"id": "cliu1kdza000219zftad4ip6c",
"createdAt": "2023-06-13T08:49:04.198Z",
"updatedAt": "2023-06-13T08:49:04.198Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": [
"responseFinished"
]
}
]
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Retrieve Webhook by ID {{ tag: 'GET', label: '/api/v1/webhooks/[webhookId]' }}
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/webhooks/[webhookId]">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu167rk000019zfhbo68bar",
"createdAt": "2023-06-13T08:38:02.960Z",
"updatedAt": "2023-06-13T08:38:02.960Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": [
"responseFinished"
]
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Create Webhook {{ tag: 'POST', label: '/api/v1/webhooks' }}
Add a webhook to your product.
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
### Request Body Parameters
<Properties>
<Property name="url" type="string" required>
The URL where the webhook will send data to.
</Property>
<Property name="triggers" type="string[]" required>
List of events that will trigger the webhook.
</Property>
<Property name="surveyIds" type="string[]">
List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys.
</Property>
</Properties>
| field name | required | default | description |
| ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| url | yes | - | The endpoint that the webhook will send data to |
| trigger | yes | - | The event that will trigger the webhook ("responseCreated" or "responseUpdated" or "responseFinished") |
| surveyIds | no | - | List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/webhooks">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/webhooks' \
--header 'x-api-key: <your-api-key>' \
--header 'Content-Type: application/json' \
--data-raw '{
"url": "https://mysystem.com/myendpoint",
"triggers": ["responseFinished"]
}'
```
```json {{ title: 'Example Request Body' }}
{
"url": "https://mysystem.com/myendpoint",
"triggers": ["responseFinished"]
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu1kdza000219zftad4ip6c",
"createdAt": "2023-06-13T08:49:04.198Z",
"updatedAt": "2023-06-13T08:49:04.198Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": ["responseFinished"],
"surveyIds": ["clisypjy4000319t4imm289uo"]
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "Missing trigger",
"details": {
"missing_field": "trigger"
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Delete Webhook by ID {{ tag: 'DELETE', label: '/api/v1/webhooks/[webhookId]' }}
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="DELETE" label="/api/v1/webhooks/[webhookId]">
```bash {{ title: 'cURL' }}
curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
--header 'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu167rk000019zfhbo68bar",
"createdAt": "2023-06-13T08:38:02.960Z",
"updatedAt": "2023-06-13T08:38:02.960Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": ["responseFinished"]
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "Webhook not found.",
"details": {
"webhookId": "The requested webhook does not exist."
}
}
```
</CodeGroup>
</Col>
</Row>
---
## Webhook Payload
This documentation helps understand the payload structure that will be received when the webhook is triggered in Formbricks.
<Row>
<Col sticky>
| Variable | Type | Description |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| webhookId | String | Webhook's Id |
| event | String | The name of the trigger event [responseCreated, responseUpdated, responseFinished] |
| data | Object | Contains the details of the newly created response. |
| data.id | String | Formbricks Response ID. |
| data.createdAt | String | The timestamp when the response was created. |
| data.updatedAt | String | The timestamp when the response was last updated. |
| data.surveyId | String | The identifier of the survey associated with this response. |
| data.finished | Boolean | A boolean value indicating whether the survey response is marked as finished. |
| data.data | Object | An object containing the response data, where keys are question identifiers, and values are the corresponding answers given by the respondent. |
| data.meta | Object | Additional metadata related to the response, such as the user's operating system and browser information. |
| data.personAttributes | Object | An object with attributes related to the respondent, such as their email and a user ID (if available). |
| data.person | Object | Information about the respondent, including their unique id, attributes, and creation/update timestamps. |
| data.notes | Array | An array of notes associated with the response (if any). |
| data.tags | Array | An array of tags assigned to the response (if any). |
</Col>
<Col>
### An example webhook payload
<CodeGroup title="Payload">
```json
{
"webhookId": "cljwxvjos0003qhnvj2jg4k5i",
"event": "responseCreated",
"data": {
"id": "cljwy2m8r0001qhclco1godnu",
"createdAt": "2023-07-10T14:14:17.115Z",
"updatedAt": "2023-07-10T14:14:17.115Z",
"surveyId": "cljsf3d7a000019cv9apt2t27",
"finished": false,
"data": {
"qumbk3fkr6cky8850bvvq5z1": "Executive"
},
"meta": {
"userAgent": {
"os": "Mac OS",
"browser": "Chrome"
}
},
"personAttributes": {
"email": "test@web.com",
"userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
},
"person": {
"id": "cljold01t0000qh8ewzigzmjk",
"attributes": {
"email": "test@web.com",
"userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
},
"createdAt": "2023-07-04T17:56:17.154Z",
"updatedAt": "2023-07-04T17:56:17.154Z"
},
"notes": [],
"tags": []
}
}
```
</CodeGroup>
</Col>
</Row>
---

2
apps/formbricks-com/app/docs/attributes/custom-attributes/page.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
### Setting Custom User Attributes
## Setting Custom User Attributes
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):

116
apps/formbricks-com/app/docs/client-api/create-response/page.mdx
View File

@@ -1,116 +0,0 @@
export const meta = {
title: "API: Create response",
description: "Learn how to create a new response to a survey via API.",
};
[Client API]()
# API: Create Response
## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
Add a new response to a survey.
<Row>
<Col>
### Mandatory Body Fields
<Properties>
<Property name="surveyId" type="string">
The id of the survey the response belongs to.
</Property>
<Property name="finished" type="boolean">
Marks whether the response is complete or not.
</Property>
<Property name="data" type="string">
The data of the response as JSON object (key: questionId, value: answer).
</Property>
</Properties>
### Optional Body Fields
<Properties>
<Property name="personId" type="string" required>
Internal Formbricks id to identify the user sending the response
</Property>
</Properties>
### Parameters Explained
| field name | required | default | description |
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
| personId | no | - | The person this response is connected to. |
| surveyId | yes | - | The survey this response is connected to. |
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses' \
--data-raw '{
"surveyId":"clfqz1esd0000yzah51trddn8",
"personId": "clfqjny0v000ayzgsycx54a2c",
"finished": true,
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}'
```
```json {{ title: 'Example Request Body' }}
{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "clisyqeoi000219t52m5gopke",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"person": {
"id": "clfqjny0v000ayzgsycx54a2c",
"attributes": {
"email": "me@johndoe.com"
}
},
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
}
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "surveyId was not provided.",
"details": {
"surveyId": "This field is required."
}
}
```
</CodeGroup>
</Col>
</Row>

13
apps/formbricks-com/app/docs/client-api/overview/page.mdx
View File

@@ -1,13 +0,0 @@
import { Fence } from "@/components/shared/Fence";
export const meta = {
title: "Client API Overview",
description:
"Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
};
[Client API]()
# Client API Overview
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.

103
apps/formbricks-com/app/docs/client-api/update-response/page.mdx
View File

@@ -1,103 +0,0 @@
export const meta = {
title: "API: Update submission",
description: "Learn how to update a new response to a survey via API.",
};
[Client API]()
# API: Update Response
Update an existing response in a survey.
<Row>
<Col>
### Mandatory Body Fields
<Properties>
<Property name="data" type="string">
The data of the response as JSON object (key: questionId, value: answer).
</Property>
</Properties>
### Parameters Explained
| field name | required | default | description |
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/[responseId]">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/[responseId]' \
--data-raw '{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clggpvpvu0009n40g8ikawby8": 5,
}
}'
```
```json {{ title: 'Example Request Body' }}
{
"personId": "clfqjny0v000ayzgsycx54a2c",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"data": {
"clggpvpvu0009n40g8ikawby8": 5,
}
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "clisyqeoi000219t52m5gopke",
"surveyId": "clfqz1esd0000yzah51trddn8",
"finished": true,
"person": {
"id": "clfqjny0v000ayzgsycx54a2c",
"attributes": {
"email": "me@johndoe.com"
}
},
"data": {
"clfqjny0v0003yzgscnog1j9i": 10,
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
"clggpvpvu0009n40g8ikawby8": 5
}
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "data was not provided.",
"details": {
"data": "This field is required."
}
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "Response not found"
}
```
</CodeGroup>
</Col>
</Row>

504
apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
View File

@@ -33,337 +33,310 @@ Before getting started, make sure you have:
## Formbricks x HTML
<Row>
<Col>
All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
### Required Customizations to be Made
<CodeGroup title="HTML">
```html {{ title: '<your-main-file>.html' }}
<script type="text/javascript">
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="./dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("<environment-id>","<api-host>")},500)}();
</script>
```
</CodeGroup>
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.<br/>
_Get this from the Setup Checklist inside the Settings page of Formbricks dashboard_
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.<br/>
_If you're using the cloud app, please use `"https://app.formbricks.com`"_
</Property>
</Properties>
### Required Customizations to be Made
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="HTML">
```html {{ title: '<your-main-file>.html' }}
<script type="text/javascript">
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="./dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("<environment-id>","<api-host>")},500)}();
</script>
```
</CodeGroup>
</Col>
</Row>
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
## Formbricks x ReactJS
<Row>
<Col>
Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.<br/>
Now, update your App.js/ts file to initialise Formbricks.
Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
### Required Customizations to be Made
<CodeGroup title="Install Formbricks">
```sh {{ title: 'npm' }}
npm install --save @formbricks/js
```
```sh {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```sh {{ title: 'yarn' }}
yarn add @formbricks/js
```
</CodeGroup>
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.<br/>
_Get this from the Setup Checklist inside the Settings page of Formbricks dashboard_
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.<br/>
_If you're using the cloud app, please use `"https://app.formbricks.com`"_
</Property>
</Properties>
Now, update your App.js/ts file to initialise Formbricks.
### What are we doing here?
<CodeGroup title="app.js">
The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content.
```js
<Image
src={ReactApp}
alt="In app survey in React app for micro surveys"
quality="100"
className="rounded-lg max-w-full sm:max-w-lg"
/>
// other imports
import formbricks from "@formbricks/js";
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
debug: true, // remove when in production
});
}
</Col>
<Col sticky>
<CodeGroup title="Install Formbricks">
```sh {{ title: 'npm' }}
npm install --save @formbricks/js
```
```sh {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```sh {{ title: 'yarn' }}
yarn add @formbricks/js
```
</CodeGroup>
<CodeGroup title="Initialise Formbricks in your App">
```js {{ title: 'app.js' }}
// other imports
import formbricks from "@formbricks/js";
function App() {
// your own app
}
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
debug: true, // remove when in production
});
}
export default App;
```
function App() {
// your own app
}
</CodeGroup>
export default App;
```
</CodeGroup>
### Required Customizations to be Made
</Col>
</Row>
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.
</Property>
</Properties>
### What are we doing here?
The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content.
<Image
src={ReactApp}
alt="In app survey in React app for micro surveys"
quality="100"
className="rounded-lg max-w-full sm:max-w-lg"
/>
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
## Formbricks x NextJS
<Row>
<Col>
NextJs projects typically follow two main conventions: the App Directory and the Pages Directory.
To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the
guidelines for each convention below:
NextJs projects typically follow two main conventions: the App Directory and the Pages Directory.
To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the
guidelines for each convention below:
- App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file.
- Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there.
- App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file.
- Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there.
Code snippets for the integration for both conventions are provided to further assist you.
Code snippets for the integration for both conventions are provided to further assist you.
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
```
```shell {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```shell {{ title: 'yarn' }}
yarn add @formbricks/js
```
</CodeGroup>
### Required Customizations to be Made
### App Directory
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.<br/>
_Get this from the Setup Checklist inside the Settings page of Formbricks dashboard_
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.<br/>
_If you're using the cloud app, please use `"https://app.formbricks.com`"_
</Property>
</Properties>
<CodeGroup title="app/formbricks.tsx">
```tsx {{title: 'Typescript'}}
"use client";
import formbricks from "@formbricks/js";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
### Optional Customizations to be Made
export default function FormbricksProvider() {
const pathname = usePathname();
const searchParams = useSearchParams();
<Properties>
<Property name="debug" type="boolean">
Whether you want to see debug messages from Formbricks on your client-side console.
</Property>
</Properties>
useEffect(() => {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
debug: true, // remove when in production
});
}, []);
### What are we doing here?
useEffect(() => {
formbricks?.registerRouteChange();
}, [pathname, searchParams]);
First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.
return null;
}
```
</CodeGroup>
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
<CodeGroup title="app/layout.tsx">
```tsx {{title: 'Typescript'}}
import FormbricksProvider from "./formbricks";
import "./globals.css";
</Col>
<Col sticky>
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
```
```shell {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```shell {{ title: 'yarn' }}
yarn add @formbricks/js
```
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<FormbricksProvider />
<body>{children}</body>
</html>
);
}
```
</CodeGroup>
<CodeGroup title="NextJs Structure: App Directory">
```tsx {{ title: 'app/formbricks.tsx' }}
"use client";
import formbricks from "@formbricks/js";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
</CodeGroup>
export default function FormbricksProvider() {
const pathname = usePathname();
const searchParams = useSearchParams();
### Pages Directory
useEffect(() => {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
debug: true, // remove when in production
});
}, []);
<CodeGroup title="_app.tsx">
```tsx {{ title: 'Typescript' }}
import "@/styles/globals.css";
import type { PagesProps } from "next/app";
import { useEffect } from "react";
import { useRouter } from "next/router";
import formbricks from "@formbricks/js";
useEffect(() => {
formbricks?.registerRouteChange();
}, [pathname, searchParams]);
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "your-environment-id",
apiHost: "your-api-host", // e.g. https://app.formbricks.com
debug: true, // remove when in production
});
}
return null;
}
```
export default function Pages({ Component, pageProps }: PagesProps) {
const router = useRouter();
```js {{ title: 'app/layout.tsx' }}
import FormbricksProvider from "./formbricks";
import "./globals.css";
useEffect(() => {
// Connect next.js router to Formbricks
const handleRouteChange = formbricks?.registerRouteChange;
router.events.on("routeChangeComplete", handleRouteChange);
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<FormbricksProvider />
<body>{children}</body>
</html>
);
}
```
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, []);
</CodeGroup>
return <Component {...pageProps} />;
}
```
</CodeGroup>
<CodeGroup title="NextJs Structure: Pages Directory">
```tsx {{ title: '_app.tsx' }}
import "@/styles/globals.css";
import type { PagesProps } from "next/app";
import { useEffect } from "react";
import { useRouter } from "next/router";
import formbricks from "@formbricks/js";
### Required Customizations to be Made
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "your-environment-id",
apiHost: "your-api-host", // e.g. https://app.formbricks.com
debug: true, // remove when in production
});
}
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.
</Property>
</Properties>
export default function Pages({ Component, pageProps }: PagesProps) {
const router = useRouter();
### Optional Customizations to be Made
useEffect(() => {
// Connect next.js router to Formbricks
const handleRouteChange = formbricks?.registerRouteChange;
router.events.on("routeChangeComplete", handleRouteChange);
<Properties>
<Property name="debug" type="boolean">
Whether you want to see debug messages from Formbricks on your client-side console.
</Property>
</Properties>
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, []);
### What are we doing here?
return <Component {...pageProps} />;
}
```
</CodeGroup>
First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.
</Col>
</Row>
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
## Formbricks x VueJs
<Row>
<Col>
Integrating the Formbricks SDK with Vue.js is a straightforward process.
We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.
Integrating the Formbricks SDK with Vue.js is a straightforward process.
We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
```
```shell {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```shell {{ title: 'yarn' }}
yarn add @formbricks/js
```
### Required Customizations to be Made
</CodeGroup>
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.<br/>
_Get this from the Setup Checklist inside the Settings page of Formbricks dashboard_
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.<br/>
_If you're using the cloud app, please use `"https://app.formbricks.com`"_
</Property>
</Properties>
<CodeGroup title="src/formbricks.js">
```js
import formbricks from "@formbricks/js";
### Optional Customizations to be Made
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
});
}
<Properties>
<Property name="debug" type="boolean">
Whether you want to see debug messages from Formbricks on your client-side console.
</Property>
</Properties>
export default formbricks;
```
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
```js {{ title: 'main.js' }}
// other imports
import Vue from "vue";
import VueRouter from "vue-router";
import formbricks from "@/formbricks";
</Col>
<Col sticky>
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
```
```shell {{ title: 'pnpm' }}
pnpm add @formbricks/js
```
```shell {{ title: 'yarn' }}
yarn add @formbricks/js
```
Vue.use(VueRouter);
</CodeGroup>
<CodeGroup title="Initialise Formbricks">
```js {{ title: 'src/formbricks.js' }}
import formbricks from "@formbricks/js";
const router = new VueRouter({
// Your router configuration here
});
if (typeof window !== "undefined") {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
});
}
// Add a global navigation guard
router.afterEach((to, from) => {
if (typeof formbricks !== "undefined") {
formbricks.registerRouteChange();
}
});
```
export default formbricks;
```
</CodeGroup>
```js {{ title: 'main.js' }}
// other imports
import Vue from "vue";
import VueRouter from "vue-router";
import formbricks from "@/formbricks";
### Required Customizations to be Made
<Properties>
<Property name="environment-id" type="string">
Formbricks Environment ID.
</Property>
</Properties>
<Properties>
<Property name="api-host" type="string">
URL of the hosted Formbricks instance.
</Property>
</Properties>
Vue.use(VueRouter);
### Optional Customizations to be Made
const router = new VueRouter({
// Your router configuration here
});
<Properties>
<Property name="debug" type="boolean">
Whether you want to see debug messages from Formbricks on your client-side console.
</Property>
</Properties>
// Add a global navigation guard
router.afterEach((to, from) => {
if (typeof formbricks !== "undefined") {
formbricks.registerRouteChange();
}
});
```
</CodeGroup>
</Col>
</Row>
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
## Validate your setup
@@ -386,4 +359,3 @@ To this:
/>
**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**

16
apps/formbricks-com/app/docs/integrations/zapier/page.mdx
View File

@@ -26,7 +26,7 @@ export const meta = {
Zapier is a powerful ally. Hook up Formbricks with Zapier and you can send your data to 5000+ other apps. Here is how to do it.
<Note>
## Nail down your survey first? {{ class: "text-white" }}
### Nail down your survey first? {{ class: "text-white" }}
Any changes in the survey cause additional work in the Zap. It makes sense to first settle on the survey you
want to run and then get to setting up Zapier.
</Note>
@@ -45,7 +45,7 @@ When setting up the Zap your life will be easier when you change the `questionId
_In every question card in the Advanced Settings you find the Question ID field. Update it so that you’ll recognize the response tied to this question._
<Note>
## Already published? Duplicate survey {{ class: "text-white" }}
### Already published? Duplicate survey {{ class: "text-white" }}
You can only update the questionId when the survey was not yet published. Already published it? Just **duplicate
it** to update the questionIds.
<Image
@@ -56,7 +56,7 @@ _In every question card in the Advanced Settings you find the Question ID field.
/>
</Note>
## Step 3: Send a test response
## Step 2: Send a test response
In order to set up Zapier you’ll need a test response. This allows you to select the individual values of each response in your Zap. If you have Formbricks running locally and you want to set up an in-app survey, you can use our [Demo App](/docs/contributing/demo) to trigger a survey and submit a response.
@@ -67,7 +67,7 @@ In order to set up Zapier you’ll need a test response. This allows you to sele
className="rounded-lg max-w-full sm:max-w-3xl"
/>
## Step 4: Setup your Zap
## Step 3: Setup your Zap
Go to [zapier.com](https://zapier.com) and create a new Zap. Search for “Formbricks” to get started:
@@ -77,7 +77,7 @@ Then, choose the event you want to trigger the Zap on:
<Image src={ChooseEvent} alt="Choose Event" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
## Step 5: Connect Formbricks with Zapier
## Step 4: Connect Formbricks with Zapier
Now, you have to connect Zapier with Formbricks via an API Key:
@@ -105,13 +105,13 @@ Once you copied it in the newly opened Zapier window, you will be connected:
className="rounded-lg max-w-full sm:max-w-3xl"
/>
## Step 6: Select Survey
## Step 5: Select Survey
Next, you can choose from all the surveys you have created in this environment:
<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
## Step 7: Test your trigger
## Step 6: Test your trigger
Once you hit “Test” you will see the three most recent submissions for this survey. If you don’t have any submissions in the survey, submit one to continue setting up your Zap:
@@ -123,7 +123,7 @@ Once you hit “Test” you will see the three most recent submissions for this
/>
_Now you're happy that you updated the questionId's_
## Step 8: Set up your Zap
## Step 7: Set up your Zap
Now you have all the data you need at hand. The next steps depend on what you want to do with it. In this tutorial, we will send submissions to a Slack channel:

108
apps/formbricks-com/app/docs/webhook-api/create-webhook/page.mdx
View File

@@ -1,108 +0,0 @@
export const meta = {
title: "API: Create webhook",
description: "Learn how to create a new webhook via API.",
};
[Webhook API]()
# API: Create webhook
## Create a new Webhook {{ tag: 'POST', label: '/api/v1/webhooks' }}
Add a webhook to your product.
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
### Request Body Parameters
<Properties>
<Property name="url" type="string" required>
The URL where the webhook will send data to.
</Property>
<Property name="triggers" type="string[]" required>
List of events that will trigger the webhook.
</Property>
<Property name="surveyIds" type="string[]">
List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys.
</Property>
</Properties>
| field name | required | default | description |
| ---------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| url | yes | - | The endpoint that the webhook will send data to |
| trigger | yes | - | The event that will trigger the webhook ("responseCreated" or "responseUpdated" or "responseFinished") |
| surveyIds | no | - | List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys. |
</Col>
<Col sticky>
<CodeGroup title="Request" tag="POST" label="/api/v1/webhooks">
```bash {{ title: 'cURL' }}
curl --location --request POST 'https://app.formbricks.com/api/v1/webhooks' \
--header 'x-api-key: <your-api-key>' \
--header 'Content-Type: application/json' \
--data-raw '{
"url": "https://mysystem.com/myendpoint",
"triggers": ["responseFinished"]
}'
```
```json {{ title: 'Example Request Body' }}
{
"url": "https://mysystem.com/myendpoint",
"triggers": ["responseFinished"]
}
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu1kdza000219zftad4ip6c",
"createdAt": "2023-06-13T08:49:04.198Z",
"updatedAt": "2023-06-13T08:49:04.198Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": ["responseFinished"],
"surveyIds": ["clisypjy4000319t4imm289uo"]
}
}
```
```json {{ title: '400 Bad Request' }}
{
"code": "bad_request",
"message": "Missing trigger",
"details": {
"missing_field": "trigger"
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>

73
apps/formbricks-com/app/docs/webhook-api/delete-webhook/page.mdx
View File

@@ -1,73 +0,0 @@
export const meta = {
title: "API: Delete Webhook",
description: "Learn how to delete a specific webhook by its ID via API.",
};
[Webhook API]()
# API: Delete Webhook
## Delete a specific webhook by its ID {{ tag: 'DELETE', label: '/api/v1/webhooks/[webhookId]' }}
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="DELETE" label="/api/v1/webhooks/[webhookId]">
```bash {{ title: 'cURL' }}
curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
--header 'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu167rk000019zfhbo68bar",
"createdAt": "2023-06-13T08:38:02.960Z",
"updatedAt": "2023-06-13T08:38:02.960Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": ["responseFinished"]
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
```json {{ title: '404 Not Found' }}
{
"code": "not_found",
"message": "Webhook not found.",
"details": {
"webhookId": "The requested webhook does not exist."
}
}
```
</CodeGroup>
</Col>
</Row>

67
apps/formbricks-com/app/docs/webhook-api/get-webhook/page.mdx
View File

@@ -1,67 +0,0 @@
export const meta = {
title: "API: Get Webhook",
description: "Learn how to retrieve a specific webhook by its ID via API.",
};
[Webhook API]()
# API: Get Webhook
## Retrieve a specific webhook by its ID {{ tag: 'GET', label: '/api/v1/webhooks/[webhookId]' }}
<Row>
<Col>
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/webhooks/[webhookId]">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/webhooks/[webhookId]' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": {
"id": "cliu167rk000019zfhbo68bar",
"createdAt": "2023-06-13T08:38:02.960Z",
"updatedAt": "2023-06-13T08:38:02.960Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": [
"responseFinished"
]
}
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>

71
apps/formbricks-com/app/docs/webhook-api/list-webhooks/page.mdx
View File

@@ -1,71 +0,0 @@
export const meta = {
title: "API: List Webhooks",
description: "Learn how to retrieve a list of all webhooks via API.",
};
[Webhook API]()
# API: List Webhooks
## Retrieve a list of all webhooks {{ tag: 'GET', label: '/api/v1/webhooks' }}
<Row>
<Col>
Learn how to retrieve a list of all webhooks via API.
### Mandatory Headers
<Properties>
<Property name="x-Api-Key" type="string">
Your Formbricks API key.
</Property>
</Properties>
</Col>
<Col sticky>
<CodeGroup title="Request" tag="GET" label="/api/v1/webhooks">
```bash {{ title: 'cURL' }}
curl --location \
'https://app.formbricks.com/api/v1/webhooks' \
--header \
'x-api-key: <your-api-key>'
```
</CodeGroup>
<CodeGroup title="Response">
```json {{ title: '200 Success' }}
{
"data": [
{
"id": "cliu1kdza000219zftad4ip6c",
"createdAt": "2023-06-13T08:49:04.198Z",
"updatedAt": "2023-06-13T08:49:04.198Z",
"url": "https://mysystem.com/myendpoint",
"environmentId": "clisypjy4000319t4imm289uo",
"triggers": [
"responseFinished"
]
}
]
}
```
```json {{ title: '401 Not Authenticated' }}
{
"code": "not_authenticated",
"message": "Not authenticated",
"details": {
"x-Api-Key": "Header not provided or API Key invalid"
}
}
```
</CodeGroup>
</Col>
</Row>

25
apps/formbricks-com/app/docs/webhook-api/overview/page.mdx
View File

@@ -1,25 +0,0 @@
export const meta = {
title: "Webhook API Overview",
description: "Learn how to use the Formbricks Webhook API.",
};
[Webhook API]()
# Webhook API Overview
Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks in Formbricks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment.
Before you start managing webhooks, you need to create an API key. This will be used for authorization when making requests to the Webhook API. Please see the [API key setup page](/docs/api/api-key-setup) for more details on how to create and manage your API keys.
The behavior of the webhooks is determined by their trigger settings. The trigger determines which updates the webhook sends. Current available triggers include "responseCreated", "responseUpdated", and "responseFinished". This allows you to customize your webhooks to only send notifications for the events that are relevant to your application.
Webhooks are tied to a specific Formbricks environment. Once set, a webhook will receive updates from all surveys within this environment. This makes it easy to manage your data flow and ensure that all relevant updates are caught by the webhook.
Our API has several REST endpoints enabling you to manage these webhooks, providing a great deal of flexibility:
1. **List Webhooks:** Retrieve a list of all existing webhooks.
2. **Create a New Webhook:** Add a new webhook to your system.
3. **Get a Specific Webhook:** Query the details of a specific webhook using its unique ID.
4. **Delete a Webhook:** Remove an existing webhook.
These APIs are designed to facilitate seamless integration of Formbricks with third-party systems. By making use of our webhook API, you can automate the process of sending data to these systems whenever significant events occur within your Formbricks environment.

79
apps/formbricks-com/app/docs/webhook-api/webhook-payload/page.mdx
View File

@@ -1,79 +0,0 @@
export const meta = {
title: "Webhook Payload",
description: "Learn how to handle the Formbricks API payload.",
};
[Webhook API]()
# Webhook Payload
This documentation helps understand the payload structure that will be received when the webhook is triggered in Formbricks.
<Row>
<Col sticky>
| Variable | Type | Description |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| webhookId | String | Webhook's Id |
| event | String | The name of the trigger event [responseCreated, responseUpdated, responseFinished] |
| data | Object | Contains the details of the newly created response. |
| data.id | String | Formbricks Response ID. |
| data.createdAt | String | The timestamp when the response was created. |
| data.updatedAt | String | The timestamp when the response was last updated. |
| data.surveyId | String | The identifier of the survey associated with this response. |
| data.finished | Boolean | A boolean value indicating whether the survey response is marked as finished. |
| data.data | Object | An object containing the response data, where keys are question identifiers, and values are the corresponding answers given by the respondent. |
| data.meta | Object | Additional metadata related to the response, such as the user's operating system and browser information. |
| data.personAttributes | Object | An object with attributes related to the respondent, such as their email and a user ID (if available). |
| data.person | Object | Information about the respondent, including their unique id, attributes, and creation/update timestamps. |
| data.notes | Array | An array of notes associated with the response (if any). |
| data.tags | Array | An array of tags assigned to the response (if any). |
</Col>
<Col>
## An example webhook payload
<CodeGroup title="Payload">
```json
{
"webhookId": "cljwxvjos0003qhnvj2jg4k5i",
"event": "responseCreated",
"data": {
"id": "cljwy2m8r0001qhclco1godnu",
"createdAt": "2023-07-10T14:14:17.115Z",
"updatedAt": "2023-07-10T14:14:17.115Z",
"surveyId": "cljsf3d7a000019cv9apt2t27",
"finished": false,
"data": {
"qumbk3fkr6cky8850bvvq5z1": "Executive"
},
"meta": {
"userAgent": {
"os": "Mac OS",
"browser": "Chrome"
}
},
"personAttributes": {
"email": "test@web.com",
"userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
},
"person": {
"id": "cljold01t0000qh8ewzigzmjk",
"attributes": {
"email": "test@web.com",
"userId": "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"
},
"createdAt": "2023-07-04T17:56:17.154Z",
"updatedAt": "2023-07-04T17:56:17.154Z"
},
"notes": [],
"tags": []
}
}
```
</CodeGroup>
</Col>
</Row>

22
apps/formbricks-com/components/docs/Navigation.tsx
View File

@@ -239,26 +239,8 @@ export const navigation: Array<NavGroup> = [
links: [
{ title: "Overview", href: "/docs/api/overview" },
{ title: "API Key Setup", href: "/docs/api/api-key-setup" },
{ title: "Get Responses", href: "/docs/api/get-responses" },
],
},
{
title: " Client API",
links: [
{ title: "Overview", href: "/docs/client-api/overview" },
{ title: "Create Response", href: "/docs/client-api/create-response" },
{ title: "Update Response", href: "/docs/client-api/update-response" },
],
},
{
title: "Webhook API",
links: [
{ title: "Overview", href: "/docs/webhook-api/overview" },
{ title: "List Webhooks", href: "/docs/webhook-api/list-webhooks" },
{ title: "Get Webhook", href: "/docs/webhook-api/get-webhook" },
{ title: "Create Webhook", href: "/docs/webhook-api/create-webhook" },
{ title: "Delete Webhook", href: "/docs/webhook-api/delete-webhook" },
{ title: "Webhook Payload", href: "/docs/webhook-api/webhook-payload" },
{ title: "Survey Response", href: "/docs/api/survey-response" },
{ title: "Webhook", href: "/docs/api/webhook" },
],
},
{