diff --git a/.env.example b/.env.example index 6b13545f3b..c203e9d9ba 100644 --- a/.env.example +++ b/.env.example @@ -173,6 +173,9 @@ ENTERPRISE_LICENSE_KEY= # OpenTelemetry URL for tracing # OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces +# Unsplash API Key +UNSPLASH_ACCESS_KEY= + # The below is used for Next Caching (uses In-Memory from Next Cache if not provided) # REDIS_URL: diff --git a/.github/workflows/cron-reportUsageToStripe.yml b/.github/workflows/cron-reportUsageToStripe.yml index 15892818a2..e40a1cb4d8 100644 --- a/.github/workflows/cron-reportUsageToStripe.yml +++ b/.github/workflows/cron-reportUsageToStripe.yml @@ -1,11 +1,12 @@ name: Cron - Report usage to Stripe on: + workflow_dispatch: # "Scheduled workflows run on the latest commit on the default or base branch." # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule - schedule: - # This will run the job at 20:00 UTC every day of every month. - - cron: "0 20 * * *" + # schedule: + # This will run the job at 20:00 UTC every day of every month. + # - cron: "0 20 * * *" jobs: cron-reportUsageToStripe: env: diff --git a/.github/workflows/cron-surveyStatusUpdate.yml b/.github/workflows/cron-surveyStatusUpdate.yml index 95d40fb894..8d365d842b 100644 --- a/.github/workflows/cron-surveyStatusUpdate.yml +++ b/.github/workflows/cron-surveyStatusUpdate.yml @@ -1,11 +1,12 @@ name: Cron - Survey status update on: + workflow_dispatch: # "Scheduled workflows run on the latest commit on the default or base branch." # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule - schedule: - # Runs “At 00:00.” (see https://crontab.guru) - - cron: "0 0 * * *" + # schedule: + # Runs “At 00:00.” (see https://crontab.guru) + # - cron: "0 0 * * *" jobs: cron-weeklySummary: env: diff --git a/.github/workflows/cron-weeklySummary.yml b/.github/workflows/cron-weeklySummary.yml index 975128849a..d95d8cc138 100644 --- a/.github/workflows/cron-weeklySummary.yml +++ b/.github/workflows/cron-weeklySummary.yml @@ -1,11 +1,12 @@ name: Cron - Weekly summary on: + workflow_dispatch: # "Scheduled workflows run on the latest commit on the default or base branch." # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule - schedule: - # Runs “At 08:00 on Monday.” (see https://crontab.guru) - - cron: "0 8 * * 1" + # schedule: + # Runs “At 08:00 on Monday.” (see https://crontab.guru) + # - cron: "0 8 * * 1" jobs: cron-weeklySummary: env: diff --git a/.github/workflows/kamal-deploy.yml b/.github/workflows/kamal-deploy.yml index bf9756b07a..0ec79b7310 100644 --- a/.github/workflows/kamal-deploy.yml +++ b/.github/workflows/kamal-deploy.yml @@ -81,6 +81,7 @@ jobs: DB_USER: ${{ secrets.DB_USER }} DB_PASSWORD: ${{ secrets.DB_PASSWORD }} DB_NAME: ${{ secrets.DB_NAME }} + REDIS_URL: ${{ secrets.REDIS_URL }} steps: - name: Checkout code diff --git a/.github/workflows/kamal-setup.yml b/.github/workflows/kamal-setup.yml index 70b42e6963..38b05715ad 100644 --- a/.github/workflows/kamal-setup.yml +++ b/.github/workflows/kamal-setup.yml @@ -78,6 +78,7 @@ jobs: DB_USER: ${{ secrets.DB_USER }} DB_PASSWORD: ${{ secrets.DB_PASSWORD }} DB_NAME: ${{ secrets.DB_NAME }} + REDIS_URL: ${{ secrets.REDIS_URL }} steps: - name: Checkout code diff --git a/apps/demo/components/Sidebar.tsx b/apps/demo/components/Sidebar.tsx index a10bc9fcb3..f68c1c979a 100644 --- a/apps/demo/components/Sidebar.tsx +++ b/apps/demo/components/Sidebar.tsx @@ -1,4 +1,3 @@ -import { classNames } from "@/lib/utils"; import { ClockIcon, CogIcon, @@ -11,6 +10,8 @@ import { UsersIcon, } from "lucide-react"; +import { classNames } from "../lib/utils"; + const navigation = [ { name: "Home", href: "#", icon: HomeIcon, current: true }, { name: "History", href: "#", icon: ClockIcon, current: false }, diff --git a/apps/demo/components/SurveySwitch.tsx b/apps/demo/components/SurveySwitch.tsx new file mode 100644 index 0000000000..002ddaa433 --- /dev/null +++ b/apps/demo/components/SurveySwitch.tsx @@ -0,0 +1,25 @@ +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select"; + +interface SurveySwitchProps { + value: "website" | "app"; + formbricks: any; +} + +export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => { + return ( + + ); +}; diff --git a/apps/demo/next.config.js b/apps/demo/next.config.js index 75fd113eb6..3f95c075b6 100644 --- a/apps/demo/next.config.js +++ b/apps/demo/next.config.js @@ -1,6 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + transpilePackages: ["@formbricks/ui"], async redirects() { return [ { diff --git a/apps/demo/package.json b/apps/demo/package.json index 0e7a03e359..2a5da44f85 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -12,12 +12,14 @@ }, "dependencies": { "@formbricks/js": "workspace:*", - "lucide-react": "^0.365.0", - "next": "14.1.4", + "@formbricks/ui": "workspace:*", + "lucide-react": "^0.373.0", + "next": "14.2.3", "react": "18.2.0", "react-dom": "18.2.0" }, "devDependencies": { - "eslint-config-formbricks": "workspace:*" + "eslint-config-formbricks": "workspace:*", + "@formbricks/tsconfig": "workspace:*" } } diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/app/index.tsx index 127ce94f8c..acc2cec63a 100644 --- a/apps/demo/pages/app/index.tsx +++ b/apps/demo/pages/app/index.tsx @@ -2,8 +2,9 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; -import formbricks from "@formbricks/js"; +import formbricks from "@formbricks/js/app"; +import { SurveySwitch } from "../../components/SurveySwitch"; import fbsetup from "../../public/fb-setup.png"; declare const window: any; @@ -30,22 +31,18 @@ export default function AppPage({}) { window.history.replaceState({}, "", newUrl); } }; + addFormbricksDebugParam(); if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) { - const isUserId = window.location.href.includes("userId=true"); - const defaultAttributes = { - language: "gu", - }; - const userInitAttributes = { "Init Attribute 1": "eight", "Init Attribute 2": "two" }; + const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING"; + const userInitAttributes = { language: "de", "Init Attribute 1": "eight", "Init Attribute 2": "two" }; - const attributes = isUserId ? { ...defaultAttributes, ...userInitAttributes } : defaultAttributes; - const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined; formbricks.init({ environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID, apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST, userId, - attributes, + attributes: userInitAttributes, }); } @@ -63,15 +60,19 @@ export default function AppPage({}) { return (
-
-

- Formbricks In-product Survey Demo App -

-

- This app helps you test your in-app surveys. You can create and test user actions, create and - update user attributes, etc. -

+
+ +
+

+ Formbricks In-product Survey Demo App +

+

+ This app helps you test your app surveys. You can create and test user actions, create and + update user attributes, etc. +

+
+
-
- {router.query.userId === "true" ? ( -
- -
- ) : ( -
- -
- )} -
-

- This button activates/deactivates{" "} - - user identification - {" "} - with the userId 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING' -

-
-
diff --git a/apps/demo/pages/website/index.tsx b/apps/demo/pages/website/index.tsx new file mode 100644 index 0000000000..e91ea3f158 --- /dev/null +++ b/apps/demo/pages/website/index.tsx @@ -0,0 +1,196 @@ +import Image from "next/image"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; + +import formbricks from "@formbricks/js/website"; + +import { SurveySwitch } from "../../components/SurveySwitch"; +import fbsetup from "../../public/fb-setup.png"; + +declare const window: any; + +export default function AppPage({}) { + const [darkMode, setDarkMode] = useState(false); + const router = useRouter(); + + useEffect(() => { + if (darkMode) { + document.body.classList.add("dark"); + } else { + document.body.classList.remove("dark"); + } + }, [darkMode]); + + useEffect(() => { + // enable Formbricks debug mode by adding formbricksDebug=true GET parameter + const addFormbricksDebugParam = () => { + const urlParams = new URLSearchParams(window.location.search); + if (!urlParams.has("formbricksDebug")) { + urlParams.set("formbricksDebug", "true"); + const newUrl = `${window.location.pathname}?${urlParams.toString()}`; + window.history.replaceState({}, "", newUrl); + } + }; + + addFormbricksDebugParam(); + + if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) { + const defaultAttributes = { + language: "de", + }; + + formbricks.init({ + environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID, + apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST, + attributes: defaultAttributes, + }); + } + + // Connect next.js router to Formbricks + if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) { + const handleRouteChange = formbricks?.registerRouteChange; + router.events.on("routeChangeComplete", handleRouteChange); + + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + }; + } + }); + + return ( +
+
+
+ +
+

+ Formbricks Website Survey Demo App +

+

+ This app helps you test your app surveys. You can create and test user actions, create and + update user attributes, etc. +

+
+
+ + +
+ +
+
+
+

1. Setup .env

+

+ Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env +

+ fb setup + +
+

You're connected with env:

+
+ + {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID} + + + + + +
+
+
+
+

2. Widget Logs

+

+ Look at the logs to understand how the widget works.{" "} + Open your browser console to see the logs. +

+ {/*
+ +
*/} +
+
+ +
+
+

+ Reset person / pull data from Formbricks app +

+

+ On formbricks.reset() the local state will be deleted and formbricks gets{" "} + reinitialized. +

+ +

+ If you made a change in Formbricks app and it does not seem to work, hit 'Reset' and + try again. +

+
+ +
+
+ +
+
+

+ This button sends an Action to the Formbricks API called 'New Session'. You will + find it in the Actions Tab. +

+
+
+ +
+
+ +
+
+

+ This button sends an Action to the Formbricks API called 'Exit Intent'. You can also + move your mouse to the top of the browser to trigger the exit intent. +

+
+
+ +
+
+ +
+
+

+ This button sends an Action to the Formbricks API called '50% Scroll'. You can also + scroll down to trigger the 50% scroll. +

+
+
+
+
+
+ ); +} diff --git a/apps/demo/tsconfig.json b/apps/demo/tsconfig.json index 8b8e58111e..6c36451d9b 100644 --- a/apps/demo/tsconfig.json +++ b/apps/demo/tsconfig.json @@ -1,23 +1,5 @@ { - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "paths": { - "@/*": ["./*"] - } - }, + "extends": "@formbricks/tsconfig/nextjs.json", "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } diff --git a/apps/formbricks-com/app/[surveyId]/route.ts b/apps/formbricks-com/app/[surveyId]/route.ts new file mode 100644 index 0000000000..bdde1107ba --- /dev/null +++ b/apps/formbricks-com/app/[surveyId]/route.ts @@ -0,0 +1,5 @@ +export async function GET(_: Request, { params }: { params: { surveyId: string } }) { + const surveyId = params.surveyId; + // redirect to Formbricks Cloud + return Response.redirect(`https://app.formbricks.com/s/${surveyId}`, 301); +} diff --git a/apps/formbricks-com/app/docs/api/management/api-key-setup/add-api-key.webp b/apps/formbricks-com/app/docs/additional-features/api/add-api-key.webp similarity index 100% rename from apps/formbricks-com/app/docs/api/management/api-key-setup/add-api-key.webp rename to apps/formbricks-com/app/docs/additional-features/api/add-api-key.webp diff --git a/apps/formbricks-com/app/docs/api/management/api-key-setup/api-key-secret.webp b/apps/formbricks-com/app/docs/additional-features/api/api-key-secret.webp similarity index 100% rename from apps/formbricks-com/app/docs/api/management/api-key-setup/api-key-secret.webp rename to apps/formbricks-com/app/docs/additional-features/api/api-key-secret.webp diff --git a/apps/formbricks-com/app/docs/additional-features/api/page.mdx b/apps/formbricks-com/app/docs/additional-features/api/page.mdx new file mode 100644 index 0000000000..d09ed103f2 --- /dev/null +++ b/apps/formbricks-com/app/docs/additional-features/api/page.mdx @@ -0,0 +1,137 @@ +import { MdxImage } from "@/components/shared/MdxImage"; +import AddApiKey from "./add-api-key.webp"; +import ApiKeySecret from "./api-key-secret.webp"; + +export const metadata = { + title: "Formbricks API Overview: Public Client & Management API Breakdown", + description: + "Formbricks provides a powerful API to manage your surveys, responses, users, displays, actions, attributes & webhooks programmatically. Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling", +}; + +#### API + +# API Overview + +Formbricks offers two types of APIs: the **Public Client API** and the **Management API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings. + +View our [API Documentation](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh) in more than 30 frameworks and languages. Or directly try out our APIs in Postman by clicking the button below: + +
+ + Run in Postman + +
+ +## Public Client API + +The [Public Client API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#5c981d9e-5e7d-455d-9795-b9c45bc2f930) is designed for our SDKs and **does not require authentication**. This API is ideal for client-side interactions, as it doesn't expose sensitive information. + +We currently have the following Client API methods exposed and below is their documentation attached in Postman: + +- [Actions API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#b8f3a10e-1642-4d82-a629-fef0a8c6c86c) - Create actions for a Person +- [Displays API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#949272bf-daec-4d72-9b52-47af3d74a62c) - Mark Survey as Displayed or Update an existing Display by linking it with a Response for a Person +- [People API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#ee3d2188-4253-4bca-9238-6b76455805a9) - Create & Update a Person (e.g. attributes, email, userId, etc) +- [Responses API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#8c773032-536c-483c-a237-c7697347946e) - Create & Update a Response for a Survey + +## Management API + +The [Management API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#98fce5a1-1365-4125-8de1-acdb28206766) provides access to all data and settings that your account has access to in the Formbricks app. This API **requires a personal API Key** for authentication, which can be generated in the Settings section of the Formbricks app. Checkout the [API Key Setup](#how-to-generate-an-api-key) below to generate & manage API Keys. + +We currently have the following Management API methods exposed and below is their documentation attached in Postman: + +- [Action Class API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#81947f69-99fc-41c9-a184-f3260e02be48) - Create, List, and Delete Action Classes +- [Attribute Class API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#31089010-d468-4a7c-943e-8ebe71b9a36e) - Create, List, and Delete Attribute Classes +- [Me API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#79e08365-641d-4b2d-aea2-9a855e0438ec) - Retrieve Account Information +- [People API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#cffc27a6-dafb-428f-8ea7-5165bedb911e) - List and Delete People +- [Response API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#e544ec0d-8b30-4e33-8d35-2441cb40d676) - List, List by Survey, Update, and Delete Responses +- [Survey API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#953189b2-37b5-4429-a7bd-f4d01ceae242) - List, Create, Update, and Delete Surveys +- [Webhook API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#62e6ec65-021b-42a4-ac93-d1434b393c6c) - List, Create, and Delete Webhooks + +## How to Generate an API key + +The API requests are authorized with a personal API key. This API key gives you the same rights as if you were logged in at formbricks.com - **don't share it around!** + +1. Go to your settings on [app.formbricks.com](https://app.formbricks.com). +2. Go to page “API keys” + +3. Create a key for the development or production environment. +4. Copy the key immediately. You won’t be able to see it again. + + + + ### Store API key safely! + Anyone who has your API key has full control over your account. For security reasons, you cannot view the API key again. + + +### Test your API Key + +Hit the below request to verify that you are authenticated with your API Key and the server is responding. + +## Get My Profile {{ tag: 'GET', label: '/api/v1/me' }} + + + + + Get the product details and environment type of your account. + + ### Mandatory Headers + + + + Your Formbricks API key. + + + + ### Delete a personal API key + + 1. Go to settings on [app.formbricks.com](https://app.formbricks.com/). + 2. Go to page “API keys”. + 3. Find the key you wish to revoke and select “Delete”. + 4. Your API key will stop working immediately. + + + + + + + + ```bash {{ title: 'cURL' }} + curl --location \ + 'https://app.formbricks.com/api/v1/me' \ + --header \ + 'x-api-key: ' + ``` + + + + + + ```json {{title:'200 Success'}} + { + "id": "cll2m30r70004mx0huqkitgqv", + "createdAt": "2023-08-08T18:04:59.922Z", + "updatedAt": "2023-08-08T18:04:59.922Z", + "type": "production", + "product": { + "id": "cll2m30r60003mx0hnemjfckr", + "name": "My Product" + }, + "widgetSetupCompleted": false + } + ``` + ```json {{ title: '401 Not Authenticated' }} + Not authenticated + ``` + + + + + +Can’t figure it out? Join our [Discord](https://discord.com/invite/3YFcABF2Ts) and we'd be glad to assist you! + +--- diff --git a/apps/formbricks-com/app/docs/additional-features/metadata/filters.webp b/apps/formbricks-com/app/docs/additional-features/metadata/filters.webp new file mode 100644 index 0000000000..8c9d2b6f6b Binary files /dev/null and b/apps/formbricks-com/app/docs/additional-features/metadata/filters.webp differ diff --git a/apps/formbricks-com/app/docs/additional-features/metadata/metadata-card.webp b/apps/formbricks-com/app/docs/additional-features/metadata/metadata-card.webp new file mode 100644 index 0000000000..16c802f7b2 Binary files /dev/null and b/apps/formbricks-com/app/docs/additional-features/metadata/metadata-card.webp differ diff --git a/apps/formbricks-com/app/docs/additional-features/metadata/page.mdx b/apps/formbricks-com/app/docs/additional-features/metadata/page.mdx new file mode 100644 index 0000000000..31dfd3ebba --- /dev/null +++ b/apps/formbricks-com/app/docs/additional-features/metadata/page.mdx @@ -0,0 +1,67 @@ +import { TellaVideo } from "@/components/docs/TellaVideo"; +import { MdxImage } from "@/components/shared/MdxImage"; + +import Filters from "./filters.webp"; +import MetadataCard from "./metadata-card.webp"; + +export const metadata = { + title: "User Metadata | Formbricks", + description: + "Understand the metadata of your users when they fill a Formbricks survey (both in-app & link). We currently capture the user's source information, URL, browser, and device details, along with the country & the action that triggered.", +}; + +#### Additional Features + +# User Metadata + +Formbricks captures metadata of your users for you when they fill a survey. + +This metadata is useful for understanding the context in which the user filled the survey. For example, if you are running a marketing campaign, you can understand which source is driving the most responses. Or if you are running a survey on a specific page, you can understand the user's behavior on that page. + + + +## Metadata Captured + +- **Source**: The source from where the user filled the survey. This could be an App, Link, or a Webpage. +- **URL**: The URL of the page where the user filled the survey. +- **Browser**: The browser used by the user to fill the survey. +- **OS**: The operating system of the device used by the user to fill the survey. +- **Device**: The device used by the user to fill the survey. +- **Country**: The country of the user. +- **Action**: The action that triggered the survey. This is only available for App surveys. + +## View Response Metadata + +1. Go to the Responses tab of your survey. +2. Hover over the profile icon of the user on the response card & you should see a tooltip opening up with the metadata details. + + + +## Filter Responses by Metadata + +1. Go to the Responses tab of your survey. +2. Click on the Filter button. +3. Scroll down & Select the metadata field you want to filter by. +4. Select the condition & the value you want to filter by. + + + +5. Now you should see the responses filtered based on the metadata you selected. If you want to see a walkthrough, view the video above to see how you can view & filter responses by metadata. + +## Export Metadata + +You can export the metadata of your responses along with the response data. When you export responses, you will see the metadata fields in the exported CSV file. + +--- + +Can’t figure it out? Join our [Discord](https://discord.com/invite/3YFcABF2Ts)! diff --git a/apps/formbricks-com/app/docs/api/client/actions/page.mdx b/apps/formbricks-com/app/docs/api/client/actions/page.mdx deleted file mode 100644 index 1172f67c33..0000000000 --- a/apps/formbricks-com/app/docs/api/client/actions/page.mdx +++ /dev/null @@ -1,85 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; - -export const metadata = { - title: "Formbricks Actions API Documentation - Manage Your Survey Data Seamlessly", - description: - "Unlock the full potential of Formbricks' Client Actions API. Create Actions right from the API.", -}; - -#### Client API - -# Actions API - -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. - -This API can be used to: - -- [Add Action for User](#add-action-for-user) - ---- - -## Add Action for User {{ tag: 'POST', label: '/api/v1/client//actions' }} - -Adds an Actions for a given User by their User ID - - - - - ### Mandatory Body Fields - - - - The id of the user for whom the action is being created. - - - The name of the Action being created. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location --request POST 'https://app.formbricks.com/api/v1/client//actions' \ - --data-raw '{ - "userId": "1", - "name": "new_action_v2" - - }' - ``` - - ```json {{ title: 'Example Request Body' }} - { - "userId": "1", - "name": "new_action_v3" - } - ``` - - - - - - ```json {{ title: '200 Success' }} - { - "data": {} - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "Fields are missing or incorrectly formatted", - "details": { - "name": "Required" - } - } - ``` - - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/client/displays/page.mdx b/apps/formbricks-com/app/docs/api/client/displays/page.mdx deleted file mode 100644 index fd14e1084f..0000000000 --- a/apps/formbricks-com/app/docs/api/client/displays/page.mdx +++ /dev/null @@ -1,145 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; - -export const metadata = { - title: "Formbricks Public Client API Guide: Manage Survey Displays & Responses", - description: - "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on how to mark create and update survey displays for users.", -}; - -#### Client API - -# Displays API - -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. - -This set of API can be used to -- [Create Display](#create-display) -- [Update Display](#update-display) - ---- - -## Create Display {{ tag: 'POST', label: '/api/v1/client//diplays' }} - - - - - Create Display of survey for a user - - ### Mandatory Request Body JSON Keys - - - Survey ID to mark as viewed for a person - - - - ### Optional Request Body JSON Keys - - - Already existing user's ID to mark as viewed for a survey - - - Already existing response's ID to link with this new Display - - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST \ - 'https://app.formbricks.com/api/v1/client/displays' \ - -H 'Content-Type: application/json' \ - -d '{ - "surveyId":"", - "userId":"" - }' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "clphzz6oo00083zdmc7e0nwzi" - } - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "Fields are missing or incorrectly formatted", - "details": { - "surveyId": "Required" - } - } - ``` - - - - - ---- - -## Update Display {{ tag: 'PUT', label: '/api/v1/client//diplays/' }} - - - - - Update a display by it's ID - - ### Optional Request Body JSON Keys - - - Already existing user's ID to mark as viewed for a survey - - - Already existing response's ID to link with this new Display - - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST \ - 'https://app.formbricks.com/api/v1/client//displays/' \ - -H 'Content-Type: application/json' \ - -d '{ - "userId":"" - }' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": {} - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "Fields are missing or incorrectly formatted", - "details": { - "surveyId": "Required" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/client/overview/page.mdx b/apps/formbricks-com/app/docs/api/client/overview/page.mdx deleted file mode 100644 index 8399456133..0000000000 --- a/apps/formbricks-com/app/docs/api/client/overview/page.mdx +++ /dev/null @@ -1,47 +0,0 @@ -export const metadata = { - title: "Formbricks API Overview: Public Client & Management API Breakdown", - description: - "Get a detailed understanding of Formbricks' dual API offerings: the unauthenticated Public Client API optimized for client-side tasks and the secured Management API for advanced account operations. Choose the perfect fit for your integration needs and ensure robust data handling", -}; - -#### API - -# API Overview - -Formbricks offers two types of APIs: the **Public Client API** and the **Management API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings. - -Checkout the [API Key Setup](/docs/api/management/api-key-setup) - to generate, store, or delete API Keys. - -## Public Client API - -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. - -- [Actions API](/docs/api/client/actions) - Create actions for a person -- [Displays API](/docs/api/client/displays) - Mark Survey as Displayed or Responded for a Person -- [People API](/docs/api/client/people) - Create & update people (e.g. attributes) -- [Responses API](/docs/api/client/responses) - Create & update responses for a survey - -## Management API - -The Management API provides access to all data and settings that are visible in the Formbricks App. This API requires a personal API Key for authentication, which can be generated in the Settings section of the Formbricks App. With the Management API, you can manage your Formbricks account programmatically, accessing and modifying data and settings as needed. - -**Auth:** Personal API Key - -API requests made to the Management API are authorized using a personal API key. This key grants the same rights and access as if you were logged in at formbricks.com. It's essential to keep your API key secure and not share it with others. - -To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/management/api-key-setup). - -- [Action Class API](/docs/api/management/action-classes) - Create, Update, and Delete Action Classes -- [Attribute Class API](/docs/api/management/attribute-classes) - Create, Update, and Delete Attribute Classes -- [Me API](/docs/api/management/me) - Retrieve Account Information -- [People API](/docs/api/management/people) - Create, Update, and Delete People -- [Responses API](/docs/api/management/responses) - Create, Update, and Delete Responses -- [Surveys API](/docs/api/management/surveys) - Create, Update, and Delete Surveys -- [Webhook API](/docs/api/management/webhooks) - Create, Update, and Delete Webhooks - - - 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. - - ---- diff --git a/apps/formbricks-com/app/docs/api/client/people/page.mdx b/apps/formbricks-com/app/docs/api/client/people/page.mdx deleted file mode 100644 index d4b85735b5..0000000000 --- a/apps/formbricks-com/app/docs/api/client/people/page.mdx +++ /dev/null @@ -1,130 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; - -export const metadata = { - title: "Formbricks Public Client API Guide: Manage Users", - description: - "Dive deep into Formbricks' Public Client API designed for customisation. This comprehensive guide provides detailed instructions on creating and updating users to help in user identification.", -}; - -#### Client API - -# People API - -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. - -This set of API can be used to -- [Create Person](#create-person) -- [Update Person](#update-person) - ---- - -## Create Person {{ tag: 'POST', label: '/api/v1/client//people' }} - - - - - Create User with your own User ID - - ### Mandatory Request Body JSON Keys - - - User ID which you would like to identify the person with - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST \ - 'https://app.formbricks.com/api/v1/client//people' \ - -H 'Content-Type: application/json' \ - -d '{ - "userId":"docs_user" - }' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "userId": "docs_user" - } - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "Fields are missing or incorrectly formatted", - "details": { - "surveyId": "Required" - } - } - ``` - - - - - ---- - -## Update Person {{ tag: 'POST', label: '/api/v1/client//people/' }} - - - - - Update Person by their User ID - - ### Mandatory Request Body JSON Keys - - - Key Value pairs of attributes to add to the user - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST \ - --location \ - 'https://app.formbricks.com/api/v1/client//people/' - -H 'Content-Type: application/json' \ - -d '{ - "attributes":{ - "welcome_to":"formbricks" - } - }' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": {} - } - ``` - - ```json {{ title: '500 Internal Server Error' }} - { - "code": "internal_server_error", - "message": "Database operation failed", - "details": {} - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/client/responses/page.mdx b/apps/formbricks-com/app/docs/api/client/responses/page.mdx deleted file mode 100644 index b2099d95fb..0000000000 --- a/apps/formbricks-com/app/docs/api/client/responses/page.mdx +++ /dev/null @@ -1,200 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; - -export const metadata = { - title: "Formbricks Responses API Documentation - Manage Your Survey Data Seamlessly", - description: - "Unlock the full potential of Formbricks' Responses API. From fetching to updating survey responses, our comprehensive guide helps you integrate and manage survey data efficiently without compromising security. Ideal for client-side interactions.", -}; - -#### Client API - -# Responses API - -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. - -This set of API can be used to -- [Create Response](#create-response) -- [Update Response](#update-response) - ---- - -## Create Response {{ tag: 'POST', label: '/api/v1/client//responses' }} - -Add a new response to a survey. - - - - - ### Mandatory Body Fields - - - - The id of the survey the response belongs to. - - - Marks whether the response is complete or not. - - - The data of the response as JSON object (key: questionId, value: answer). - - - - - ### Optional Body Fields - - - - Pre-existing User ID to identify the user sending the response - - - -### 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. | -| userId | 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. | - - - - - - - ```bash {{ title: 'cURL' }} - curl --location --request POST 'https://app.formbricks.com/api/v1/client//responses' \ - --data-raw '{ - "surveyId":"cloqzeuu70000z8khcirufo60", - "userId": "1", - "finished": true, - "data": { - "clfqjny0v0003yzgscnog1j9i": 10, - "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks" - } - }' - ``` - - ```json {{ title: 'Example Request Body' }} - { - "userId": "1", - "surveyId": "cloqzeuu70000z8khcirufo60", - "finished": true, - "data": { - "clfqjny0v0003yzgscnog1j9i": 10, - "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks" - } - } - ``` - - - - - - ```json {{ title: '200 Success' }} - { - "data": { - "id": "clp84xdld0002px36fkgue5ka", - } - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "surveyId was not provided.", - "details": { - "surveyId": "This field is required." - } - } - ``` - - - - - - ---- - -## Update Response {{ tag: 'PUT', label: '/api/v1/client//responses/' }} - -Update an existing response in a survey. - - - - - ### Mandatory Body Fields - - - - Marks whether the response is complete or not. - - - The data of the response as JSON object (key: questionId, value: answer). - - - -### 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. | - - - - - - - ```bash {{ title: 'cURL' }} - curl --location --request PUT 'https://app.formbricks.com/api/v1/client//responses/' \ - --data-raw '{ - "finished":false, - "data": { - "clfqjny0v0003yzgscnog1j9i": 10, - "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks" - } - }' - ``` - - ```json {{ title: 'Example Request Body' }} - { - "finished":false, - "data": { - "clfqjny0v0003yzgscnog1j9i": 10, - "clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks" - } - } - ``` - - - - - - ```json {{ title: '200 Success' }} - { - "data": {} - } - ``` - - ```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" - } - ``` - - - - - diff --git a/apps/formbricks-com/app/docs/api/management/action-classes/page.mdx b/apps/formbricks-com/app/docs/api/management/action-classes/page.mdx deleted file mode 100644 index d7be643d30..0000000000 --- a/apps/formbricks-com/app/docs/api/management/action-classes/page.mdx +++ /dev/null @@ -1,297 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; -import {generateManagementApiMetadata} from "@/lib/utils" -export const metadata = generateManagementApiMetadata("Action Class",["Fetch","Create","Delete"]) - -#### Management API - -# Action Classes API - -This set of API can be used to -- [List Actions](#get-all-action-classes) -- [Get Action](#get-action-class-by-id) -- [Create Actions](#create-action-class) -- [Delete Actions](#delete-action-class) - -You will need an API Key to interact with these APIs. - ---- - -## Get all Action Classes {{ tag: 'GET', label: '/api/v1/management/action-classes' }} - - - - - Get all the existing action classes in your environment. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/action-classes' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": [ - { - "id": "cln8k0t47000gz87nw4ibwv35", - "createdAt": "2023-10-02T07:13:19.207Z", - "updatedAt": "2023-10-02T07:13:19.207Z", - "name": "New Session", - "description": "Gets fired when a new session is created", - "type": "automatic", - "noCodeConfig": null, - "environmentId": "cln8k0t47000fz87njmmu2bck" - }, - { - "id": "cln8k0t55000uz87noerwdooj", - "createdAt": "2023-10-02T07:13:19.241Z", - "updatedAt": "2023-10-02T07:13:19.241Z", - "name": "Invited Team Member", - "description": "Person invited a team member", - "type": "noCode", - "noCodeConfig": { - "type": "innerHtml", - "innerHtml": { - "value": "Add Team Member" - } - }, - "environmentId": "cln8k0t47000fz87njmmu2bck" - }, - ] - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Get Action Class by ID {{ tag: 'GET', label: '/api/v1/management/action-classes/' }} - - - - - Fetch an action class by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/action-classes/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln8k0t55000uz87noerwdooj", - "createdAt": "2023-10-02T07:13:19.241Z", - "updatedAt": "2023-10-02T07:13:19.241Z", - "name": "Invited Team Member", - "description": "Person invited a team member", - "type": "noCode", - "noCodeConfig": { - "type": "innerHtml", - "innerHtml": { - "value": "Add Team Member" - } - }, - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Create Action Class {{ tag: 'POST', label: '/api/v1/management/action-classes/' }} - - - - - Create an action class. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Body - - - ```json {{ title: 'cURL' }} - { - "environmentId": "cln8k0t47000fz87njmmu2bck", - "name": "My Action from API", - "type": "code" - } - ``` - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST https://app.formbricks.com/api/v1/management/action-classes/ \ - --header 'Content-Type: application/json' \ - --header 'x-api-key: ' \ - -d '{"environmentId": "cln8k0t47000fz87njmmu2bck", "name": "My Action from API", "type": "code"}' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln9w1cno0008z8zu79nk5w0c", - "createdAt": "2023-10-03T05:37:26.100Z", - "updatedAt": "2023-10-03T05:37:26.100Z", - "name": "My Action from API", - "description": null, - "type": "code", - "noCodeConfig": null, - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Delete Action Class {{ tag: 'DELETE', label: '/api/v1/management/action-classes/' }} - - - - - Delete an action class by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X DELETE https://app.formbricks.com/api/v1/management/action-classes/ \ - --header 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln9w1cno0008z8zu79nk5w0c", - "createdAt": "2023-10-03T05:37:26.100Z", - "updatedAt": "2023-10-03T05:37:26.100Z", - "name": "My Action from API", - "description": null, - "type": "code", - "noCodeConfig": null, - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/api-key-setup/page.mdx b/apps/formbricks-com/app/docs/api/management/api-key-setup/page.mdx deleted file mode 100644 index 8e9bb1ab8e..0000000000 --- a/apps/formbricks-com/app/docs/api/management/api-key-setup/page.mdx +++ /dev/null @@ -1,102 +0,0 @@ -import { MdxImage } from "@/components/shared/MdxImage"; - -import AddApiKey from "./add-api-key.webp"; -import ApiKeySecret from "./api-key-secret.webp"; - -export const metadata = { - title: "Formbricks API Key: Setup and Testing", - description: - "This guide provides step-by-step instructions to generate, store, and delete API keys, ensuring safe and authenticated access to your Formbricks account.", -}; - -#### API - -# API Key Setup - -## Auth: Personal API key - -The API requests are authorized with a personal API key. This API key gives you the same rights as if you were logged in at formbricks.com - **don't share it around!** - -### How to generate an API key - -1. Go to your settings on [app.formbricks.com](https://app.formbricks.com). -2. Go to page “API keys” - -3. Create a key for the development or production environment. -4. Copy the key immediately. You won’t be able to see it again. - - - - ### Store API key safely Anyone who has your API key has full control over your account. For security - reasons, you cannot view the API key again. - - -### Test your API Key - -Hit the below request to verify that you are authenticated with your API Key and the server is responding. - -## Get My Profile {{ tag: 'GET', label: '/api/v1/me' }} - - - - - Get the product details and environment type of your account. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/me' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "id": "cll2m30r70004mx0huqkitgqv", - "createdAt": "2023-08-08T18:04:59.922Z", - "updatedAt": "2023-08-08T18:04:59.922Z", - "type": "production", - "product": { - "id": "cll2m30r60003mx0hnemjfckr", - "name": "My Product" - }, - "widgetSetupCompleted": false - } - ``` - ```json {{ title: '401 Not Authenticated' }} - Not authenticated - ``` - - - - - ---- - -### Delete a personal API key - -1. Go to settings on [app.formbricks.com](https://app.formbricks.com/). -2. Go to page “API keys”. -3. Find the key you wish to revoke and select “Delete”. -4. Your API key will stop working immediately. diff --git a/apps/formbricks-com/app/docs/api/management/attribute-classes/page.mdx b/apps/formbricks-com/app/docs/api/management/attribute-classes/page.mdx deleted file mode 100644 index 009376f10a..0000000000 --- a/apps/formbricks-com/app/docs/api/management/attribute-classes/page.mdx +++ /dev/null @@ -1,289 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; -import {generateManagementApiMetadata} from "@/lib/utils" - -export const metadata = generateManagementApiMetadata("Attribute Class",["Fetch","Create","Delete"]) - -#### Management API - -# Attribute Classes API - -This set of API can be used to -- [List Attributes](#get-all-attribute-classes) -- [Get Attributes](#get-attribute-class-by-id) -- [Create Attributes](#create-attribute-class) -- [Delete Attributes](#delete-attribute-class) - -You will need an API Key to interact with these APIs. - ---- - -## Get all Attribute Classes {{ tag: 'GET', label: '/api/v1/management/attribute-classes' }} - - - - - Get all the existing attribute classes in your environment. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/attribute-classes' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": [ - { - "id": "cln8k0t47000kz87n3lh23zf0", - "createdAt": "2023-10-02T07:13:19.207Z", - "updatedAt": "2023-10-02T07:13:19.207Z", - "name": "email", - "description": "The email of the person", - "archived": false, - "type": "automatic", - "environmentId": "cln8k0t47000fz87njmmu2bck" - }, - { - "id": "cln8k0t55000xz87nrtwbo7sf", - "createdAt": "2023-10-02T07:13:19.241Z", - "updatedAt": "2023-10-02T07:13:19.241Z", - "name": "Name", - "description": "Full Name of the Person", - "archived": false, - "type": "code", - "environmentId": "cln8k0t47000fz87njmmu2bck" - }, - ] - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Get Attribute Class by ID {{ tag: 'GET', label: '/api/v1/management/attribute-classes/' }} - - - - - Fetch an Attribute class by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/attribute-classes/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln8k0t47000jz87nfwcey6mh", - "createdAt": "2023-10-02T07:13:19.207Z", - "updatedAt": "2023-10-02T07:13:19.207Z", - "name": "userId", - "description": "The internal ID of the person", - "archived": false, - "type": "automatic", - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Create Attribute Class {{ tag: 'POST', label: '/api/v1/management/attribute-classes/' }} - - - - - Create an Attribute class. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Body - - - ```json {{ title: 'cURL' }} - { - "environmentId": "clmlmwdqq0003196ufewo6ibg", - "name": "My Attribute from API", - "type": "code", - "description": "My description" - } - ``` - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST https://app.formbricks.com/api/v1/management/attribute-classes/ \ - --header 'Content-Type: application/json' \ - --header 'x-api-key: ' \ - -d '{"environmentId": "clmlmwdqq0003196ufewo6ibg", "name": "My Attribute from API", "type": "code", "description":"My description"}' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "clna0hd7z0009z8zue2z3a7wy", - "createdAt": "2023-10-03T07:41:51.792Z", - "updatedAt": "2023-10-03T07:41:51.792Z", - "name": "My Attribute from API", - "description": null, - "archived": false, - "type": "code", - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Delete Attribute Class {{ tag: 'DELETE', label: '/api/v1/management/attribute-classes/' }} - - - - - Delete an Attribute class by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X DELETE https://app.formbricks.com/api/v1/management/attribute-classes/ \ - --header 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "clna0hd7z0009z8zue2z3a7wy", - "createdAt": "2023-10-03T07:41:51.792Z", - "updatedAt": "2023-10-03T07:41:51.792Z", - "name": "My Attribute from API", - "description": null, - "archived": false, - "type": "code", - "environmentId": "cln8k0t47000fz87njmmu2bck" - } - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/me/page.mdx b/apps/formbricks-com/app/docs/api/management/me/page.mdx deleted file mode 100644 index c5ba911036..0000000000 --- a/apps/formbricks-com/app/docs/api/management/me/page.mdx +++ /dev/null @@ -1,78 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; - -export const metadata = { - title: "Formbricks Me API: Fetch your environment details", - description: - "Dive into Formbricks' Me API within the Public Client API suite. Seamlessly fetch your own current environment details.", -}; - -#### Management API - -# Me API - -This API can be used to get your own current environment details. - -You will need an API Key to interact with these APIs. - ---- - -## Get Environment {{ tag: 'GET', label: '/api/v1/management/me' }} - - - - - Get your current environment details. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/me' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "id": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.207Z", - "updatedAt": "2023-10-02T07:14:14.162Z", - "type": "production", - "product": { - "id": "cln8k0t47000ez87n57aqywvz", - "name": "Demo Product" - }, - "widgetSetupCompleted": true - } - ``` - - ```json {{ title: '401 Unauthorized' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/people/page.mdx b/apps/formbricks-com/app/docs/api/management/people/page.mdx deleted file mode 100644 index 14856ba9fa..0000000000 --- a/apps/formbricks-com/app/docs/api/management/people/page.mdx +++ /dev/null @@ -1,232 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; -import {generateManagementApiMetadata} from "@/lib/utils" - -export const metadata = generateManagementApiMetadata("People",["Fetch","Delete"]) - - -#### Management API - -# People API - -This set of API can be used to -- [List People](#list-people) -- [Get Person](#get-person) -- [Delete Person](#delete-person) - -You will need an API Key to interact with these APIs. - ---- - -## List People {{ tag: 'GET', label: '/api/v1/management/people' }} - - - - - List People - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/people' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": [ - { - "id": "b4wgrzl363dn3zb6yy5gf265", - "attributes": { - "userId": "CYO618", - "email": "sophia@amazon.com", - "Name": "Sophia Johnson", - "Role": "Designer", - "Company": "Amazon", - "Experience": "7 years", - "Usage Frequency": "Yearly", - "Company Size": "1628 employees", - "Product Satisfaction Score": "62", - "Recommendation Likelihood": "9" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - { - "id": "jrb5iyzqvnkg9322ckhde3j4", - "attributes": { - "userId": "CYO511", - "email": "antonio@ibm.com", - "Name": "Antonio García", - "Role": "Designer", - "Company": "IBM", - "Experience": "1 years", - "Usage Frequency": "Weekly", - "Company Size": "4023 employees", - "Product Satisfaction Score": "77", - "Recommendation Likelihood": "4" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - ] - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "Fields are missing or incorrectly formatted", - "details": { - "userId": "" - } - } - ``` - - - - - ---- - -## Get Person {{ tag: 'GET', label: '/api/v1/management/people/' }} - - - - - Get Person by ID - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/people/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "jrb5iyzqvnkg9322ckhde3j4", - "attributes": { - "userId": "CYO511", - "email": "antonio@ibm.com", - "Name": "Antonio García", - "Role": "Designer", - "Company": "IBM", - "Experience": "1 years", - "Usage Frequency": "Weekly", - "Company Size": "4023 employees", - "Product Satisfaction Score": "77", - "Recommendation Likelihood": "4" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - } - } - ``` - - ```json {{ title: '404 Not Found' }} - { - "code": "not_found", - "message": "Person not found", - "details": { - "resource_id": "clmlmykc2000019vz5o3jglsa", - "resource_type": "Person" - } - } - ``` - - - - - ---- - -## Delete Person {{ tag: 'DELETE', label: '/api/v1/management/people/' }} - - - - - Delete Person by ID - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X DELETE https://app.formbricks.com/api/v1/management/people/ \ - --header 'x-api-key: ' - ``` - - - - - ```json {{title:'200 Success'}} - { - "data": { - "success": "Person deleted successfully" - } - } - ``` - - ```json {{ title: '404 Not Found' }} - { - "code": "not_found", - "message": "Person not found", - "details": { - "resource_id": "clmlmykc2000019vz5o3jglsa", - "resource_type": "Person" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/responses/page.mdx b/apps/formbricks-com/app/docs/api/management/responses/page.mdx deleted file mode 100644 index 0fcbdb5d0e..0000000000 --- a/apps/formbricks-com/app/docs/api/management/responses/page.mdx +++ /dev/null @@ -1,379 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; -import { generateManagementApiMetadata } from "@/lib/utils"; - -export const metadata = generateManagementApiMetadata("Responses", ["Fetch", "Delete"]); - -#### Management API - -# Responses API - -This set of API can be used to - -- [List Responses](#list-all-responses) -- [List all Responses by surveyId](#list-all-responses-by-survey-id) -- [Get Response](#get-response-by-id) -- [Delete Response](#delete-a-response) - -You will need an API Key to interact with these APIs. - ---- - -## List all Responses {{ tag: 'GET', label: '/api/v1/management/responses' }} - - - - - Retrieve all the responses you have received in your environment. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/responses' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data":[ - { - "id": "cln8k0tqv00pcz87no4qrw333", - "createdAt": "2023-10-02T07:13:20.023Z", - "updatedAt": "2023-10-02T07:13:20.023Z", - "surveyId": "cln8k0tqu00p7z87nqr4thi3k", - "finished": true, - "data": { - "interview-prompt": "clicked" - }, - "meta": { - "userAgent": { - "os": "MacOS", - "browser": "Chrome" - } - }, - "personAttributes": null, - "person": { - "id": "e0x4i5tvsp8puxfztyrwykvn", - "attributes": { - "userId": "CYO675", - "email": "ravi@netflix.com", - "Name": "Ravi Kumar", - "Role": "Manager", - "Company": "Netflix", - "Experience": "6 years", - "Usage Frequency": "Monthly", - "Company Size": "4610 employees", - "Product Satisfaction Score": "43", - "Recommendation Likelihood": "4" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - "notes": [], - "tags": [] - }, - ] - } - ``` - - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## List all Responses by surveyId {{ tag: 'GET', label: '/api/v1/management/responses?surveyId=' }} - - - - - Retrieve all the responses received in your survey. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/responses?surveyId=' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data":[ - { - "id": "cln8k0tqv00pcz87no4qrw333", - "createdAt": "2023-10-02T07:13:20.023Z", - "updatedAt": "2023-10-02T07:13:20.023Z", - "surveyId": "cln8k0tqu00p7z87nqr4thi3k", - "finished": true, - "data": { - "interview-prompt": "clicked" - }, - "meta": { - "userAgent": { - "os": "MacOS", - "browser": "Chrome" - } - }, - "personAttributes": null, - "person": { - "id": "e0x4i5tvsp8puxfztyrwykvn", - "attributes": { - "userId": "CYO675", - "email": "ravi@netflix.com", - "Name": "Ravi Kumar", - "Role": "Manager", - "Company": "Netflix", - "Experience": "6 years", - "Usage Frequency": "Monthly", - "Company Size": "4610 employees", - "Product Satisfaction Score": "43", - "Recommendation Likelihood": "4" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - "notes": [], - "tags": [] - }, - ] - } - ``` - - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Get Response by ID {{ tag: 'GET', label: '/api/v1/management/responses/' }} - - - - - Retrieve a response by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/responses/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": - { - "id": "cln8k0tqv00pbz87nwo5lr72b", - "createdAt": "2023-10-02T07:13:20.023Z", - "updatedAt": "2023-10-02T07:13:20.023Z", - "surveyId": "cln8k0tqu00p7z87nqr4thi3k", - "finished": true, - "data": { - "interview-prompt": "clicked" - }, - "meta": { - "userAgent": { - "os": "Windows", - "browser": "Edge" - } - }, - "personAttributes": null, - "person": { - "id": "hsx38f15v50ua8383uadagq5", - "attributes": { - "userId": "CYO278", - "email": "jorge@facebook.com", - "Name": "Jorge Sanchez", - "Role": "Product Manager", - "Company": "Facebook", - "Experience": "10 years", - "Usage Frequency": "Daily", - "Company Size": "1685 employees", - "Product Satisfaction Score": "84", - "Recommendation Likelihood": "6" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - "notes": [], - "tags": [] - } - } - ``` - - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Delete a response {{ tag: 'DELETE', label: '/api/v1/client/responses/' }} - - - - - Delete Response by ID - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X DELETE https://app.formbricks.com/api/v1/management/responses/ \ - --header 'x-api-key: ' - ``` - - - - - - ```json {{ title: '200 Success' }} - { - "data": { - "id": "cln8k0tqv00pbz87nwo5lr72b", - "createdAt": "2023-10-02T07:13:20.023Z", - "updatedAt": "2023-10-02T07:13:20.023Z", - "surveyId": "cln8k0tqu00p7z87nqr4thi3k", - "finished": true, - "data": { - "interview-prompt": "clicked" - }, - "meta": { - "userAgent": { - "os": "Windows", - "browser": "Edge" - } - }, - "personAttributes": null, - "person": { - "id": "hsx38f15v50ua8383uadagq5", - "attributes": { - "userId": "CYO278", - "email": "jorge@facebook.com", - "Name": "Jorge Sanchez", - "Role": "Product Manager", - "Company": "Facebook", - "Experience": "10 years", - "Usage Frequency": "Daily", - "Company Size": "1685 employees", - "Product Satisfaction Score": "84", - "Recommendation Likelihood": "6" - }, - "environmentId": "cln8k0t47000fz87njmmu2bck", - "createdAt": "2023-10-02T07:13:19.444Z", - "updatedAt": "2023-10-02T07:13:19.444Z" - }, - "notes": [], - "tags": [] - } - } - ``` - - ```json {{ title: '400 Bad Request' }} - { - "code": "bad_request", - "message": "surveyId was not provided.", - "details": { - "surveyId": "This field is required." - } - } - ``` - - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/surveys/page.mdx b/apps/formbricks-com/app/docs/api/management/surveys/page.mdx deleted file mode 100644 index d15dcb1ef5..0000000000 --- a/apps/formbricks-com/app/docs/api/management/surveys/page.mdx +++ /dev/null @@ -1,789 +0,0 @@ -import { Fence } from "@/components/shared/Fence"; -import { generateManagementApiMetadata } from "@/lib/utils"; - -export const metadata = generateManagementApiMetadata("Surveys", ["Fetch", "Create", "Update", "Delete"]); - -#### Management API - -# Surveys API - -This set of API can be used to - -- [List All Surveys](#list-all-surveys) -- [Get Survey](#get-survey-by-id) -- [Create Survey](#create-survey) -- [Update Survey](#update-survey-by-id) -- [Delete Survey](#delete-survey-by-id) - -You will need an API Key to interact with these APIs. - ---- - -## List all surveys {{ tag: 'GET', label: '/api/v1/management/surveys' }} - - - - Retrieve all the surveys you have for the environment with pagination. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Query Parameters - - - The number of surveys to skip before returning the results. - - - - The number of surveys to return. - - - - - - - - - ```bash {{ title: 'cURL' }} - - curl --location \ - 'https://app.formbricks.com/api/v1/management/surveys?offset=20&limit=10' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": [ - { - "id": "cllnfy2780fromy0hy7uoxvtn", - "createdAt": "2023-08-23T07:56:20.516Z", - "updatedAt": "2023-08-23T07:56:26.947Z", - "name": "Product Market Fit (Superhuman)", - "type": "link", - "environmentId": "cll2m30r70004mx0huqkitgqv", - "status": "inProgress", - "attributeFilters": [], - "displayOption": "displayOnce", - "autoClose": null, - "triggers": [], - "redirectUrl": null, - "recontactDays": null, - "questions": [ - { - "id": "gml6mgy71efgtq8np3s9je5p", - "type": "cta", - "headline": "You are one of our power users! Do you have 5 minutes?", - "required": false, - "buttonLabel": "Happy to help!", - "logic": [ - { - "condition": "skipped", - "destination": "end" - } - ], - "html": "

We would love to understand your user experience better. Sharing your insight helps a lot.

", - "buttonExternal": false, - "dismissButtonLabel": "No, thanks." - }, - { - "id": "kp62fbqe8cfzmvy8qwpr81b2", - "type": "multipleChoiceSingle", - "headline": "How disappointed would you be if you could no longer use My Product?", - "subheader": "Please select one of the following options:", - "required": true, - "choices": [ - { - "id": "bdgy1hnwd7uwmfxk1ljqp1n5", - "label": "Not at all disappointed" - }, - { - "id": "poabnvgtwenp8rb2v70gj4hj", - "label": "Somewhat disappointed" - }, - { - "id": "opfiqyqz8wrqn0i0f7t24d3n", - "label": "Very disappointed" - } - ], - "shuffleOption": "none" - }, - { - "id": "klvpwd4x08x8quesihvw5l92", - "type": "multipleChoiceSingle", - "headline": "What is your role?", - "subheader": "Please select one of the following options:", - "required": true, - "choices": [ - { - "id": "c8nerw6l9gpsxcmqkn10f9hy", - "label": "Founder" - }, - { - "id": "ebjqezei6a2axtuq86cleetn", - "label": "Executive" - }, - { - "id": "ctiijjblyhlp22snypfamqt1", - "label": "Product Manager" - }, - { - "id": "ibalyr0mhemfkkr82vypmg40", - "label": "Product Owner" - }, - { - "id": "fipk606aegslbd0e7yhc0xjx", - "label": "Software Engineer" - } - ], - "shuffleOption": "none" - }, - { - "id": "ryo75306flyg72iaeditbv51", - "type": "openText", - "headline": "What type of people do you think would most benefit from My Product?", - "required": true - }, - { - "id": "lkjaxb73ulydzeumhd51sx9g", - "type": "openText", - "headline": "What is the main benefit you receive from My Product?", - "required": true - }, - { - "id": "ec7agikkr58j8uonhioinkyk", - "type": "openText", - "headline": "How can we improve My Product for you?", - "subheader": "Please be as specific as possible.", - "required": true - } - ], - "thankYouCard": { - "enabled": true, - "headline": "Thank you!", - "subheader": "We appreciate your feedback." - }, - "delay": 0, - "autoComplete": null, - "closeOnDate": null - } - ] - } - ``` - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Get Survey by ID {{ tag: 'GET', label: '/api/v1/management/surveys/' }} - - - - - Get a specific survey by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/management/surveys/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln8k0tjz00n5z87nwq527h3z", - "createdAt": "2023-10-02T07:13:19.775Z", - "updatedAt": "2023-10-02T07:13:19.775Z", - "name": "Churn Survey", - "type": "link", - "environmentId": "cln8k0t47000fz87njmmu2bck", - "status": "inProgress", - "attributeFilters": [], - "displayOption": "displayOnce", - "autoClose": null, - "triggers": [], - "redirectUrl": null, - "recontactDays": null, - "questions": [ - { - "id": "churn-reason", - "type": "multipleChoiceSingle", - "headline": "Why did you cancel your subscription?", - "subheader": "We're sorry to see you leave. Help us do better:", - "required": true, - "logic": [ - { - "condition": "equals", - "value": "Difficult to use", - "destination": "easier-to-use" - }, - { - "condition": "equals", - "value": "It's too expensive", - "destination": "30-off" - }, - { - "condition": "equals", - "value": "I am missing features", - "destination": "missing-features" - }, - { - "condition": "equals", - "value": "Poor customer service", - "destination": "poor-service" - }, - { - "condition": "equals", - "value": "I just didn't need it anymore", - "destination": "end" - } - ], - "choices": [ - { - "id": "isud2xethsw63dlwl89kr4kj", - "label": "Difficult to use" - }, - { - "id": "opuu4ba3dlele3n0gjkuh27c", - "label": "It's too expensive" - }, - { - "id": "gnypapo0rhvkt8pwosrphvbl", - "label": "I am missing features" - }, - { - "id": "wkgsrsrazd9kfunqhzjezx6t", - "label": "Poor customer service" - }, - { - "id": "pykmgyyw74vg0gaeryj6bo4c", - "label": "I just didn't need it anymore" - } - ] - }, - { - "id": "easier-to-use", - "type": "openText", - "headline": "What would have made {{productName}} easier to use?", - "subheader": "", - "required": true, - "buttonLabel": "Send", - "logic": [ - { - "condition": "submitted", - "destination": "end" - } - ] - }, - { - "id": "30-off", - "type": "cta", - "headline": "Get 30% off for the next year!", - "required": true, - "buttonLabel": "Get 30% off", - "logic": [ - { - "condition": "clicked", - "destination": "end" - } - ], - "html": "

We'd love to keep you as a customer. Happy to offer a 30% discount for the next year.

", - "buttonUrl": "https://formbricks.com", - "buttonExternal": true, - "dismissButtonLabel": "Skip" - }, - { - "id": "missing-features", - "type": "openText", - "headline": "What features are you missing?", - "subheader": "", - "required": true, - "logic": [ - { - "condition": "submitted", - "destination": "end" - } - ] - }, - { - "id": "poor-service", - "type": "cta", - "headline": "So sorry to hear 😔 Talk to our CEO directly!", - "required": true, - "buttonLabel": "Send email to CEO", - "logic": [ - { - "condition": "clicked", - "destination": "end" - } - ], - "html": "

We aim to provide the best possible customer service. Please email our CEO and she will personally handle your issue.

", - "buttonUrl": "mailto:ceo@company.com", - "buttonExternal": true, - "dismissButtonLabel": "Skip" - } - ], - "thankYouCard": { - "enabled": false - }, - "delay": 0, - "autoComplete": null, - "closeOnDate": null, - "surveyClosedMessage": null, - "verifyEmail": null - } - } - ``` - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Create Survey {{ tag: 'POST', label: '/api/v1/management/surveys' }} - - - - - Create a survey - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Body - - - ```json {{ title: 'cURL' }} - { - "environmentId": "clmlmwdqq0003196ufewo6ibg", - "type": "link", - "name": "My new Survey" - } - ``` - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X POST \ - 'https://app.formbricks.com/api/v1/management/surveys' \ - --header \ - 'x-api-key: ' - ``` - - ```bash {{ title: 'cURL' }} - curl -X POST https://app.formbricks.com/api/v1/management/surveys/ \ - --header 'Content-Type: application/json' \ - --header 'x-api-key: ' \ - -d '{"environmentId": "cln8k0t47000fz87njmmu2bck", "name": "My Survey from API", "type": "link"}' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "clna6bqnz000az8zubq3e757t", - "createdAt": "2023-10-03T10:25:26.975Z", - "updatedAt": "2023-10-03T10:25:26.975Z", - "name": "My new Survey", - "redirectUrl": null, - "type": "link", - "environmentId": "cln8k0t47000fz87njmmu2bck", - "status": "draft", - "questions": [], - "thankYouCard": { - "enabled": false - }, - "displayOption": "displayOnce", - "recontactDays": null, - "autoClose": null, - "delay": 0, - "autoComplete": null, - "closeOnDate": null, - "surveyClosedMessage": null, - "verifyEmail": null - } - } - ``` - - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Update Survey by ID {{ tag: 'PUT', label: '/api/v1/management/surveys/' }} - - - - - Update a survey by its ID - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Body - - - ```json {{ title: 'cURL' }} - { - "name": "My renamed Survey", - "redirectUrl":"https://formbricks.com", - "type":"web" - } - ``` - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X PUT https://app.formbricks.com/api/v1/management/surveys/ \ - --header 'Content-Type: application/json' \ - --header 'x-api-key: ' \ - -d '{"name": "My renamed Survey"}' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cloqzeuu70000z8khcirufo60", - "createdAt": "2023-11-09T09:23:42.367Z", - "updatedAt": "2023-11-09T09:23:42.367Z", - "name": "My renamed Survey", - "redirectUrl": null, - "type": "link", - "environmentId": "clonzr6vc0009z8md7y06hipl", - "status": "inProgress", - "welcomeCard": { - "html": "Thanks for providing your feedback - let's go!", - "enabled": false, - "headline": "Welcome!", - "timeToFinish": false - }, - "questions": [ - { - "id": "l9rwn5nbk48y44tvnyyjcvca", - "type": "openText", - "headline": "Why did you leave the platform?", - "required": true, - "inputType": "text" - } - ], - "thankYouCard": { - "enabled": true, - "headline": "Thank you!", - "subheader": "We appreciate your feedback." - }, - "hiddenFields": { - "enabled": true, - "fieldIds": [] - }, - "displayOption": "displayOnce", - "recontactDays": null, - "autoClose": null, - "delay": 0, - "autoComplete": 50, - "closeOnDate": null, - "surveyClosedMessage": null, - "productOverwrites": null, - "singleUse": { - "enabled": false, - "isEncrypted": true - }, - "verifyEmail": null, - "pin": null, - "triggers": [], - "attributeFilters": [] - } - } - ``` - - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- - -## Delete Survey by ID {{ tag: 'DELETE', label: '/api/v1/management/surveys/' }} - - - - - Delete a survey by its ID. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl -X DELETE \ - 'https://app.formbricks.com/api/v1/management/surveys/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```json {{title:'200 Success'}} - { - "data": { - "id": "cln8k0tjz00n5z87nwq527h3z", - "createdAt": "2023-10-02T07:13:19.775Z", - "updatedAt": "2023-10-02T07:13:19.775Z", - "name": "Churn Survey", - "type": "link", - "environmentId": "cln8k0t47000fz87njmmu2bck", - "status": "inProgress", - "attributeFilters": [], - "displayOption": "displayOnce", - "autoClose": null, - "triggers": [], - "redirectUrl": null, - "recontactDays": null, - "questions": [ - { - "id": "churn-reason", - "type": "multipleChoiceSingle", - "headline": "Why did you cancel your subscription?", - "subheader": "We're sorry to see you leave. Help us do better:", - "required": true, - "logic": [ - { - "condition": "equals", - "value": "Difficult to use", - "destination": "easier-to-use" - }, - { - "condition": "equals", - "value": "It's too expensive", - "destination": "30-off" - }, - { - "condition": "equals", - "value": "I am missing features", - "destination": "missing-features" - }, - { - "condition": "equals", - "value": "Poor customer service", - "destination": "poor-service" - }, - { - "condition": "equals", - "value": "I just didn't need it anymore", - "destination": "end" - } - ], - "choices": [ - { - "id": "isud2xethsw63dlwl89kr4kj", - "label": "Difficult to use" - }, - { - "id": "opuu4ba3dlele3n0gjkuh27c", - "label": "It's too expensive" - }, - { - "id": "gnypapo0rhvkt8pwosrphvbl", - "label": "I am missing features" - }, - { - "id": "wkgsrsrazd9kfunqhzjezx6t", - "label": "Poor customer service" - }, - { - "id": "pykmgyyw74vg0gaeryj6bo4c", - "label": "I just didn't need it anymore" - } - ] - }, - { - "id": "easier-to-use", - "type": "openText", - "headline": "What would have made {{productName}} easier to use?", - "subheader": "", - "required": true, - "buttonLabel": "Send", - "logic": [ - { - "condition": "submitted", - "destination": "end" - } - ] - }, - { - "id": "30-off", - "type": "cta", - "headline": "Get 30% off for the next year!", - "required": true, - "buttonLabel": "Get 30% off", - "logic": [ - { - "condition": "clicked", - "destination": "end" - } - ], - "html": "

We'd love to keep you as a customer. Happy to offer a 30% discount for the next year.

", - "buttonUrl": "https://formbricks.com", - "buttonExternal": true, - "dismissButtonLabel": "Skip" - }, - { - "id": "missing-features", - "type": "openText", - "headline": "What features are you missing?", - "subheader": "", - "required": true, - "logic": [ - { - "condition": "submitted", - "destination": "end" - } - ] - }, - { - "id": "poor-service", - "type": "cta", - "headline": "So sorry to hear 😔 Talk to our CEO directly!", - "required": true, - "buttonLabel": "Send email to CEO", - "logic": [ - { - "condition": "clicked", - "destination": "end" - } - ], - "html": "

We aim to provide the best possible customer service. Please email our CEO and she will personally handle your issue.

", - "buttonUrl": "mailto:ceo@company.com", - "buttonExternal": true, - "dismissButtonLabel": "Skip" - } - ], - "thankYouCard": { - "enabled": false - }, - "delay": 0, - "autoComplete": null, - "closeOnDate": null, - "surveyClosedMessage": null, - "verifyEmail": null - } - } - ``` - ```json {{ title: '401 Not Authenticated' }} - { - "code": "not_authenticated", - "message": "Not authenticated", - "details": { - "x-Api-Key": "Header not provided or API Key invalid" - } - } - ``` - - - - - ---- diff --git a/apps/formbricks-com/app/docs/api/management/webhooks/page.mdx b/apps/formbricks-com/app/docs/api/management/webhooks/page.mdx deleted file mode 100644 index a4efd78cf9..0000000000 --- a/apps/formbricks-com/app/docs/api/management/webhooks/page.mdx +++ /dev/null @@ -1,398 +0,0 @@ -import {generateManagementApiMetadata} from "@/lib/utils" - -export const metadata = generateManagementApiMetadata("Webhook",["Fetch","Create","Delete"]) - -#### Management API - -# Webhook API - -Formbricks' Webhook API offers a powerful interface for interacting with webhooks. Webhooks allow you to receive real-time HTTP notifications of changes to specific objects in the Formbricks environment. - -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. - -This set of API can be used to -- [List All Webhooks](#list-webhooks) -- [Get Webhook](#retrieve-webhook-by-id) -- [Create Webhook](#create-webhook) -- [Delete Webhook](#delete-webhook-by-id) - -And the detailed Webhook Payload is elaborated [here](#webhook-payload). - -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. - -You will need an API Key to interact with these APIs. - ---- - -## List Webhooks {{ tag: 'GET', label: '/api/v1/webhooks' }} - - - - - Learn how to retrieve a list of all webhooks via API. - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/webhooks' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```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" - } - } - ``` - - - - - - ---- - -## Retrieve Webhook by ID {{ tag: 'GET', label: '/api/v1/webhooks/' }} - - - - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location \ - 'https://app.formbricks.com/api/v1/webhooks/' \ - --header \ - 'x-api-key: ' - ``` - - - - - - ```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" - } - } - ``` - - - - - - ---- - -## Create Webhook {{ tag: 'POST', label: '/api/v1/webhooks' }} - -Add a webhook to your product. - - - - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - ### Request Body Parameters - - - - The URL where the webhook will send data to. - - - List of events that will trigger the webhook. - - - List of survey IDs that will trigger the webhook. If not provided, the webhook will be triggered for all surveys. - - - -| 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. | - - - - - - - ```bash {{ title: 'cURL' }} - curl --location --request POST 'https://app.formbricks.com/api/v1/webhooks' \ - --header 'x-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"] - } - ``` - - - - - - ```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" - } - } - ``` - - - - - - ---- - -## Delete Webhook by ID {{ tag: 'DELETE', label: '/api/v1/webhooks/' }} - - - - - ### Mandatory Headers - - - - Your Formbricks API key. - - - - - - - - - ```bash {{ title: 'cURL' }} - curl --location --request DELETE 'https://app.formbricks.com/api/v1/webhooks/' \ - --header 'x-api-key: ' - ``` - - - - - - ```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." - } - } - ``` - - - - - - ---- - -## Webhook Payload - -This documentation helps understand the payload structure that will be received when the webhook is triggered in Formbricks. - - - - -| 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). | - - - - - ### An example webhook 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": [] - } - } - ``` - - - - - - ---- diff --git a/apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx b/apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx index 53a8a4cfd6..f07b37cd5f 100644 --- a/apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx +++ b/apps/formbricks-com/app/docs/contributing/creating-a-service/page.mdx @@ -209,13 +209,12 @@ We will rewrite the function `getApiKey` we created in the `service.ts` file to ```ts -import { unstable_cache } from "next/cache"; +import { cache } from "@formbricks/lib/cache"; -import { SERVICES_REVALIDATION_INTERVAL } from "../constants"; import { apiKeyCache } from "./cache"; -export const getApiKey = async (apiKeyId: string): Promise => - unstable_cache( +export const getApiKey = (apiKeyId: string): Promise => + cache( async () => { validateInputs([apiKeyId, ZString]); @@ -242,7 +241,6 @@ export const getApiKey = async (apiKeyId: string): Promise => [`getApiKey-${apiKeyId}`], { tags: [apiKeyCache.tag.byId(apiKeyId)], - revalidate: SERVICES_REVALIDATION_INTERVAL, } )(); ``` @@ -265,9 +263,7 @@ From the screenshot above we see that `unstable_cache` receives 3 arguments: 1. `fetchData`: In our case this is the exact function of your service without caching (step 3) 2. `keyParts`: As a rule of thumb, the key must consist of the name of the function and the arguments passed into the function, all separated by a dash. In our case it is called `getApiKey-${apiKeyId}` because the function name is `getApiKey` and we receive only one argument called `apiKeyId` -3. `options`: which consists of **tags** and **revalidate** - 1. `tags`: This is where the tags you created in step 4a comes in, tags are created solely based on the arguments passed to the function. (please reference existing services in `packages/lib` to see more variations of this when dealing with more than one argument) - 2. `revalidate`: We have a global constant for this which you can use called `SERVICES_REVALIDATION_INTERVAL` +3. `options`: which consists of **tags** that controls the revalidation of the cache. This is where the tags you created in step 4a comes in, tags are created solely based on the arguments passed to the function. (please reference existing services in `packages/lib` to see more variations of this when dealing with more than one argument) In create, update and delete requests, you don’t need caching however these are the places where the revalidate method is called. For example when the apiKey is deleted we want to call the revalidate method and pass in the id and environmentId, so we invalidate every cached function with `id` and `environmentId` tags. diff --git a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx index 7778813adf..6a04df4bcb 100644 --- a/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx +++ b/apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx @@ -76,7 +76,7 @@ Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`ya ```shell {{ title: 'npm' }} -npm install --save @formbricks/js +npm install @formbricks/js ``` ```shell {{ title: 'pnpm' }} pnpm add @formbricks/js @@ -153,7 +153,7 @@ Code snippets for the integration for both conventions are provided to further a ```shell {{ title: 'npm' }} -npm install --save @formbricks/js +npm install @formbricks/js ``` ```shell {{ title: 'pnpm' }} pnpm add @formbricks/js @@ -283,7 +283,7 @@ We will make sure the SDK is only loaded and used on the client side, as it's no ```shell {{ title: 'npm' }} -npm install --save @formbricks/js +npm install @formbricks/js ```` ```shell {{ title: 'pnpm' }} diff --git a/apps/formbricks-com/app/docs/in-app-surveys/advanced-targeting/page.mdx b/apps/formbricks-com/app/docs/in-app-surveys/advanced-targeting/page.mdx index 95e037eaba..faf91e577c 100644 --- a/apps/formbricks-com/app/docs/in-app-surveys/advanced-targeting/page.mdx +++ b/apps/formbricks-com/app/docs/in-app-surveys/advanced-targeting/page.mdx @@ -33,7 +33,7 @@ Advanced Targeting allows you to show surveys to the right group of people. You details to start the freemium plan. -1. On the Formbricks dashboard, click on **People & Segments** tab from the top navigation bar. +1. On the Formbricks dashboard, click on **People** tab from the top navigation bar. 2. Switch to the **Segments** tab & click on **Create Segment**. diff --git a/apps/formbricks-com/app/docs/in-app-surveys/developer-quickstart/page.mdx b/apps/formbricks-com/app/docs/in-app-surveys/developer-quickstart/page.mdx new file mode 100644 index 0000000000..fdbc457c3f --- /dev/null +++ b/apps/formbricks-com/app/docs/in-app-surveys/developer-quickstart/page.mdx @@ -0,0 +1,184 @@ +import DemoPreview from "@/components/dummyUI/DemoPreview"; +import { MdxImage } from "@/components/shared/MdxImage"; + +export const metadata = { + title: "Formbricks Functions for Frontend Developers: Quickstart Guide", + description: + "An overview of all available options for frontend developers to integrate and display surveys in web applications. Learn the key methods, configuration settings, and best practices.", +}; + +# Formbricks Functions for Frontend Developers: Quickstart Guide + +An overview of all available options for frontend developers to integrate and display surveys in web applications. Learn the key methods, configuration settings, and best practices. + +## Formbricks Integration + +Integrating Formbricks into your web application is straightforward, but it's important to follow the correct steps to ensure proper setup and functionality. For detailed instructions tailored to your development environment, please refer to our [Framework Guides](/docs/getting-started/framework-guides). + +## Check Availability + +Before using Formbricks, it's best practice to confirm it's available on the current web page. You can use a simple check to ensure Formbricks is not null: + + + + +```javascript +if (window.formbricks !== null) { + console.log("Formbricks is available"); +} else { + console.error("Formbricks is not available"); +} +``` + + + + +If Formbricks is not available, ensure it's properly integrated into your web application according to the installation guide. + +## Initializing Formbricks + +To start using Formbricks features, you must initialize it with the necessary environment information. This can be done with or without user identification. +For comprehensive guidance on setting up user identification, please consult our [User Identification Guide](/docs/in-app-surveys/user-identification). + +### Initialization Without User ID + +If you do not need user-specific tracking (e.g. on public facing websites with a lot of traffic), you can initialize Formbricks with just the `environmentId` and `apiHost`: + + + + +```javascript +formbricks.init({ + environmentId: "", + apiHost: "", +}); +``` + + + + +### Initialization With User ID + +If you need user-specific tracking, initialize Formbricks with a `userId` in addition to the `environmentId` and `apiHost`: + + + + +```javascript +formbricks.init({ + environmentId: "", + apiHost: "", + userId: "", +}); +``` + + + + +This setup allows you to associate interactions with specific users, enabling detailed tracking and user-specific functionality. + +## Enabling Debug Mode + +To enable debug mode in Formbricks, add `?formbricksDebug=true` to your URL. This activates detailed debug messages in the browser console, providing deeper insights into Formbricks' operation and potential issues. + +For comprehensive guidance on using debug mode, refer to our [Debug Mode Documentation](/docs/getting-started/framework-guides#debugging-formbricks-integration). It covers additional troubleshooting tips and information on analyzing Formbricks' integration. +## Tracking Code Actions + +Formbricks allows you to track code-based actions, which is useful for logging events or user interactions in your application. +For detailed information on using code-based actions, please visit our [Code Actions Guide](/docs/in-app-surveys/actions#code-actions). + + + + +```javascript +formbricks.track("Code Action"); +``` + + + + +The parameter "Code Action" can be customized to represent various actions, providing flexibility for different tracking scenarios. + +## Setting User Attributes + + + Please note that this function requires user identification to be active. Ensure you've initialized Formbricks with a `userId` before attempting to use this function. + + +If user identification is active, you can set custom attributes for the identified user. This can be helpful for segmenting users based on specific characteristics or properties. +To learn how to set custom user attributes, please check out our [User Attributes Guide](/docs/in-app-surveys/attributes#setting-custom-user-attributes). + + + + +```javascript +formbricks.setAttribute("Plan", "Paid"); +``` + + + + +In this example, the "Plan" attribute is set to "Paid", indicating the user's subscription status. You can set multiple attributes to capture additional user information. These attributes can be used to target surveys to specific users. You cannot set `userId` via this function. + + + +## Setting User Email + + + Please note that this function requires user identification to be active. Ensure you've initialized Formbricks with a `userId` before attempting to use this function. + + +To associate an email address with an identified user, you can use the `setEmail` function. This is useful for linking a user's email with their interactions: + + + + +```javascript +formbricks.setEmail("test@example.com"); +``` + + + + +Setting the email can facilitate user communication and integration with other systems, enabling a more seamless user experience. + +## Logout + +To log out and deinitialize Formbricks, use the `formbricks.logout()` function. This action clears the current initialization configuration and erases stored frontend information, such as the surveys a user has viewed or completed. It's an important step when a user logs out of your application or when you want to reset Formbricks. + + + + +```javascript +formbricks.logout(); +``` + + + + + + After calling `formbricks.logout()`, you'll need to reinitialize Formbricks before using any of its features again. Ensure that you properly reinitialize Formbricks to avoid unexpected errors or behavior in your application. + + +## Resetting Formbricks + +The `formbricks.reset()` function is a convenient way to clear current Formbricks data, and then reinitialize Formbricks. This action not only removes stored frontend information, such as the surveys a user has viewed or completed, but also reinitializes Formbricks with the settings used during the original initialization. + + + + +```javascript +formbricks.reset(); +``` + + + + +After calling `formbricks.reset()`, Formbricks is reinitialized, meaning you can continue using its features without additional setup. Be aware that any custom attributes, tracking, or user-specific data will be cleared and restored to the initial state. + +## Deprecated Function + +Please be aware that the following function is deprecated and should not be used in new code or maintained projects: + +- `formbricks.setUserId()`: Instead of using this function, set the `userId` during the initialization of Formbricks. This change ensures a more consistent approach to user identification and reduces the risk of errors due to inconsistent user context. + diff --git a/apps/formbricks-com/app/docs/in-app-surveys/recontact/app-survey.webp b/apps/formbricks-com/app/docs/in-app-surveys/recontact/app-survey.webp new file mode 100644 index 0000000000..467e536c8a Binary files /dev/null and b/apps/formbricks-com/app/docs/in-app-surveys/recontact/app-survey.webp differ diff --git a/apps/formbricks-com/app/docs/in-app-surveys/recontact/global-wait-time.webp b/apps/formbricks-com/app/docs/in-app-surveys/recontact/global-wait-time.webp new file mode 100644 index 0000000000..6208dfa66b Binary files /dev/null and b/apps/formbricks-com/app/docs/in-app-surveys/recontact/global-wait-time.webp differ diff --git a/apps/formbricks-com/app/docs/in-app-surveys/recontact/ignore-wait-time.webp b/apps/formbricks-com/app/docs/in-app-surveys/recontact/ignore-wait-time.webp new file mode 100644 index 0000000000..97809d77c2 Binary files /dev/null and b/apps/formbricks-com/app/docs/in-app-surveys/recontact/ignore-wait-time.webp differ diff --git a/apps/formbricks-com/app/docs/in-app-surveys/recontact/page.mdx b/apps/formbricks-com/app/docs/in-app-surveys/recontact/page.mdx new file mode 100644 index 0000000000..5716922ae1 --- /dev/null +++ b/apps/formbricks-com/app/docs/in-app-surveys/recontact/page.mdx @@ -0,0 +1,108 @@ +import { MdxImage } from "@/components/shared/MdxImage"; + +import AppSurvey from "./app-survey.webp"; +import GlobalWaitTime from "./global-wait-time.webp"; +import SurveyRecontact from "./survey-recontact.webp"; +import IgnoreWaitTime from "./ignore-wait-time.webp"; + +export const metadata = { + title: "Recontact Options in Formbricks: When to show a survey again to a user", + description: + "Explore how to configure Recontact options in Formbricks to control the frequency of survey exposure to users, ensuring effective feedback collection without compromising user experience.", +}; + +#### In-App Surveys + +# Recontact Options + +Recontact options in Formbricks enable you to manage how often and under what conditions a survey is shown to a user. This feature is crucial for balancing effective feedback collection with a positive user experience by preventing survey fatigue. + +## When do Recontact Options come into play? + +Recontact options are the last layer of the logic that determines if a survey is shown to the current user. The logic goes as follows: + +1. Targeting: Does the current user targeted to fill out this survey? If yes... +2. Trigger: Is the survey triggered? If yes... +3. **Recontact Options:** Should the survey be shown (again) to this user? That's dependent on: +- Did the user see any survey recently (meaning, has Global Waiting Time passed)? +- Did the user see this specific survey already? +- How many times did the user see this specific survey already? +- Has the user already responded to this survey? + +As you can see, there are a lot of different cases to cover. Let's have a closer look 👇 + + +## Recontact Options + +By default, a survey is shown to each user only once. + +You can adjust the default behavior by modifying the Recontact Options for each survey in the settings: + +1. Open the Survey Editor for the survey you want to see & modify the Recontact Options for. +2. Select the Settings Tab. +3. Ensure your Survey type is set to **App Survey**. + + + +4. Scroll down to the Recontact Options section. + +Available Recontact Options include: + +- **Show only once**: (default) Displays the survey a single time, regardless of whether it was completed. +- **Until they Submit a Response**: If tareting matches and trigger fires, Formbricks keeps showing the survey until the user submits a response. +- **Keep Showing while Conditions Match**: Always shows the survey while specific conditions are met. Useful for continuous feedback collection, such as in [Docs Feedback Survey](/docs/best-practices/docs-feedback) or the [Feedback Box](/docs/best-practices/feedback-box). + + + +## Product-wide Global Waiting Time +The Global Waiting Time is a universal blocker to make sure that no user sees too many surveys. This is particularly helpful when several teams of large organisations use Formbricks at the same time. + + + The default Global Waiting Time is set to 7 days. + + +To adjust the Global Waiting Time: + +1. Visit Formbricks Settings +2. Go to Product Settings +3. Find the **Recontact Waiting Time** section +4. Modify the interval (in days) as needed. + + + +## Overriding Global Waiting Time for a Specific Survey + +For specific surveys, you may need to override the default waiting time. Below is how you can do that: + +1. In the Survey Editor, access the Settings Tab. +2. Find the Ignore Waiting Time between Surveys toggle under Recontact Options. +3. Enable this toggle to bypass the global setting. +4. Set a custom recontact period: + - **Always Show Survey**: Displays the survey whenever triggered, ignoring the waiting time. + - **Wait `X` days before showing this survey again**: Sets a specific interval before the survey can be shown again. + + + +--- + +Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you! diff --git a/apps/formbricks-com/app/docs/in-app-surveys/recontact/survey-recontact.webp b/apps/formbricks-com/app/docs/in-app-surveys/recontact/survey-recontact.webp new file mode 100644 index 0000000000..552871ab31 Binary files /dev/null and b/apps/formbricks-com/app/docs/in-app-surveys/recontact/survey-recontact.webp differ diff --git a/apps/formbricks-com/app/docs/integrations/airtable/page.mdx b/apps/formbricks-com/app/docs/integrations/airtable/page.mdx index 17511acfa6..c3ac424037 100644 --- a/apps/formbricks-com/app/docs/integrations/airtable/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/airtable/page.mdx @@ -74,7 +74,7 @@ Before the next step, make sure that you have a Formbricks Survey with at least -6. Now click on the "Link New Table" button to link a new Airtable with Formbricks and a modal will open up. +6. Now click on the "Link New Table" button to link an Airtable with Formbricks and a modal will open up. -Congratulations! You have successfully linked an Airtable with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Airtable. +Congratulations! You have successfully linked an Airtable with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Airtable. Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you! diff --git a/apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx b/apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx index 2c0d24652a..1806baebca 100644 --- a/apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/google-sheets/page.mdx @@ -24,10 +24,10 @@ The Google Sheets integration allows you to automatically send responses to a Go This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a - self-hosted version of Formbricks. + self-hosted version of Formbricks. For self-configuration, see additional setup [below](#setup-in-self-hosted-formbricks). -## Formbricks Cloud +## Connect Google Sheets 1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Google Sheets integration. @@ -64,7 +64,7 @@ Before the next step, make sure that you have a Formbricks Survey with at least -5. Now click on the "Link New Sheet" button to link a new Google Sheet with Formbricks and a modal will open up. +5. Now click on the "Link New Sheet" button to link a Google Sheet with Formbricks and a modal will open up. -Congratulations! You have successfully linked a Google Sheet with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Google Sheet. - -## Setup in self-hosted Formbricks - -Enabling the Google Sheets Integration in a self-hosted environment isn't easy and requires a setup using Google Cloud and changing the environment variables of your Formbricks instance. - -This process is really complicated and we recommend using Formbricks Cloud for this feature. - -We will first create a Google Cloud Project and then enable the Google Sheets API for it. Then we will create an OAuth Client ID and Client Secret for our Formbricks instance and set them as environment variables. - -1. Go to the [Google Cloud Console](https://console.cloud.google.com/) and **create a new project**. -2. Now select the project you just created and go to the "**APIs & Services**" section. -3. Click on the "**Enable APIs and Services**" button and search for "**Google Sheets API**" and enable it. -4. Now go to the "**OAuth Consent screen**" section and select the **"External" User Type** if you want any Google User to be able to use the integration or select "Internal" if you want only the users of your Google Workspace to be able to use the integration. -5. Now provide it the details such as - - App name (Will **show up in the OAuth modal** when the user is asked to authenticate with Google) - - User support email (ideally should be **your email** for any support queries by the Users or Google) - - Developer contact information (ideally should be **your email** for any **support queries by Google**) -6. Now click on the "Save and Continue" button and you will be taken to the Scopes step. -7. Click on the "**Add or Remove Scopes**" button and add the scopes `https://www.googleapis.com/auth/userinfo.email`, `https://www.googleapis.com/auth/spreadsheets` & `https://www.googleapis.com/auth/drive` and click on the "Update" button: -8. Now Verify the scopes and click on the "Save and Continue" button. -9. Now go to the **"Test Users" section, skip the step**, and click the "Save and Continue" button. -10. You will now be shown a summary of the OAuth Consent Screen. Verify the details and Click on the "**Back to Dashboard**" button. -11. Now go to the "**Credentials**" section and click on the "**Create Credentials**" button and select "**OAuth Client ID**". -12. Select "**Web Application**" as the Application Type and provide it a name (this name will **not be visible** to your end users). -13. Now add your **public facing URL** in the "**Authorized JavaScript Origins**" section: - - https://` -14. Now add the following URL in the "**Authorized redirect URIs**" section and click on the "**Create**" button: - - https://`/api/google-sheet/callback -15. You will now be shown the **Client ID** and **Client Secret**. Copy them and set them as the **environment variables** in your Formbricks instance as: - - `GOOGLE_SHEETS_CLIENT_ID` - Client ID - - `GOOGLE_SHEETS_CLIENT_SECRET` - Client Secret -16. Also use the **same Authorized redirect URI** in the `GOOGLE_SHEETS_REDIRECT_URL` environment variable. -17. One last that we need to do is to **enable the Google Drive API** for the project. For that, go to the "**APIs & Services**" section and click on the "**Enable APIs and Services**" button and search for "**Google Drive API**" and enable it. - -### By now, your environment variables should include the below ones as well: - -- `GOOGLE_SHEETS_CLIENT_ID` -- `GOOGLE_SHEETS_CLIENT_SECRET` -- `GOOGLE_SHEETS_REDIRECT_URL` - -Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Google Sheet with Formbricks. +Congratulations! You have successfully linked a Google Sheet with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Google Sheet. ## Remove Integration with Google Account To remove the integration with Google Account, 1. Visit the Integrations tab in your Formbricks Cloud dashboard. -2. Select "Manage Sheets" button in the Google Sheets card. -3. Click on the "Delete Integration" button. -4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Google Account. +2. Select **Manage Sheets** button in the Google Sheets card. +3. Click on the **Delete Integration** button. +4. It will now ask for a confirmation to remove the integration. Click on the **Delete** button to remove the integration. You can always come back and connect again with the same Google Account. -## What data do you need? +## Setup in self-hosted Formbricks + +Integrating Google Sheets with a self-hosted Formbricks instance requires configuring Google Cloud and updating your environment variables. This guide provides step-by-step instructions to facilitate this setup using Google Cloud Project & OAuth Setup. + +This process is might be complicated and we recommend using Formbricks Cloud for this feature. + +1. Go to the [Google Cloud Console](https://console.cloud.google.com/) and **create a new project**. +2. Enable necessary APIs: + - Now select the project you just created and go to the **APIs & Services** section. + - Click on the **Enable APIs and Services** button and search for **Google Sheets API** & **Google Drive API** and enable it. +3. Configure OAuth Consent Screen: + + - Go to **OAuth Consent screen** and select the appropriate User Type (External or Internal). Select **Internal** if you want only the users of your Google Workspace to be able to use the integration. + - Fill the required details: + - App name: Name displayed during OAuth authentication. + - User support email and Developer contact information: Your contact details for support. + - Click on **Save and Continue**. + +4. Add required Scopes: + +- Click on the **Add or Remove Scopes** button and add the scopes: + - `https://www.googleapis.com/auth/userinfo.email` + - `https://www.googleapis.com/auth/spreadsheets` + - `https://www.googleapis.com/auth/drive` +- Click on the **Update** button. Verify the scopes and click on the **Save and Continue** button. +- Skip the **Test Users** section and click on the **Save and Continue** button. + +5. View the OAuth Consent Screen summary and click on the **Back to Dashboard** button. + +6. Register OAuth Client: + +- Navigate to **Credentials** > **Create Credentials** > **OAuth Client ID**. +- Select **Web Application** and set: + - Name: Name of the OAuth Client ID. + - Authorized JavaScript Origins: `https://` + - Authorized redirect URIs: `https:///api/google-sheet/callback` +- Save and note the Client ID and Client Secret. + +7. Copy the Client ID and Client Secret and set them as environment variables in your Formbricks instance: + + - `GOOGLE_SHEETS_CLIENT_ID` + - `GOOGLE_SHEETS_CLIENT_SECRET` + - `GOOGLE_SHEETS_REDIRECT_URL` + +8. Enable Google Drive API: + - Go to the **APIs & Services** section and click on the **Enable APIs and Services** button. + - Search for **Google Drive API** and enable it. + +By now, your **environment variables** should include the below ones as well: + +- `GOOGLE_SHEETS_CLIENT_ID` +- `GOOGLE_SHEETS_CLIENT_SECRET` +- `GOOGLE_SHEETS_REDIRECT_URL` + +Voila! You have successfully enabled the Google Sheets integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Google Sheet with Formbricks. + +## What info do you need? - Your **Email ID** for authentication (We use this to identify you) - Your **Google Sheets Names and IDs** (We fetch this to list and show you the options of choosing a sheet to integrate with) @@ -163,8 +178,7 @@ For the above, we ask for: 1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70)) - We do not store any other information of yours! We value Privacy more than you and rest assured you're safe - with us! + We store as little personal information as possible. Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you! diff --git a/apps/formbricks-com/app/docs/integrations/make/page.mdx b/apps/formbricks-com/app/docs/integrations/make/page.mdx index aa34b22228..84efb9ea6d 100644 --- a/apps/formbricks-com/app/docs/integrations/make/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/make/page.mdx @@ -95,7 +95,7 @@ Click "Create a webhook": className="max-w-full rounded-lg sm:max-w-3xl" /> -Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/api/management/api-key-setup). +Enter the Formbricks API key. Learn how to get one from the [API Key tutorial](/docs/additional-features/api#how-to-generate-an-api-key). -Now you need an API key. Please refer to the [API Key Setup](/docs/api/management/api-key-setup) page to learn how to create one. +Now you need an API key. Please refer to the [API Key Setup](/docs/additional-features/api#how-to-generate-an-api-key) page to learn how to create one. Once you copied it in the API Key field, hit Save button to test the connection and save the credentials. diff --git a/apps/formbricks-com/app/docs/integrations/notion/page.mdx b/apps/formbricks-com/app/docs/integrations/notion/page.mdx index a085041d49..e9cb1c1be0 100644 --- a/apps/formbricks-com/app/docs/integrations/notion/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/notion/page.mdx @@ -61,7 +61,7 @@ The notion integration allows you to automatically send responses to a Notion da database in the Notion account you integrated. -5. Now click on the "Link New Database" button to link a new Notion database with Formbricks and a modal will open up. +5. Now click on the "Link New Database" button to link a Notion database with Formbricks and a modal will open up. -Congratulations! You have successfully linked a Notion database with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically added to the linked Notion database. +Congratulations! You have successfully linked a Notion database with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically added to the linked Notion database. ## Setup in self-hosted Formbricks diff --git a/apps/formbricks-com/app/docs/integrations/slack/page.mdx b/apps/formbricks-com/app/docs/integrations/slack/page.mdx index 7b0b2a70f8..fae388e073 100644 --- a/apps/formbricks-com/app/docs/integrations/slack/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/slack/page.mdx @@ -69,7 +69,7 @@ The slack integration allows you to automatically send responses to a Slack chan channel in the Slack workspace you integrated. -5. Now click on the "Link channel" button to link a new Slack channel with Formbricks and a modal will open up. +5. Now click on the "Link channel" button to link a Slack channel with Formbricks and a modal will open up. -Congratulations! You have successfully linked a Slack channel with Formbricks. Now whenever a response is submitted for the linked Survey, it will be automatically sent to the linked Slack channel. +Congratulations! You have successfully linked a Slack channel with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically sent to the linked Slack channel. ## Setup in self-hosted Formbricks diff --git a/apps/formbricks-com/app/docs/integrations/zapier/page.mdx b/apps/formbricks-com/app/docs/integrations/zapier/page.mdx index 2fa9005de0..1d65d346d9 100644 --- a/apps/formbricks-com/app/docs/integrations/zapier/page.mdx +++ b/apps/formbricks-com/app/docs/integrations/zapier/page.mdx @@ -93,7 +93,7 @@ Now, you have to connect Zapier with Formbricks via an API Key: className="max-w-full rounded-lg sm:max-w-3xl" /> -Now you need an API key. Please refer to the [API Key Setup](/docs/api/management/api-key-setup) page to learn how to create one. +Now you need an API key. Please refer to the [API Key Setup](/docs/additional-features/api#how-to-generate-an-api-key) page to learn how to create one. Once you copied it in the newly opened Zapier window, you will be connected: diff --git a/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx b/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx index 26876a4825..89ed71e221 100644 --- a/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx +++ b/apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx @@ -12,15 +12,16 @@ export const metadata = { # Data Prefilling in Link Surveys -Data prefilling via the URL allows you to increase conversion rate by prefilling data you already have in a different system. +Data prefilling via the URL allows you to increase completion rate by prefilling data you already have in a different system. Formbricks allows you to prefill multiple questions in a survey. ## Purpose -URL prefilling of data comes in handy when you: +Data prefilling via URL comes in handy when you: - Have data for some of the respondents, but not all +- Have data you want the respondent to confirm or update - Have data in a different system (e.g. your database) and want to add it to the user profile in Formbricks -- Want to embed the first question in an email and increase conversion by prefilling the choice +- Want to embed a survey in an email and increase completion by prefilling the choice selected in the email ## Quick Example @@ -28,24 +29,24 @@ URL prefilling of data comes in handy when you: ```sh -https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?question_id=5 +https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?question_id_1=answer_1&question_id_2=answer_2 ``` ## How it works -To prefill the first question of a survey, append `?question_id=answer` at the end of the survey URL. The answer has to match the expected type of the question. For example, if the first question is a rating question, the answer has to be a number. If the first question is a single select question, the answer has to be a string. +To prefill the questions of a survey, add query parameters to the survey URL. The query parameter should be in the format `questionId=answer`. The answer has to match the expected type of the question to pass through the [validation](/docs/link-surveys/data-prefilling#validation). For example, if the first question is a rating question, the answer has to be a number. If the first question is a single select question, the answer has to be a string identical to one of the answer options. -Please make sure the answer is [URL encoded](https://www.urlencoder.org/). +Please make sure the answer is [URL encoded](https://www.urlencoder.org/). - - ## Prefill only the first question Currently, you can only prefill the first question of a link survey. - +## Prefilling multiple values + +Formbricks let's you prefill as many values as you want. You can combine multiple values in the URL using `&` so for example `name=Bernadette&age=18`. The order of the query parameters does not matter so you can always move around questions or add new ones without having to worry about the order of the query parameters. ## Where do I find my question Id? -You find the `questionId` in the Advanced Settings at the bottom of each question card in the Survey Editor. As you see, you can update the `questionId` to any string you like. However, once you published your survey, this `questionId` cannot be updated anymore: +You find the `questionId` in the **Advanced Settings** toggle at the bottom of each question card in the Survey Editor. As you see, you can update the `questionId` to any string you like. However, once you published your survey, this `questionId` cannot be updated anymore: - + ```sh https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?rating_question_id=5 @@ -69,9 +72,13 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?rating_question_id=5 + ### NPS Question + +Translates to an NPS rating of 10: + - + ```sh https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?nps_question_id=10 @@ -79,9 +86,13 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?nps_question_id=10 + ### Single Select Question (Radio) + +Chooses the option 'Very disappointed' in the single select question. The string has to be identical to the option in your question: + - + ```sh https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?single_select_question_id=Very%20disappointed @@ -89,9 +100,13 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?single_select_question_id + ### Multi Select Question (Checkbox) + +Selects three options 'Sun, Palms and Beach' in the multi select question. The strings have to be identical to the options in your question: + - + ```sh https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?multi_select_question_id=Sun%2CPalms%2CBeach @@ -99,9 +114,13 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?multi_select_question_id= + ### Open Text Question + +Adds 'I love Formbricks' as the answer to the open text question: + - + ```sh https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20love%20Formbricks @@ -109,9 +128,13 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20 + ### CTA Question + +Adds 'clicked' as the answer to the CTA question. Alternatively, you can set it to 'dismissed' to skip the question: + - + ```txt https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked @@ -119,15 +142,50 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked + +### Consent Question + +Adds 'accepted' as the answer to the Consent question. Alternatively, you can set it to 'dismissed' to skip the question. + + + + +```txt +https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?consent_question_id=accepted +``` + + + + +### Picture Selection Question + +Adds index of the selected image(s) as the answer to the Picture Selection question. The index starts from 1 + + + + +```txt +https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?pictureSelection_question_id=1%2C2%2C3 +``` + + + + +All other question types, you currently cannot prefill via the URL. + + ## Validation -Make sure that the answer in the URL matches the expected type for the first question. +Make sure that the answer in the URL matches the expected type for the questions. The URL validation works as follows: - For Rating or NPS questions, the response is parsed as a number and verified if it's accepted by the schema. - For CTA type questions, the valid values are "clicked" (main CTA) and "dismissed" (skip CTA). - For Consent type questions, the valid values are "accepted" (consent given) and "dismissed" (consent not given). +- For Picture Selection type questions, the response is parsed as an array of numbers and verified if it's accepted by the schema. - All other question types are strings. -### You’re good to go! 🎉 + + If an answer is invalid, the prefilling will be ignored and the question is presented as if not prefilled. + diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-with-survey.webp b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-with-survey.webp new file mode 100644 index 0000000000..6782b534ee Binary files /dev/null and b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-with-survey.webp differ diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-without-survey.webp b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-without-survey.webp new file mode 100644 index 0000000000..d35f1683dd Binary files /dev/null and b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/email-content-without-survey.webp differ diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/jo-signature.webp b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/jo-signature.webp new file mode 100644 index 0000000000..859260e6d1 Binary files /dev/null and b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/jo-signature.webp differ diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/page.mdx b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/page.mdx new file mode 100644 index 0000000000..eea532e387 --- /dev/null +++ b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/page.mdx @@ -0,0 +1,146 @@ +import { TellaVideo } from "@/components/docs/TellaVideo"; +import { MdxImage } from "@/components/shared/MdxImage"; + +import EmailContentWithSurvey from "./email-content-with-survey.webp"; +import EmailContentWithoutSurvey from "./email-content-without-survey.webp"; +import JoSignature from "./jo-signature.webp"; +import PluginAddSurvey from "./plugin-add-survey.webp"; +import PluginSourceTab from "./plugin-source-tab.webp"; + +export const metadata = { + title: "Embed Surveys in Your Emails", + description: "Embed Formbricks surveys seamlessly into your emails to collect feedback from your users.", +}; + +#### Link Surveys + +# Embed Surveys in Your Email + +Embedding Formbricks surveys directly into your emails allows you to collect valuable feedback from your users at every touchpoint. Seamlessly integrate interactive surveys into your email campaigns to gather insights and improve user experience. + +## Generate an Embed Code + +To embed a Formbricks survey in an email, first, create a survey and publish it. Follow these steps to generate the embed code: + +1. **Create and Publish a Survey**: Start by creating a link survey and publish it once ready. +2. **Access the Share Options**: Go to the survey summary page and click the Share button (see below). +3. **Get the Embed Code**: Click on Embed Survey at the bottom of the share modal, navigate to the `Embed in an Email` tab, and click `Copy Code`. +4. **Preview and Test**: Before sending it to your users, click on Send Preview to receive a test email. This helps ensure the survey appears correctly. + + + +## Embedding the Survey in Emails + +Different email clients have different support for HTML and CSS. We recommend testing the email in different email clients to ensure the survey looks good in all of them. + +Below are some of the methods and services that we know that allows HTML embedding and how you can use them: + + + Please use the below methods at your own discretion. We do not officially endorse any of the services + mentioned below. + + +### 1. Gmail + +Gmail does not support HTML embedding natively. It's a WYSIWYG (What You See Is What You Get) editor. However, you can use a free plugin like [HTML Editor for Gmail by cloudHQ](https://chromewebstore.google.com/detail/free-html-editor-for-gmai/ioinaaeeacahcmbgfmeaaofhfkijpdeb) to embed HTML in your emails. + + - Install the plugin from the Chrome Web Store. + - Open Gmail and compose a new email. + - Write your email content after which you want to embed the survey. + + + + - Right next to the Send button you will see a new button called **HTML Editor**. Click on it. + - This will open a new window with the **Design** tab active. Switch to the **Source** tab. + + + + - Now paste the copied HTML code from Formbricks into this window. On the right, you will see a preview of how the email will look. + + + + - Click on the **Close Editor** button to save the changes & close the editor. + + + + - Voila! You have successfully embedded the survey in your email. + +### 2. Sendgrid + +Sendgrid supports HTML content in emails directly: + + - Compose Your Email: Use Sendgrid's email composition tools to embed the HTML directly into your email body. + - Reference: For detailed steps, refer to Sendgrid's official documentation [here](https://sendgrid.com/en-us/solutions/email-marketing/email-design) or API docs [here](https://sendgrid.com/docs/for-developers/sending-email/api-getting-started/) + +### 3. Mailchimp + +Available in their Standard plan and above, Mailchimp allows HTML content embedding: + + - Use the Code Block: Drag a code block into your email template and paste the HTML code for the survey. + - Reference: Check out Mailchimp's guide on pasting in custom HTML [here](https://mailchimp.com/help/paste-in-html-to-create-an-email/) + +### 4. Notemailer + +Nodemailer is a Node.js module that allows you to send emails with HTML content. + + - If you use Node.js to send emails, just attach the `html` parameter in your email message. + - Reference: Take a look at Nodemailer's official message documentation [here](https://nodemailer.com/message/) + + + Please note that the above methods are not exhaustive and there are many other ways to embed HTML in emails. + + +## Example: Email Footer Survey + +Embed a survey link in your email signature to collect feedback subtly yet effectively. Here’s how: + + + +1. Create a Survey: Adjust an existing survey or create a new one. +2. Scroll down & enable the **Hidden Fields** option. +3. Add a new hidden field with the name **helpful**. +4. Now Publish the survey as a Link Survey & copy the link. +5. Embed in Your Signature: Add this HTML snippet to your email signature in your email client settings. + + + + +```html +Was our conversation helpful? Yes 👍 | No 👎 +``` + + + + +Replace `YOUR_SURVEY_LINK` with the actual survey link. + +PS: If you do not see any signature settings, just use one of the methods we've mentioned above to embed the HTML code in your email. + +--- + +**Can’t figure it out?** [Join our Discord!](https://formbricks.com/discord) diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-add-survey.webp b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-add-survey.webp new file mode 100644 index 0000000000..92d474a09c Binary files /dev/null and b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-add-survey.webp differ diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-source-tab.webp b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-source-tab.webp new file mode 100644 index 0000000000..6b765123e6 Binary files /dev/null and b/apps/formbricks-com/app/docs/link-surveys/embed-in-email/plugin-source-tab.webp differ diff --git a/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx b/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx new file mode 100644 index 0000000000..5ffff7c22e --- /dev/null +++ b/apps/formbricks-com/app/docs/link-surveys/embed-surveys/page.mdx @@ -0,0 +1,81 @@ +import { TellaVideo } from "@/components/docs/TellaVideo"; + +export const metadata = { + title: "Embed Surveys in Your Web Page", + description: "Embed Formbricks surveys seamlessly into your website or web application using an iframe.", +}; + +#### Embed Surveys + +# Embed Surveys in Your Web Page + +Embedding Formbricks surveys directly into your web pages allows you to integrate interactive surveys without redirecting users to a separate survey site. This method ensures a seamless integration and maintains the aesthetic continuity of your website or application. + +## How to Use it? + + + +1. Create and publish a link survey. + +2. Open survey summary page and click on **share** button on the top right. + +3. In the survey share modal, click on **Embed survey** button. + +4. Navigate to **Embed in a Web Page** tab and click on Copy code + +5. Paste the copied iframe code into the HTML of your web page where you want the survey to appear. + +### Example of Embedding a Survey + + + + +```html +
+ +
+``` + + + + +## Iframe Events + +The iframe fires a **formbricksSurveyCompleted** event when a user finishes a survey within the embedded iframe. This event can be captured through a message listener in your webpage's JavaScript + +### How to Use it? + +1. Embed the Formbricks survey on your webpage using the iframe method as described above. + +2. Add an event listener to your webpage’s JavaScript that listens for `message` events from the iframe. + +3. Check if the received message indicates that the survey is completed by comparing the `event.data` with the value `formbricksSurveyCompleted`. + + + It is important to verify the origin of the message to ensure it comes from the iframe containing your + survey, enhancing the security of your event handling. + + +4. Implement your custom actions within the callback function based on the survey completion. + +### Example of Handling Survey Completion Events + + + + +```javascript +window.addEventListener("message", (event) => { + // Replace 'https://app.formbricks.com' with the actual web app url + if (event.origin === "https://app.formbricks.com" && event.data === "formbricksSurveyCompleted") { + console.log("Survey completed!"); + // Implement your custom actions here + } +}); +``` + + + diff --git a/apps/formbricks-com/app/docs/self-hosting/enterprise/page.mdx b/apps/formbricks-com/app/docs/self-hosting/enterprise/page.mdx index c4da1964d7..64c3dae5a5 100644 --- a/apps/formbricks-com/app/docs/self-hosting/enterprise/page.mdx +++ b/apps/formbricks-com/app/docs/self-hosting/enterprise/page.mdx @@ -26,8 +26,6 @@ Additional to the AGPL licensed Formbricks core, the Formbricks repository conta | Multi-language surveys | ❌ | ✅ | | Advanced targeting / Segments | ❌ | ✅ | | Make code changes and keep private | ❌ | ✅ | -| Whitelabel Formbricks | ❌ | ✅ | -| Sell Formbricks as SaaS to others | ❌ | ✅ | **Please note:** Sooner than later we will introduce a enterprise license pricing. For a free beta key, fill out this form: diff --git a/apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx b/apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx index 28f6b1f29c..4f0bc8518d 100644 --- a/apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx +++ b/apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx @@ -147,7 +147,7 @@ These variables can be provided at the runtime i.e. in your docker-compose file. | S3_ACCESS_KEY | Access key for S3. | optional | (resolved by the AWS SDK) | | S3_SECRET_KEY | Secret key for S3. | optional | (resolved by the AWS SDK) | | S3_REGION | Region for S3. | optional | (resolved by the AWS SDK) | -| S3_BUCKET_NAME | Bucket name for S3. | optional (required if S3 is enabled) | | +| S3_BUCKET_NAME | S3 bucket name for data storage. Formbricks enables S3 storage when this is set. | optional (required if S3 is enabled) | | | S3_ENDPOINT | Endpoint for S3. | optional | (resolved by the AWS SDK) | | PRIVACY_URL | URL for privacy policy. | optional | | | TERMS_URL | URL for terms of service. | optional | | diff --git a/apps/formbricks-com/components/docs/Navigation.tsx b/apps/formbricks-com/components/docs/Navigation.tsx index fd06cdcb5c..4bed3918b2 100644 --- a/apps/formbricks-com/components/docs/Navigation.tsx +++ b/apps/formbricks-com/components/docs/Navigation.tsx @@ -192,12 +192,14 @@ export const navigation: Array = [ title: "In-App Surveys", links: [ { title: "Quickstart", href: "/docs/getting-started/quickstart-in-app-survey" }, + { title: "Developer Quickstart", href: "/docs/in-app-surveys/developer-quickstart" }, { title: "Framework Guides", href: "/docs/getting-started/framework-guides" }, { title: "Troubleshooting", href: "/docs/getting-started/troubleshooting" }, { title: "Identify Users", href: "/docs/in-app-surveys/user-identification" }, { title: "Actions", href: "/docs/in-app-surveys/actions" }, { title: "Attributes", href: "/docs/in-app-surveys/attributes" }, { title: "Advanced Targeting", href: "/docs/in-app-surveys/advanced-targeting" }, + { title: "Recontact Options", href: "/docs/in-app-surveys/recontact" }, ], }, { @@ -210,11 +212,17 @@ export const navigation: Array = [ { title: "Source Tracking", href: "/docs/link-surveys/source-tracking" }, { title: "Hidden Fields", href: "/docs/link-surveys/hidden-fields" }, { title: "Start At Question", href: "/docs/link-surveys/start-at-question" }, + { title: "Embed Surveys in Website", href: "/docs/link-surveys/embed-surveys" }, + { title: "Embed Surveys in Email", href: "/docs/link-surveys/embed-in-email" }, ], }, { title: "Additional Features", - links: [{ title: "Multi Language Surveys", href: "/docs/additional-features/multi-language-surveys" }], + links: [ + { title: "API", href: "/docs/additional-features/api" }, + { title: "Multi-Language Surveys", href: "/docs/additional-features/multi-language-surveys" }, + { title: "Metadata", href: "/docs/additional-features/metadata" }, + ], }, { title: "Best Practices", @@ -266,29 +274,6 @@ export const navigation: Array = [ { title: "FAQ", href: "/docs/faq" }, ], }, - { - title: "Client API", - links: [ - { title: "Overview", href: "/docs/api/client/overview" }, - { title: "Actions", href: "/docs/api/client/actions" }, - { title: "Displays", href: "/docs/api/client/displays" }, - { title: "People", href: "/docs/api/client/people" }, - { title: "Responses", href: "/docs/api/client/responses" }, - ], - }, - { - title: "Management API", - links: [ - { title: "API Key Setup", href: "/docs/api/management/api-key-setup" }, - { title: "Action Classes", href: "/docs/api/management/action-classes" }, - { title: "Attribute Classes", href: "/docs/api/management/attribute-classes" }, - { title: "Me", href: "/docs/api/management/me" }, - { title: "People", href: "/docs/api/management/people" }, - { title: "Responses", href: "/docs/api/management/responses" }, - { title: "Surveys", href: "/docs/api/management/surveys" }, - { title: "Webhooks", href: "/docs/api/management/webhooks" }, - ], - }, ]; export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) { diff --git a/apps/formbricks-com/components/docs/TellaVideo.tsx b/apps/formbricks-com/components/docs/TellaVideo.tsx new file mode 100644 index 0000000000..21d2b8c9ea --- /dev/null +++ b/apps/formbricks-com/components/docs/TellaVideo.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +export function TellaVideo({ tellaVideoIdentifier }: { tellaVideoIdentifier: string }) { + return ( +
+ +
+ ); +} diff --git a/apps/formbricks-com/components/dummyUI/DemoPreview.tsx b/apps/formbricks-com/components/dummyUI/DemoPreview.tsx index 91962b52fe..4c2f07ba91 100644 --- a/apps/formbricks-com/components/dummyUI/DemoPreview.tsx +++ b/apps/formbricks-com/components/dummyUI/DemoPreview.tsx @@ -28,7 +28,7 @@ const DemoPreview: React.FC = ({ template }) => {

Preview

-
+
{selectedTemplate && ( {

- {/* Product Hunt Logo */} + {/* Product Hunt Logo */}
diff --git a/apps/formbricks-com/components/home/Hero.tsx b/apps/formbricks-com/components/home/Hero.tsx index 348b923abb..a000687903 100644 --- a/apps/formbricks-com/components/home/Hero.tsx +++ b/apps/formbricks-com/components/home/Hero.tsx @@ -1,14 +1,6 @@ -import CalLogoLight from "@/images/clients/cal-logo-light.svg"; -import CrowdLogoLight from "@/images/clients/crowd-logo-light.svg"; -import FlixbusLogo from "@/images/clients/flixbus-white.svg"; -import GumtreeLogo from "@/images/clients/gumtree.png"; -import NILogoDark from "@/images/clients/niLogoDark.svg"; -import OpinodoLogo from "@/images/clients/opinodo.png"; -import OptimoleLogo from "@/images/clients/optimole-logo.svg"; -import ThemeisleLogo from "@/images/clients/themeisle-logo.webp"; +import LogoBar from "@/components/salespage/LogoBar"; import { ShieldCheckIcon, StarIcon } from "lucide-react"; import { usePlausible } from "next-plausible"; -import Image from "next/image"; import { useRouter } from "next/router"; import { Button } from "@formbricks/ui/Button"; @@ -42,20 +34,9 @@ export const Hero: React.FC = ({}) => { know what your customers need.

-
-
- Flixbus Flix Flixtrain Logo - Gumtree Logo - Cal Logo - ThemeIsle Logo - Opinodo.com Logo - Crowd.dev Logo - Optimole Logo - Neverinstall Logo -
-
+ -
+
-
@@ -164,6 +169,13 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) => {isEditing ? "Save" : "Edit"} )} +
); }; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx index 4e47e8fcc1..61db000b8d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditPlacement.tsx @@ -31,6 +31,8 @@ export function EditPlacement({ product }: EditPlacementProps) { const [overlay, setOverlay] = useState(product.darkOverlay ? "darkOverlay" : "lightOverlay"); const [clickOutside, setClickOutside] = useState(product.clickOutsideClose ? "allow" : "disallow"); const [updatingPlacement, setUpdatingPlacement] = useState(false); + const overlayStyle = + currentPlacement === "center" && overlay === "darkOverlay" ? "bg-gray-700/80" : "bg-slate-200"; const handleUpdatePlacement = async () => { try { @@ -58,18 +60,21 @@ export function EditPlacement({ product }: EditPlacementProps) { {placements.map((placement) => (
-
))} -
+
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx index 90713c537d..d615f09e7f 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStyling.tsx @@ -11,23 +11,26 @@ import toast from "react-hot-toast"; import { COLOR_DEFAULTS, PREVIEW_SURVEY } from "@formbricks/lib/styling/constants"; import { TProduct } from "@formbricks/types/product"; -import { TSurvey } from "@formbricks/types/surveys"; +import { TSurvey, TSurveyType } from "@formbricks/types/surveys"; import { AlertDialog } from "@formbricks/ui/AlertDialog"; import { Button } from "@formbricks/ui/Button"; import { Switch } from "@formbricks/ui/Switch"; import { updateProductAction } from "../actions"; +let setQuestionId = (_: string) => {}; + type ThemeStylingProps = { product: TProduct; environmentId: string; colors: string[]; + isUnsplashConfigured: boolean; }; -export const ThemeStyling = ({ product, environmentId, colors }: ThemeStylingProps) => { +export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigured }: ThemeStylingProps) => { const router = useRouter(); const [localProduct, setLocalProduct] = useState(product); - const [previewSurveyType, setPreviewSurveyType] = useState<"link" | "web">("link"); + const [previewSurveyType, setPreviewSurveyType] = useState("link"); const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false); const [styling, setStyling] = useState(product.styling); @@ -47,12 +50,10 @@ export const ThemeStyling = ({ product, environmentId, colors }: ThemeStylingPro })); }; - const [activeQuestionId, setActiveQuestionId] = useState(null); - const [styledPreviewSurvey, setStyledPreviewSurvey] = useState(PREVIEW_SURVEY); useEffect(() => { - setActiveQuestionId(PREVIEW_SURVEY.questions[0].id); + setQuestionId(PREVIEW_SURVEY.questions[0].id); }, []); useEffect(() => { @@ -211,6 +212,7 @@ export const ThemeStyling = ({ product, environmentId, colors }: ThemeStylingPro colors={colors} key={styling.background?.bg} hideCheckmark + isUnsplashConfigured={isUnsplashConfigured} />
@@ -234,8 +236,7 @@ export const ThemeStyling = ({ product, environmentId, colors }: ThemeStylingPro
void; - activeQuestionId?: string | null; + setQuestionId: (_: string) => void; product: TProduct; - previewType: "link" | "web"; - setPreviewType: (type: "link" | "web") => void; + previewType: TSurveyType; + setPreviewType: (type: TSurveyType) => void; } const previewParentContainerVariant: Variants = { @@ -49,12 +47,11 @@ const previewParentContainerVariant: Variants = { }; export const ThemeStylingPreviewSurvey = ({ - setActiveQuestionId, - activeQuestionId, survey, product, previewType, setPreviewType, + setQuestionId, }: ThemeStylingPreviewSurveyProps) => { const [isFullScreenPreview] = useState(false); const [previewPosition] = useState("relative"); @@ -99,17 +96,30 @@ export const ThemeStylingPreviewSurvey = ({ }; const { placement: surveyPlacement } = productOverwrites || {}; + const { darkOverlay: surveyDarkOverlay } = productOverwrites || {}; + const { clickOutsideClose: surveyClickOutsideClose } = productOverwrites || {}; const placement = surveyPlacement || product.placement; + const darkOverlay = surveyDarkOverlay ?? product.darkOverlay; + const clickOutsideClose = surveyClickOutsideClose ?? product.clickOutsideClose; const highlightBorderColor = product.styling.highlightBorderColor?.light; function resetQuestionProgress() { - setActiveQuestionId(survey?.questions[0]?.id); + setQuestionId(survey?.questions[0]?.id); } const onFileUpload = async (file: File) => file.name; + const isAppSurvey = previewType === "app" || previewType === "website"; + + const scrollToEditLogoSection = () => { + const editLogoSection = document.getElementById("edit-logo"); + if (editLogoSection) { + editLogoSection.scrollIntoView({ behavior: "smooth" }); + } + }; + return (
-

{previewType === "web" ? "Your web app" : "Preview"}

+

{isAppSurvey ? "Your web app" : "Preview"}

- +
- {previewType === "web" ? ( + {isAppSurvey ? ( void) => { + setQuestionId = f; + }} /> ) : ( - {!product.styling?.isLogoHidden && product.logo?.url && ( -
+ {!product.styling?.isLogoHidden && ( +
)} @@ -175,14 +188,15 @@ export const ThemeStylingPreviewSurvey = ({ className={`${product.logo?.url && !product.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md rounded-lg p-4`}> void) => { + setQuestionId = f; + }} />
@@ -199,23 +213,11 @@ export const ThemeStylingPreviewSurvey = ({
setPreviewType("web")}> - In-App survey + className={`${isAppSurvey ? "rounded-full bg-slate-200" : ""} cursor-pointer px-3 py-1 text-sm`} + onClick={() => setPreviewType("app")}> + App survey
); }; - -const ResetProgressButton = ({ resetQuestionProgress }: { resetQuestionProgress: () => void }) => { - return ( - - ); -}; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx index a7a6dafc1c..916bc3361e 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/page.tsx @@ -6,7 +6,7 @@ import { getRemoveLinkBrandingPermission, } from "@formbricks/ee/lib/service"; import { authOptions } from "@formbricks/lib/authOptions"; -import { SURVEY_BG_COLORS } from "@formbricks/lib/constants"; +import { SURVEY_BG_COLORS, UNSPLASH_ACCESS_KEY } from "@formbricks/lib/constants"; import { getMembershipByUserIdTeamId } from "@formbricks/lib/membership/service"; import { getAccessFlags } from "@formbricks/lib/membership/utils"; import { getProductByEnvironmentId } from "@formbricks/lib/product/service"; @@ -53,7 +53,12 @@ export default async function ProfileSettingsPage({ params }: { params: { enviro title="Theme" className="max-w-7xl" description="Create a style theme for all surveys. You can enable custom styling for each survey."> - + {" "} diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/actions.ts b/apps/web/app/(app)/environments/[environmentId]/settings/members/actions.ts index 7dab97c425..477a5905e9 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/actions.ts +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/actions.ts @@ -2,6 +2,7 @@ import { getServerSession } from "next-auth"; +import { sendInviteMemberEmail } from "@formbricks/email"; import { hasTeamAuthority } from "@formbricks/lib/auth"; import { authOptions } from "@formbricks/lib/authOptions"; import { INVITE_DISABLED } from "@formbricks/lib/constants"; @@ -109,8 +110,36 @@ export const createInviteTokenAction = async (inviteId: string) => { return { inviteToken: encodeURIComponent(inviteToken) }; }; -export const resendInviteAction = async (inviteId: string) => { - return await resendInvite(inviteId); +export const resendInviteAction = async (inviteId: string, teamId: string) => { + const session = await getServerSession(authOptions); + + if (!session) { + throw new AuthenticationError("Not authenticated"); + } + + const isUserAuthorized = await hasTeamAuthority(session.user.id, teamId); + + if (INVITE_DISABLED) { + throw new AuthenticationError("Invite disabled"); + } + + if (!isUserAuthorized) { + throw new AuthenticationError("Not authorized"); + } + + const { hasCreateOrUpdateMembersAccess } = await verifyUserRoleAccess(teamId, session.user.id); + if (!hasCreateOrUpdateMembersAccess) { + throw new AuthenticationError("Not authorized"); + } + const invite = await getInvite(inviteId); + + const updatedInvite = await resendInvite(inviteId); + await sendInviteMemberEmail( + inviteId, + updatedInvite.email, + invite?.creator.name ?? "", + updatedInvite.name ?? "" + ); }; export const inviteUserAction = async ( @@ -150,6 +179,10 @@ export const inviteUserAction = async ( }, }); + if (invite) { + await sendInviteMemberEmail(invite.id, email, session.user.name ?? "", name ?? "", false); + } + return invite; }; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx index bacf738d7a..763f9e3c7b 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx @@ -1,24 +1,20 @@ "use client"; -import { useForm } from "react-hook-form"; +import { ModalWithTabs } from "@formbricks/ui/ModalWithTabs"; -import { AddMemberRole } from "@formbricks/ee/RoleManagement/components/AddMemberRole"; -import { Button } from "@formbricks/ui/Button"; -import { Input } from "@formbricks/ui/Input"; -import { Label } from "@formbricks/ui/Label"; -import { Modal } from "@formbricks/ui/Modal"; -import { UpgradePlanNotice } from "@formbricks/ui/UpgradePlanNotice"; +import { BulkInviteTab } from "./BulkInviteTab"; +import { IndividualInviteTab } from "./IndividualInviteTab"; -enum MembershipRole { +export enum MembershipRole { Admin = "admin", Editor = "editor", Developer = "developer", Viewer = "viewer", } -interface MemberModalProps { +interface AddMemberModalProps { open: boolean; setOpen: (v: boolean) => void; - onSubmit: (data: { name: string; email: string; role: MembershipRole }) => void; + onSubmit: (data: { name: string; email: string; role: MembershipRole }[]) => void; canDoRoleManagement: boolean; isFormbricksCloud: boolean; environmentId: string; @@ -31,87 +27,37 @@ export default function AddMemberModal({ canDoRoleManagement, isFormbricksCloud, environmentId, -}: MemberModalProps) { - const { register, getValues, handleSubmit, reset, control } = useForm<{ - name: string; - email: string; - role: MembershipRole; - }>(); - - const submitEventClass = async () => { - const data = getValues(); - data.role = data.role || MembershipRole.Admin; - onSubmit(data); - setOpen(false); - reset(); - }; +}: AddMemberModalProps) { + const tabs = [ + { + title: "Individual Invite", + children: ( + + ), + }, + { + title: "Bulk Invite", + children: ( + + ), + }, + ]; return ( - -
-
-
-
-
Invite Team Member
-
-
-
- -
-
-
- - value.trim() !== "" })} - /> -
-
- - -
-
- - {!canDoRoleManagement && - (isFormbricksCloud ? ( - - ) : ( - - ))} -
-
-
-
-
- - -
-
- -
- + <> + + ); } diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/BulkInviteTab.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/BulkInviteTab.tsx new file mode 100644 index 0000000000..479605e07b --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/BulkInviteTab.tsx @@ -0,0 +1,116 @@ +"use client"; + +import { UploadIcon, XIcon } from "lucide-react"; +import Link from "next/link"; +import Papa, { type ParseResult } from "papaparse"; +import { useRef, useState } from "react"; +import toast from "react-hot-toast"; + +import { ZInvitees } from "@formbricks/types/invites"; +import { Alert, AlertDescription } from "@formbricks/ui/Alert"; +import { Button } from "@formbricks/ui/Button"; + +import { MembershipRole } from "./AddMemberModal"; + +interface BulkInviteTabProps { + setOpen: (v: boolean) => void; + onSubmit: (data: { name: string; email: string; role: MembershipRole }[]) => void; + canDoRoleManagement: boolean; +} + +export const BulkInviteTab = ({ setOpen, onSubmit, canDoRoleManagement }: BulkInviteTabProps) => { + const fileInputRef = useRef(null); + const [csvFile, setCSVFile] = useState(); + + const onFileInputChange = (e: React.ChangeEvent) => { + if (!e.target.files?.length) { + return; + } + const file = e.target.files[0]; + setCSVFile(file); + }; + + const onImport = () => { + if (!csvFile) { + return; + } + Papa.parse(csvFile, { + skipEmptyLines: true, + comments: "Full Name,Email Address,Role", + complete: (results: ParseResult) => { + const members = results.data.map((csv) => { + const [name, email, role] = csv; + + return { + name: name.trim(), + email: email.trim(), + role: canDoRoleManagement ? (role.trim().toLowerCase() as MembershipRole) : MembershipRole.Admin, + }; + }); + try { + ZInvitees.parse(members); + onSubmit(members); + } catch (err) { + console.error(err.message); + toast.error("Please check the CSV file and make sure it is according to our format"); + } + setOpen(false); + }, + }); + }; + + const removeFile = (event: React.MouseEvent) => { + event.stopPropagation(); + setCSVFile(undefined); + // Reset the file input value to ensure it can detect the same file if re-selected + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + + return ( +
+
fileInputRef.current?.click()}> + {csvFile ? ( + + ) : ( + + )} + {csvFile ? csvFile.name : "Click here to upload"} + +
+
+ {!canDoRoleManagement && ( + + +

+ Warning: Please note that on the Free Plan, all team members are + automatically assigned the "Admin" role regardless of the role specified in the CSV + file. +

+ + + )} +
+
+
+ + + + +
+
+
+ ); +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx index f09324bbea..70956d3b2a 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx @@ -87,7 +87,7 @@ export default function MemberActions({ team, member, invite, showDeleteButton } try { if (!invite) return; - await resendInviteAction(invite.id); + await resendInviteAction(invite.id, team.id); toast.success("Invitation sent once more."); } catch (err) { toast.error(`Error: ${err.message}`); diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx index d37c135218..20e8fd5304 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx @@ -10,7 +10,7 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import toast from "react-hot-toast"; -import { TMembershipRole } from "@formbricks/types/memberships"; +import { TInvitee } from "@formbricks/types/invites"; import { TTeam } from "@formbricks/types/teams"; import { Button } from "@formbricks/ui/Button"; import CreateTeamModal from "@formbricks/ui/CreateTeamModal"; @@ -57,9 +57,13 @@ export default function TeamActions({ } }; - const handleAddMember = async (data: { name: string; email: string; role: TMembershipRole }) => { + const handleAddMembers = async (data: TInvitee[]) => { try { - await inviteUserAction(team.id, data.email, data.name, data.role); + await Promise.all( + data.map(async ({ name, email, role }) => { + await inviteUserAction(team.id, email, name, role); + }) + ); toast.success("Member invited successfully"); } catch (err) { toast.error(`Error: ${err.message}`); @@ -102,7 +106,7 @@ export default function TeamActions({ ({ + } = useForm({ defaultValues: { name: team.name, }, @@ -47,7 +47,7 @@ export default function EditTeamName({ team, membershipRole }: TEditTeamNameProp const currentTeamName = teamName?.trim().toLowerCase() ?? ""; const previousTeamName = team?.name?.trim().toLowerCase() ?? ""; - const handleUpdateTeamName: SubmitHandler = async (data) => { + const handleUpdateTeamName: SubmitHandler = async (data) => { try { data.name = data.name.trim(); setIsUpdatingTeam(true); diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/IndividualInviteTab.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/IndividualInviteTab.tsx new file mode 100644 index 0000000000..5b43ed94e6 --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/IndividualInviteTab.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { useForm } from "react-hook-form"; + +import { AddMemberRole } from "@formbricks/ee/RoleManagement/components/AddMemberRole"; +import { Button } from "@formbricks/ui/Button"; +import { Input } from "@formbricks/ui/Input"; +import { Label } from "@formbricks/ui/Label"; +import { UpgradePlanNotice } from "@formbricks/ui/UpgradePlanNotice"; + +import { MembershipRole } from "./AddMemberModal"; + +interface IndividualInviteTabProps { + setOpen: (v: boolean) => void; + onSubmit: (data: { name: string; email: string; role: MembershipRole }[]) => void; + canDoRoleManagement: boolean; + isFormbricksCloud: boolean; + environmentId: string; +} +export const IndividualInviteTab = ({ + setOpen, + onSubmit, + canDoRoleManagement, + isFormbricksCloud, + environmentId, +}: IndividualInviteTabProps) => { + const { register, getValues, handleSubmit, reset, control } = useForm<{ + name: string; + email: string; + role: MembershipRole; + }>(); + + const submitEventClass = async () => { + const data = getValues(); + data.role = data.role || MembershipRole.Admin; + onSubmit([data]); + setOpen(false); + reset(); + }; + return ( +
+
+
+
+ + value.trim() !== "" })} + /> +
+
+ + +
+
+ + {!canDoRoleManagement && + (isFormbricksCloud ? ( + + ) : ( + + ))} +
+
+
+
+
+ + +
+
+
+ ); +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/notifications/components/EditAlerts.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/notifications/components/EditAlerts.tsx index cdf721d141..98a4226425 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/notifications/components/EditAlerts.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/notifications/components/EditAlerts.tsx @@ -52,7 +52,7 @@ export default function EditAlerts({
- Every Response + Every Response
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/profile/components/EditAvatar.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/profile/components/EditAvatar.tsx index 72d839b2ad..04598f03bc 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/profile/components/EditAvatar.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/profile/components/EditAvatar.tsx @@ -52,6 +52,9 @@ export function EditAvatar({ session, environmentId }: { session: Session; envir toast.error("Avatar update failed. Please try again."); } finally { setIsLoading(false); + if (inputRef.current) { + inputRef.current.value = ""; + } } }; diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/setup/components/SetupInstructions.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/setup/components/SetupInstructions.tsx index f22c26e4a9..28efc6eab8 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/setup/components/SetupInstructions.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/setup/components/SetupInstructions.tsx @@ -31,8 +31,10 @@ export default function SetupInstructions({
{activeTab === "npm" ? (
-

Step 1: NPM Install

- npm install @formbricks/js --save +

Step 1: Install with NPM or Yarn

+ npm install @formbricks/js +

or

+ yarn add @formbricks/js

Step 2: Initialize widget

Import Formbricks and initialize the widget in your Component (e.g. App.tsx):

{`import formbricks from "@formbricks/js"; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys.tsx index 6da21123ed..d39d6f8a97 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys.tsx @@ -4,11 +4,12 @@ import Link from "next/link"; import { TEnvironment } from "@formbricks/types/environment"; import { Button } from "@formbricks/ui/Button"; -interface TEmptyInAppSurveysProps { +interface TEmptyAppSurveysProps { environment: TEnvironment; + surveyType?: "app" | "website"; } -export const EmptyInAppSurveys = ({ environment }: TEmptyInAppSurveysProps) => { +export const EmptyAppSurveys = ({ environment, surveyType = "app" }: TEmptyAppSurveysProps) => { return (
@@ -18,7 +19,9 @@ export const EmptyInAppSurveys = ({ environment }: TEmptyInAppSurveysProps) => {

You're not plugged in yet!

-

Connect your app with Formbricks to run in-app surveys.

+

+ Connect your {surveyType} with Formbricks to run {surveyType} surveys. +

- {getPersonIdentifier(response.person)} + {getPersonIdentifier(response.person, response.personAttributes)}

) : ( diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx index 4c974080fe..12316b7b1d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader.tsx @@ -6,9 +6,11 @@ import { TSurveyQuestionSummary } from "@formbricks/types/surveys"; interface HeadProps { questionSummary: TSurveyQuestionSummary; + showResponses?: boolean; + insights?: JSX.Element; } -export const QuestionSummaryHeader = ({ questionSummary }: HeadProps) => { +export const QuestionSummaryHeader = ({ questionSummary, insights, showResponses = true }: HeadProps) => { const questionType = questionTypes.find((type) => type.id === questionSummary.question.type); return ( @@ -23,10 +25,13 @@ export const QuestionSummaryHeader = ({ questionSummary }: HeadProps) => { {questionType && } {questionType ? questionType.label : "Unknown Question Type"} Question
-
- - {`${questionSummary.responseCount} Responses`} -
+ {showResponses && ( +
+ + {`${questionSummary.responseCount} Responses`} +
+ )} + {insights} {!questionSummary.question.required && (
Optional
)} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx index 5bdc37fb5d..87c8dd500f 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx @@ -124,7 +124,7 @@ export const ShareEmbedSurvey = ({ survey, open, setOpen, webAppUrl, user }: Sha ))}
-
+
{activeId === "email" ? ( ) : activeId === "webpage" ? ( diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx index 4b53176ae1..92d7e6d22c 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx @@ -23,16 +23,18 @@ export const SuccessMessage = ({ environment, survey, webAppUrl, user }: Summary const [showLinkModal, setShowLinkModal] = useState(false); const [confetti, setConfetti] = useState(false); + const isAppSurvey = survey.type === "app" || survey.type === "website"; + useEffect(() => { const newSurveyParam = searchParams?.get("success"); if (newSurveyParam && survey && environment) { setConfetti(true); toast.success( - survey.type === "web" && !environment.widgetSetupCompleted + isAppSurvey && !environment.widgetSetupCompleted ? "Almost there! Install widget to start receiving responses." : "Congrats! Your survey is live.", { - icon: survey.type === "web" && !environment.widgetSetupCompleted ? "🤏" : "🎉", + icon: isAppSurvey && !environment.widgetSetupCompleted ? "🤏" : "🎉", duration: 5000, position: "bottom-right", } @@ -45,7 +47,7 @@ export const SuccessMessage = ({ environment, survey, webAppUrl, user }: Summary url.searchParams.delete("success"); window.history.replaceState({}, "", url.toString()); } - }, [environment, searchParams, survey]); + }, [environment, isAppSurvey, searchParams, survey]); return ( <> diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx index 76c2c94636..959eb7cb46 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx @@ -25,8 +25,8 @@ export const SummaryDropOffs = ({ dropOff }: SummaryDropOffsProps) => {
-
Views
-
Drop Offs
+
Impressions
+
Drop-Offs
{dropOff.map((quesDropOff) => (
{
{quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
-
{quesDropOff.views}
+
{quesDropOff.impressions}
- {quesDropOff.dropOffCount} + {quesDropOff.dropOffCount} ({Math.round(quesDropOff.dropOffPercentage)}%)
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx index 729503bf6c..502b18e29c 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx @@ -1,4 +1,4 @@ -import { EmptyInAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys"; +import { EmptyAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys"; import { CTASummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CTASummary"; import { CalSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary"; import { ConsentSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary"; @@ -40,8 +40,10 @@ export const SummaryList = ({ }: SummaryListProps) => { return (
- {survey.type === "web" && responseCount === 0 && !environment.widgetSetupCompleted ? ( - + {(survey.type === "app" || survey.type === "website") && + responseCount === 0 && + !environment.widgetSetupCompleted ? ( + ) : fetchingSummary ? ( ) : responseCount === 0 ? ( diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx index 748c661190..31fc0edfc9 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx @@ -1,8 +1,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { timeSinceConditionally } from "@formbricks/lib/time"; -import { TSurveySummary } from "@formbricks/types/surveys"; -import { TSurvey } from "@formbricks/types/surveys"; +import { TSurvey, TSurveySummary } from "@formbricks/types/surveys"; import { Button } from "@formbricks/ui/Button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip"; @@ -71,7 +70,7 @@ export const SummaryMetadata = ({
- : displayCount} tooltipText="Number of times the survey has been viewed." @@ -89,7 +88,7 @@ export const SummaryMetadata = ({ tooltipText="Number of times the survey has been completed." /> - : dropOffCount} tooltipText="Number of times the survey has been started but not completed." @@ -110,7 +109,7 @@ export const SummaryMetadata = ({ className="w-max self-start" EndIcon={showDropOffs ? ChevronDownIcon : ChevronUpIcon} onClick={() => setShowDropOffs(!showDropOffs)}> - Analyze Drop Offs + Analyze Drop-Offs
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx index e278a7d6d9..1c51441ef0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx @@ -79,7 +79,9 @@ const SummaryPage = ({ const filters = useMemo( () => getFormattedFilters(survey, selectedFilter, dateRange), - [survey, selectedFilter, dateRange] + + // eslint-disable-next-line react-hooks/exhaustive-deps + [selectedFilter, dateRange] ); useEffect(() => { @@ -93,10 +95,6 @@ const SummaryPage = ({ updatedResponseCount = await getResponseCountAction(surveyId, filters); } setResponseCount(updatedResponseCount); - if (updatedResponseCount === 0) { - setSurveySummary(initialSurveySummary); - return; - } let updatedSurveySummary; if (isSharingPage) { diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx index 5448b29e6a..03ff9a95f0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx @@ -9,7 +9,7 @@ import { Button } from "@formbricks/ui/Button"; import CodeBlock from "@formbricks/ui/CodeBlock"; import LoadingSpinner from "@formbricks/ui/LoadingSpinner"; -import { getEmailHtmlAction, sendEmailAction } from "../../actions"; +import { getEmailHtmlAction, sendEmbedSurveyPreviewEmailAction } from "../../actions"; interface EmailTabProps { surveyId: string; @@ -35,17 +35,11 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) { const emailHtml = await getEmailHtmlAction(surveyId); setEmailHtmlPreview(emailHtml); } - }); + }, [surveyId]); - const subject = "Formbricks Email Survey Preview"; - - const sendPreviewEmail = async (html) => { + const sendPreviewEmail = async () => { try { - await sendEmailAction({ - html, - subject, - to: email, - }); + await sendEmbedSurveyPreviewEmailAction(surveyId); toast.success("Email sent!"); } catch (err) { if (err instanceof AuthenticationError) { @@ -78,7 +72,7 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) { variant="secondary" title="send preview email" aria-label="send preview email" - onClick={() => sendPreviewEmail(emailHtmlPreview)} + onClick={() => sendPreviewEmail()} EndIcon={MailIcon} className="shrink-0"> Send Preview @@ -113,9 +107,11 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
-
+
To : {email || "user@mail.com"}
-
Subject : {subject}
+
+ Subject : Formbricks Email Survey Preview +
{emailHtml ? (
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx index 07f51ee4be..a60d6e0986 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx @@ -61,7 +61,7 @@ export default function LinkTab({ survey, webAppUrl, surveyUrl, setSurveyUrl }: ))}
-
+

Survey link got too long? Shorten it!

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx index 1cc0a094f3..774f425c55 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx @@ -17,7 +17,7 @@ export default function WebpageTab({ surveyUrl }) { return (
-
+
)} - {(!surveyType || surveyType === "web") && ( + {(!surveyType || isAppSurvey) && (

Add highlight border

- +

Add an outer border to your survey card.

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx index 555ae68dae..db20d72ef8 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditThankYouCard.tsx @@ -109,6 +109,7 @@ export default function EditThankYouCard({
TSurvey)) => void; + setLocalSurvey: (survey: TSurvey | ((TSurvey: TSurvey) => TSurvey)) => void; environment: TEnvironment; } @@ -39,14 +40,50 @@ export default function HowToSendCard({ localSurvey, setLocalSurvey, environment enabled: type === "link" ? true : prevSurvey.thankYouCard.enabled, }, })); + + // if the type is "app" and the local survey does not already have a segment, we create a new temporary segment + if (type === "app" && !localSurvey.segment) { + const tempSegment: TSegment = { + id: "temp", + isPrivate: true, + title: localSurvey.id, + environmentId: environment.id, + surveys: [localSurvey.id], + filters: [], + createdAt: new Date(), + updatedAt: new Date(), + description: "", + }; + + setLocalSurvey((prevSurvey) => ({ + ...prevSurvey, + segment: tempSegment, + })); + } + + // if the type is anything other than "app" and the local survey has a temporary segment, we remove it + if (type !== "app" && localSurvey.segment?.id === "temp") { + setLocalSurvey((prevSurvey) => ({ + ...prevSurvey, + segment: null, + })); + } }; const options = [ { - id: "web", - name: "In-App Survey", + id: "website", + name: "Website Survey", + icon: EarthIcon, + description: "Run targeted surveys on public websites.", + comingSoon: false, + alert: !widgetSetupCompleted, + }, + { + id: "app", + name: "App Survey", icon: MonitorIcon, - description: "Embed a survey in your web app to collect responses.", + description: "Embed a survey in your web app to collect responses with user identification.", comingSoon: false, alert: !widgetSetupCompleted, }, @@ -97,7 +134,7 @@ export default function HowToSendCard({ localSurvey, setLocalSurvey, environment
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx index 3446eee4ad..d724eaff13 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx @@ -1,12 +1,16 @@ import { FileInput } from "@formbricks/ui/FileInput"; -interface ImageSurveyBgProps { +interface UploadImageSurveyBgProps { environmentId: string; handleBgChange: (url: string, bgType: string) => void; background: string; } -export const ImageSurveyBg = ({ environmentId, handleBgChange, background }: ImageSurveyBgProps) => { +export const UploadImageSurveyBg = ({ + environmentId, + handleBgChange, + background, +}: UploadImageSurveyBgProps) => { return (
@@ -16,9 +20,9 @@ export const ImageSurveyBg = ({ environmentId, handleBgChange, background }: Ima environmentId={environmentId} onFileUpload={(url: string[]) => { if (url.length > 0) { - handleBgChange(url[0], "image"); + handleBgChange(url[0], "upload"); } else { - handleBgChange("", "image"); + handleBgChange("", "upload"); } }} fileUrl={background} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/InlineTriggers.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/InlineTriggers.tsx index 967a14b5c4..06fd5a90e1 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/InlineTriggers.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/InlineTriggers.tsx @@ -1,4 +1,4 @@ -import { MatchType } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/lib/testURLmatch"; +import { MatchType } from "@/app/(app)/environments/[environmentId]/actions/lib/testURLmatch"; import { HelpCircleIcon } from "lucide-react"; import React, { useCallback, useEffect, useState } from "react"; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx index eefce45349..c0d5354750 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx @@ -5,6 +5,7 @@ import { toast } from "react-hot-toast"; import { BsArrowDown, BsArrowReturnRight } from "react-icons/bs"; import { getLocalizedValue } from "@formbricks/lib/i18n/utils"; +import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone"; import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall"; import { TSurvey, diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx index ae41854d92..beac91fcf1 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MatrixQuestionForm.tsx @@ -3,8 +3,9 @@ import { isLabelValidForAllLanguages } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/lib/validation"; import { PlusIcon, TrashIcon } from "lucide-react"; import { useState } from "react"; +import { toast } from "react-hot-toast"; -import { createI18nString, extractLanguageCodes } from "@formbricks/lib/i18n/utils"; +import { createI18nString, extractLanguageCodes, getLocalizedValue } from "@formbricks/lib/i18n/utils"; import { TI18nString, TSurvey, TSurveyMatrixQuestion } from "@formbricks/types/surveys"; import { Button } from "@formbricks/ui/Button"; import { Label } from "@formbricks/ui/Label"; @@ -78,6 +79,25 @@ export const MatrixQuestionForm = ({ } }; + const checkForDuplicateLabels = () => { + const rowLabels = question.rows + .map((row) => getLocalizedValue(row, selectedLanguageCode)) + .filter((label) => label.trim() !== ""); + + const columnLabels = question.columns + .map((column) => getLocalizedValue(column, selectedLanguageCode)) + .filter((label) => label.trim() !== ""); + + const duplicateRowLabels = rowLabels.filter((label, index, array) => array.indexOf(label) !== index); + const duplicateColumnLabels = columnLabels.filter( + (label, index, array) => array.indexOf(label) !== index + ); + + if (duplicateRowLabels.length > 0 || duplicateColumnLabels.length > 0) { + toast.error("Duplicate row or column labels"); + } + }; + return ( ))}
@@ -182,6 +204,7 @@ export const MatrixQuestionForm = ({ updateMatrixLabel={updateMatrixLabel} selectedLanguageCode={selectedLanguageCode} setSelectedLanguageCode={setSelectedLanguageCode} + onBlur={checkForDuplicateLabels} isInvalid={ isInvalid && !isLabelValidForAllLanguages(question.columns[index], localSurvey.languages) } @@ -195,14 +218,15 @@ export const MatrixQuestionForm = ({
))}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx index 960ec1c31f..61412159f8 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx @@ -97,7 +97,9 @@ export const MultipleChoiceSingleForm = ({ question.logic?.forEach((logic) => { let newL: string | string[] | undefined = logic.value; if (Array.isArray(logic.value)) { - newL = logic.value.map((value) => (value === oldLabel ? newLabel : value)); + newL = logic.value.map((value) => + value === getLocalizedValue(oldLabel, selectedLanguageCode) ? newLabel : value + ); } else { newL = logic.value === getLocalizedValue(oldLabel, selectedLanguageCode) ? newLabel : logic.value; } diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx index 2a734e6c47..953ce5c724 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/Placement.tsx @@ -32,6 +32,8 @@ export default function Placement({ setClickOutsideClose, clickOutsideClose, }: TPlacementProps) { + const overlayStyle = + currentPlacement === "center" && overlay === "dark" ? "bg-gray-700/80" : "bg-slate-200"; return ( <>
@@ -39,18 +41,21 @@ export default function Placement({ {placements.map((placement) => (
-
))} -
+
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx index b47d201fa5..04aa16e814 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs.tsx @@ -4,11 +4,11 @@ import { useMemo } from "react"; import { cn } from "@formbricks/lib/cn"; import { TSurveyEditorTabs } from "@formbricks/types/surveys"; -type Tab = { +interface Tab { id: TSurveyEditorTabs; label: string; icon: JSX.Element; -}; +} const tabs: Tab[] = [ { @@ -34,11 +34,11 @@ interface QuestionsAudienceTabsProps { isStylingTabVisible?: boolean; } -export default function QuestionsAudienceTabs({ +export const QuestionsAudienceTabs = ({ activeId, setActiveId, isStylingTabVisible, -}: QuestionsAudienceTabsProps) { +}: QuestionsAudienceTabsProps) => { const tabsComputed = useMemo(() => { if (isStylingTabVisible) { return tabs; @@ -68,4 +68,4 @@ export default function QuestionsAudienceTabs({
); -} +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx index 7004a0af4f..5bb877e998 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx @@ -13,6 +13,7 @@ import toast from "react-hot-toast"; import { MultiLanguageCard } from "@formbricks/ee/multiLanguage/components/MultiLanguageCard"; import { extractLanguageCodes, getLocalizedValue, translateQuestion } from "@formbricks/lib/i18n/utils"; +import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone"; import { checkForEmptyFallBackValue, extractRecallInfo } from "@formbricks/lib/utils/recall"; import { TProduct } from "@formbricks/types/product"; import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys"; @@ -37,7 +38,7 @@ interface QuestionsViewProps { isFormbricksCloud: boolean; } -export default function QuestionsView({ +export const QuestionsView = ({ activeQuestionId, setActiveQuestionId, localSurvey, @@ -49,7 +50,7 @@ export default function QuestionsView({ selectedLanguageCode, isMultiLanguageAllowed, isFormbricksCloud, -}: QuestionsViewProps) { +}: QuestionsViewProps) => { const internalQuestionIdMap = useMemo(() => { return localSurvey.questions.reduce((acc, question) => { acc[question.id] = createId(); @@ -117,10 +118,31 @@ export default function QuestionsView({ }; if ("backButtonLabel" in updatedAttributes) { - updatedSurvey.questions.forEach((question) => { - question.backButtonLabel = updatedAttributes.backButtonLabel; - }); - setbackButtonLabel(updatedAttributes.backButtonLabel); + const backButtonLabel = updatedSurvey.questions[questionIdx].backButtonLabel; + // If the value of backbuttonLabel is equal to {default:""}, then delete backButtonLabel key + if ( + backButtonLabel && + Object.keys(backButtonLabel).length === 1 && + backButtonLabel["default"].trim() === "" + ) { + delete updatedSurvey.questions[questionIdx].backButtonLabel; + } else { + updatedSurvey.questions.forEach((question) => { + question.backButtonLabel = updatedAttributes.backButtonLabel; + }); + setbackButtonLabel(updatedAttributes.backButtonLabel); + } + } + // If the value of buttonLabel is equal to {default:""}, then delete buttonLabel key + if ("buttonLabel" in updatedAttributes) { + const currentButtonLabel = updatedSurvey.questions[questionIdx].buttonLabel; + if ( + currentButtonLabel && + Object.keys(currentButtonLabel).length === 1 && + currentButtonLabel["default"].trim() === "" + ) { + delete updatedSurvey.questions[questionIdx].buttonLabel; + } } setLocalSurvey(updatedSurvey); validateSurveyQuestion(updatedSurvey.questions[questionIdx]); @@ -362,4 +384,4 @@ export default function QuestionsView({
); -} +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecontactOptionsCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecontactOptionsCard.tsx index 12a2a2269b..311615681a 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecontactOptionsCard.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RecontactOptionsCard.tsx @@ -127,7 +127,7 @@ export default function RecontactOptionsCard({ id={option.name} className="aria-checked:border-brand-dark mx-5 disabled:border-slate-400 aria-checked:border-2" /> -
+

{option.name}

{option.description}

@@ -188,7 +188,7 @@ export default function RecontactOptionsCard({ id="newDays" className="aria-checked:border-brand-dark mx-4 disabled:border-slate-400 aria-checked:border-2" /> -
+

Wait { + const isWebSurvey = localSurvey.type === "website" || localSurvey.type === "app"; + return (

- {localSurvey.type === "web" ? ( + {localSurvey.type === "app" ? ( !isUserTargetingAllowed ? ( - {localSurvey.type === "web" && ( + {isWebSurvey && ( ); -} +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx index 5dc4a79d97..73c1fba266 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx @@ -23,6 +23,7 @@ type StylingViewProps = { setStyling: React.Dispatch>; localStylingChanges: TSurveyStyling | null; setLocalStylingChanges: React.Dispatch>; + isUnsplashConfigured: boolean; }; export const StylingView = ({ @@ -35,6 +36,7 @@ export const StylingView = ({ styling, localStylingChanges, setLocalStylingChanges, + isUnsplashConfigured, }: StylingViewProps) => { const [overwriteThemeStyling, setOverwriteThemeStyling] = useState( localSurvey?.styling?.overwriteThemeStyling ?? false @@ -162,6 +164,7 @@ export const StylingView = ({ environmentId={environment.id} colors={colors} disabled={!overwriteThemeStyling} + isUnsplashConfigured={isUnsplashConfigured} /> )} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx index 938f8faef6..f31da52d1c 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx @@ -6,7 +6,8 @@ import { TabBar } from "@formbricks/ui/TabBar"; import { AnimatedSurveyBg } from "./AnimatedSurveyBg"; import { ColorSurveyBg } from "./ColorSurveyBg"; -import { ImageSurveyBg } from "./ImageSurveyBg"; +import { UploadImageSurveyBg } from "./ImageSurveyBg"; +import { ImageFromUnsplashSurveyBg } from "./UnsplashImages"; interface SurveyBgSelectorTabProps { handleBgChange: (bg: string, bgType: string) => void; @@ -14,11 +15,13 @@ interface SurveyBgSelectorTabProps { bgType: string | null | undefined; environmentId: string; styling: TSurveyStyling | TProductStyling | null; + isUnsplashConfigured: boolean; } const tabs = [ { id: "color", label: "Color" }, { id: "animation", label: "Animation" }, + { id: "upload", label: "Upload" }, { id: "image", label: "Image" }, ]; @@ -28,52 +31,59 @@ export default function SurveyBgSelectorTab({ colors, bgType, environmentId, + isUnsplashConfigured, }: SurveyBgSelectorTabProps) { const [activeTab, setActiveTab] = useState(bgType || "color"); - const { background } = styling ?? {}; + const bgUrl = styling?.background?.bg || ""; - const [colorBackground, setColorBackground] = useState(background?.bg); - const [animationBackground, setAnimationBackground] = useState(background?.bg); - const [imageBackground, setImageBackground] = useState(background?.bg); + const [colorBackground, setColorBackground] = useState(bgUrl); + const [animationBackground, setAnimationBackground] = useState(bgUrl); + const [uploadBackground, setUploadBackground] = useState(bgUrl); useEffect(() => { - const bgType = background?.bgType; - if (bgType === "color") { - setColorBackground(background?.bg); + setColorBackground(bgUrl); setAnimationBackground(""); - setImageBackground(""); + setUploadBackground(""); } if (bgType === "animation") { - setAnimationBackground(background?.bg); + setAnimationBackground(bgUrl); setColorBackground(""); - setImageBackground(""); + setUploadBackground(""); } - if (bgType === "image") { - setImageBackground(background?.bg); + if (isUnsplashConfigured && bgType === "image") { + setColorBackground(""); + setAnimationBackground(""); + setUploadBackground(""); + } + + if (bgType === "upload") { + setUploadBackground(bgUrl); setColorBackground(""); setAnimationBackground(""); } - }, [background?.bg, background?.bgType]); + }, [bgUrl, bgType, isUnsplashConfigured]); const renderContent = () => { switch (activeTab) { case "color": - return ( - - ); + return ; case "animation": - return ; - case "image": + return ; + case "upload": return ( - ); + case "image": + if (isUnsplashConfigured) { + return ; + } default: return null; } @@ -82,7 +92,7 @@ export default function SurveyBgSelectorTab({ return (
tab.id !== "image" || isUnsplashConfigured)} activeId={activeTab} setActiveId={setActiveTab} tabStyle="button" diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx index 3ffc6656df..4dc9b91e5d 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx @@ -2,11 +2,16 @@ import { refetchProduct } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/actions"; import { LoadingSkeleton } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LoadingSkeleton"; +import { QuestionsAudienceTabs } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsStylingSettingsTabs"; +import { QuestionsView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView"; +import { SettingsView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView"; import { StylingView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView"; +import { SurveyMenuBar } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar"; +import { PreviewSurvey } from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey"; import { useCallback, useEffect, useRef, useState } from "react"; -import { createSegmentAction } from "@formbricks/ee/advancedTargeting/lib/actions"; import { extractLanguageCodes, getEnabledLanguages } from "@formbricks/lib/i18n/utils"; +import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone"; import { useDocumentVisibility } from "@formbricks/lib/useDocumentVisibility"; import { TActionClass } from "@formbricks/types/actionClasses"; import { TAttributeClass } from "@formbricks/types/attributeClasses"; @@ -16,12 +21,6 @@ import { TProduct } from "@formbricks/types/product"; import { TSegment } from "@formbricks/types/segment"; import { TSurvey, TSurveyEditorTabs, TSurveyStyling } from "@formbricks/types/surveys"; -import PreviewSurvey from "../../../components/PreviewSurvey"; -import QuestionsAudienceTabs from "./QuestionsStylingSettingsTabs"; -import QuestionsView from "./QuestionsView"; -import SettingsView from "./SettingsView"; -import SurveyMenuBar from "./SurveyMenuBar"; - interface SurveyEditorProps { survey: TSurvey; product: TProduct; @@ -35,6 +34,7 @@ interface SurveyEditorProps { isUserTargetingAllowed?: boolean; isMultiLanguageAllowed?: boolean; isFormbricksCloud: boolean; + isUnsplashConfigured: boolean; } export default function SurveyEditor({ @@ -50,6 +50,7 @@ export default function SurveyEditor({ isMultiLanguageAllowed, isUserTargetingAllowed = false, isFormbricksCloud, + isUnsplashConfigured, }: SurveyEditorProps): JSX.Element { const [activeView, setActiveView] = useState("questions"); const [activeQuestionId, setActiveQuestionId] = useState(null); @@ -62,8 +63,6 @@ export default function SurveyEditor({ const [styling, setStyling] = useState(localSurvey?.styling); const [localStylingChanges, setLocalStylingChanges] = useState(null); - const createdSegmentRef = useRef(false); - const fetchLatestProduct = useCallback(async () => { const latestProduct = await refetchProduct(localProduct.id); if (latestProduct) { @@ -114,39 +113,6 @@ export default function SurveyEditor({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [localSurvey?.type, survey?.questions]); - const handleCreateSegment = async () => { - if (!localSurvey) return; - - try { - const createdSegment = await createSegmentAction({ - title: localSurvey.id, - description: "", - environmentId: environment.id, - surveyId: localSurvey.id, - filters: [], - isPrivate: true, - }); - - const localSurveyClone = structuredClone(localSurvey); - localSurveyClone.segment = createdSegment; - setLocalSurvey(localSurveyClone); - } catch (err) { - // set the ref to false to retry during the next render - createdSegmentRef.current = false; - } - }; - - useEffect(() => { - if (!localSurvey || localSurvey.type !== "web" || !!localSurvey.segment || createdSegmentRef.current) { - return; - } - - createdSegmentRef.current = true; - handleCreateSegment(); - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [localSurvey]); - useEffect(() => { if (!localSurvey?.languages) return; const enabledLanguageCodes = extractLanguageCodes(getEnabledLanguages(localSurvey.languages ?? [])); @@ -210,6 +176,7 @@ export default function SurveyEditor({ setStyling={setStyling} localStylingChanges={localStylingChanges} setLocalStylingChanges={setLocalStylingChanges} + isUnsplashConfigured={isUnsplashConfigured} /> )} @@ -232,11 +199,12 @@ export default function SurveyEditor({
- {localSurvey.status === "draft" && audiencePrompt && ( + {localSurvey.status !== "draft" && ( + + )} + {localSurvey.status === "draft" && audiencePrompt && !isLinkSurvey && ( )} - {localSurvey.status === "draft" && !audiencePrompt && ( + {/* Always display Publish button for link surveys for better CR */} + {localSurvey.status === "draft" && (!audiencePrompt || isLinkSurvey) && (
); -} +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx index 086faa1d4c..12d0b2a9de 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx @@ -8,6 +8,7 @@ import { useEffect, useMemo, useState } from "react"; import { toast } from "react-hot-toast"; import { cn } from "@formbricks/lib/cn"; +import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone"; import { isAdvancedSegment } from "@formbricks/lib/segment/utils"; import { TAttributeClass } from "@formbricks/types/attributeClasses"; import { TBaseFilter, TSegment, TSegmentCreateInput, TSegmentUpdateInput } from "@formbricks/types/segment"; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UnsplashImages.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UnsplashImages.tsx new file mode 100644 index 0000000000..67cdda29fe --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UnsplashImages.tsx @@ -0,0 +1,234 @@ +"use client"; + +import { debounce } from "lodash"; +import { SearchIcon } from "lucide-react"; +import UnsplashImage from "next/image"; +import { useEffect, useRef, useState } from "react"; +import toast from "react-hot-toast"; + +import { TSurveyBackgroundBgType } from "@formbricks/types/surveys"; +import { Button } from "@formbricks/ui/Button"; +import { Input } from "@formbricks/ui/Input"; +import LoadingSpinner from "@formbricks/ui/LoadingSpinner"; + +import { getImagesFromUnsplashAction, triggerDownloadUnsplashImageAction } from "../actions"; + +interface ImageFromUnsplashSurveyBgProps { + handleBgChange: (url: string, bgType: TSurveyBackgroundBgType) => void; +} + +interface UnsplashImage { + id: string; + alt_description: string; + urls: { + regularWithAttribution: string; + download?: string; + }; + authorName?: string; +} + +const defaultImages = [ + { + id: "dog-1", + alt_description: "Dog", + urls: { + regularWithAttribution: "/image-backgrounds/dogs.webp", + }, + }, + { + id: "pencil", + alt_description: "Pencil", + urls: { + regularWithAttribution: "/image-backgrounds/pencil.webp", + }, + }, + { + id: "plant", + alt_description: "Plant", + urls: { + regularWithAttribution: "/image-backgrounds/plant.webp", + }, + }, + { + id: "dog-2", + alt_description: "Another Dog", + urls: { + regularWithAttribution: "/image-backgrounds/dog-2.webp", + }, + }, + { + id: "kitten-2", + alt_description: "Another Kitten", + urls: { + regularWithAttribution: "/image-backgrounds/kitten-2.webp", + }, + }, + { + id: "lollipop", + alt_description: "Lollipop", + urls: { + regularWithAttribution: "/image-backgrounds/lolipop.webp", + }, + }, + { + id: "oranges", + alt_description: "Oranges", + urls: { + regularWithAttribution: "/image-backgrounds/oranges.webp", + }, + }, + { + id: "flower", + alt_description: "Flower", + urls: { + regularWithAttribution: "/image-backgrounds/flowers.webp", + }, + }, + { + id: "supermario", + alt_description: "Super Mario", + urls: { + regularWithAttribution: "/image-backgrounds/supermario.webp", + }, + }, + { + id: "shapes", + alt_description: "Shapes", + urls: { + regularWithAttribution: "/image-backgrounds/shapes.webp", + }, + }, + { + id: "waves", + alt_description: "Waves", + urls: { + regularWithAttribution: "/image-backgrounds/waves.webp", + }, + }, + { + id: "kitten-1", + alt_description: "Kitten", + urls: { + regularWithAttribution: "/image-backgrounds/kittens.webp", + }, + }, +]; + +export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashSurveyBgProps) => { + const inputFocus = useRef(null); + const [isLoading, setIsLoading] = useState(false); + const [query, setQuery] = useState(""); + const [images, setImages] = useState(defaultImages); + const [page, setPage] = useState(1); + + useEffect(() => { + const fetchData = async (searchQuery: string, currentPage: number) => { + try { + setIsLoading(true); + const imagesFromUnsplash = await getImagesFromUnsplashAction(searchQuery, currentPage); + for (let i = 0; i < imagesFromUnsplash.length; i++) { + const authorName = new URL(imagesFromUnsplash[i].urls.regularWithAttribution).searchParams.get( + "authorName" + ); + imagesFromUnsplash[i].authorName = authorName; + } + setImages((prevImages) => [...prevImages, ...imagesFromUnsplash]); + } catch (error) { + toast.error(error.message); + } finally { + setIsLoading(false); + } + }; + + const debouncedFetchData = debounce((q) => fetchData(q, page), 500); + + if (query.trim() !== "") { + debouncedFetchData(query); + } + + return () => { + debouncedFetchData.cancel(); + }; + }, [query, page, setImages]); + + useEffect(() => { + inputFocus.current?.focus(); + }, []); + + const handleChange = (event: React.ChangeEvent) => { + setQuery(event.target.value); + setPage(1); + setImages([]); + }; + + const handleImageSelected = async (imageUrl: string, downloadImageUrl?: string) => { + try { + handleBgChange(imageUrl, "image"); + if (downloadImageUrl) { + await triggerDownloadUnsplashImageAction(downloadImageUrl); + } + } catch (error) { + toast.error(error.message); + } + }; + + const handleLoadMore = () => { + setPage((prevPage) => prevPage + 1); + }; + + return ( +
+
+ + +
+
+ {images.length > 0 && + images.map((image) => ( +
+ handleImageSelected(image.urls.regularWithAttribution, image.urls.download)} + className="h-full cursor-pointer rounded-lg object-cover" + /> + {image.authorName && ( + + {image.authorName} + + )} +
+ ))} + {isLoading && ( +
+ +
+ )} + {images.length > 0 && !isLoading && query.trim() !== "" && ( + + )} + {!isLoading && images.length === 0 && query.trim() !== "" && ( +
+ No images found for '{query}' +
+ )} +
+
+ ); +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UpdateQuestionId.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UpdateQuestionId.tsx index 31ea8e360f..928d595530 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UpdateQuestionId.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/UpdateQuestionId.tsx @@ -5,6 +5,7 @@ import { useState } from "react"; import toast from "react-hot-toast"; import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys"; +import { Button } from "@formbricks/ui/Button"; import { Input } from "@formbricks/ui/Input"; import { Label } from "@formbricks/ui/Label"; @@ -45,10 +46,15 @@ export default function UpdateQuestionId({ } }; + const isButtonDisabled = () => { + if (currentValue === question.id || currentValue.trim() === "") return true; + else return false; + }; + return (
-
+
{ setCurrentValue(e.target.value); }} - onBlur={saveAction} - disabled={!(localSurvey.status === "draft" || question.isDraft)} - className={isInputInvalid ? "border-red-300 focus:border-red-300" : ""} + disabled={localSurvey.status !== "draft" && !question.isDraft} + className={`h-10 ${isInputInvalid ? "border-red-300 focus:border-red-300" : ""}`} /> +
); diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx index 1d784ef122..1f576340c3 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/WhenToSendCard.tsx @@ -1,6 +1,6 @@ "use client"; -import AddNoCodeActionModal from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/AddActionModal"; +import AddNoCodeActionModal from "@/app/(app)/environments/[environmentId]/actions/components/AddActionModal"; import InlineTriggers from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/InlineTriggers"; import * as Collapsible from "@radix-ui/react-collapsible"; import { CheckIcon, PlusIcon, TrashIcon } from "lucide-react"; @@ -38,7 +38,9 @@ export default function WhenToSendCard({ propActionClasses, membershipRole, }: WhenToSendCardProps) { - const [open, setOpen] = useState(localSurvey.type === "web" ? true : false); + const [open, setOpen] = useState( + localSurvey.type === "app" || localSurvey.type === "website" ? true : false + ); const [isAddEventModalOpen, setAddEventModalOpen] = useState(false); const [activeIndex, setActiveIndex] = useState(null); const [actionClasses, setActionClasses] = useState(propActionClasses); @@ -320,7 +322,7 @@ export default function WhenToSendCard({