diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml deleted file mode 100644 index b9f8fb7b64..0000000000 --- a/.github/workflows/build-docs.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Build Docs -on: - workflow_call: - -permissions: - contents: read - -jobs: - build: - name: Build Docs - runs-on: ubuntu-latest - timeout-minutes: 30 - - steps: - - uses: actions/checkout@v3 - - uses: ./.github/actions/dangerous-git-checkout - - - name: Setup Node.js 20.x - uses: actions/setup-node@v3 - with: - node-version: 20.x - - - name: Install pnpm - uses: pnpm/action-setup@v4 - - - name: Install dependencies - run: pnpm install --config.platform=linux --config.architecture=x64 - shell: bash - - - run: | - pnpm build --filter=@formbricks/docs... - shell: bash diff --git a/apps/docs/.env.example b/apps/docs/.env.example deleted file mode 100644 index 223df0abfd..0000000000 --- a/apps/docs/.env.example +++ /dev/null @@ -1,10 +0,0 @@ -NEXT_PUBLIC_FORMBRICKS_COM_API_HOST=http://localhost:3000 -NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID= -NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID= - -# Strapi API Key -STRAPI_API_KEY= - -NEXT_PUBLIC_DOCSEARCH_APP_ID= -NEXT_PUBLIC_DOCSEARCH_API_KEY= -NEXT_PUBLIC_DOCSEARCH_INDEX_NAME= diff --git a/apps/docs/.eslintrc.js b/apps/docs/.eslintrc.js deleted file mode 100644 index 8e930ff596..0000000000 --- a/apps/docs/.eslintrc.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - root: true, - extends: ["@formbricks/eslint-config/next.js"], - parserOptions: { - project: "tsconfig.json", - tsconfigRootDir: __dirname, - }, - rules: { - "@typescript-eslint/restrict-template-expressions": "off", - "import/no-cycle": "off", - }, - settings: { - "import/resolver": { - typescript: { - project: "tsconfig.json", - }, - }, - }, -}; diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore deleted file mode 100644 index aeb7219b23..0000000000 --- a/apps/docs/.gitignore +++ /dev/null @@ -1,38 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts - -public/sitemap*.xml -public/robots.txt \ No newline at end of file diff --git a/apps/docs/LICENSE.md b/apps/docs/LICENSE.md deleted file mode 100644 index 3a28c7d33e..0000000000 --- a/apps/docs/LICENSE.md +++ /dev/null @@ -1,129 +0,0 @@ -# Tailwind UI License - -## Personal License - -Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates. - -The license grants permission to **one individual** (the Licensee) to access and use the Components and Templates. - -You **can**: - -- Use the Components and Templates to create unlimited End Products. -- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license. -- Use the Components and Templates to create unlimited End Products for unlimited Clients. -- Use the Components and Templates to create End Products where the End Product is sold to End Users. -- Use the Components and Templates to create End Products that are open source and freely available to End Users. - -You **cannot**: - -- Use the Components and Templates to create End Products that are designed to allow an End User to build their own End Products using the Components and Templates or derivatives of the Components and Templates. -- Re-distribute the Components and Templates or derivatives of the Components and Templates separately from an End Product, neither in code or as design assets. -- Share your access to the Components and Templates with any other individuals. -- Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc. - -### Example usage - -Examples of usage **allowed** by the license: - -- Creating a personal website by yourself. -- Creating a website or web application for a client that will be owned by that client. -- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application. -- Creating a commercial self-hosted web application that is sold to end users for a one-time fee. -- Creating a web application where the primary purpose is clearly not to simply re-distribute the components (like a conference organization app that uses the components for its UI for example) that is free and open source, where the source code is publicly available. - -Examples of usage **not allowed** by the license: - -- Creating a repository of your favorite Tailwind UI components or templates (or derivatives based on Tailwind UI components or templates) and publishing it publicly. -- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free. -- Create a Figma or Sketch UI kit based on the Tailwind UI component designs. -- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI. -- Creating a theme, template, or project starter kit using the components or templates and making it available either for sale or for free. -- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free. - -In simple terms, use Tailwind UI for anything you like as long as it doesn't compete with Tailwind UI. - -### Personal License Definitions - -Licensee is the individual who has purchased a Personal License. - -Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license. - -End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates. - -End User is a user of an End Product. - -Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document. - -## Team License - -Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates. - -The license grants permission for **up to 25 Employees and Contractors of the Licensee** to access and use the Components and Templates. - -You **can**: - -- Use the Components and Templates to create unlimited End Products. -- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license. -- Use the Components and Templates to create unlimited End Products for unlimited Clients. -- Use the Components and Templates to create End Products where the End Product is sold to End Users. -- Use the Components and Templates to create End Products that are open source and freely available to End Users. - -You **cannot**: - -- Use the Components or Templates to create End Products that are designed to allow an End User to build their own End Products using the Components or Templates or derivatives of the Components or Templates. -- Re-distribute the Components or Templates or derivatives of the Components or Templates separately from an End Product. -- Use the Components or Templates to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee. -- Use the Components or Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc. - -### Example usage - -Examples of usage **allowed** by the license: - -- Creating a website for your company. -- Creating a website or web application for a client that will be owned by that client. -- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application. -- Creating a commercial self-hosted web application that is sold to end users for a one-time fee. -- Creating a web application where the primary purpose is clearly not to simply re-distribute the components or templates (like a conference organization app that uses the components or a template for its UI for example) that is free and open source, where the source code is publicly available. - -Examples of use **not allowed** by the license: - -- Creating a repository of your favorite Tailwind UI components or template (or derivatives based on Tailwind UI components or templates) and publishing it publicly. -- Creating a React or Vue version of Tailwind UI and making it available either for sale or for free. -- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind UI. -- Creating a theme or template using the components or templates and making it available either for sale or for free. -- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free. -- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tailwind UI license to build their own websites or side projects. - -### Team License Definitions - -Licensee is the business entity who has purchased a Team License. - -Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind UI license. - -End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates. - -End User is a user of an End Product. - -Employee is a full-time or part-time employee of the Licensee. - -Contractor is an individual or business entity contracted to perform services for the Licensee. - -Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document. - -## Enforcement - -If you are found to be in violation of the license, access to your Tailwind UI account will be terminated, and a refund may be issued at our discretion. When license violation is blatant and malicious (such as intentionally redistributing the Components or Templates through private warez channels), no refund will be issued. - -The copyright of the Components and Templates is owned by Tailwind Labs Inc. You are granted only the permissions described in this license; all other rights are reserved. Tailwind Labs Inc. reserves the right to pursue legal remedies for any unauthorized use of the Components or Templates outside the scope of this license. - -## Liability - -Tailwind Labs Inc.’s liability to you for costs, damages, or other losses arising from your use of the Components or Templates — including third-party claims against you — is limited to a refund of your license fee. Tailwind Labs Inc. may not be held liable for any consequential damages related to your use of the Components or Templates. - -This Agreement is governed by the laws of the Province of Ontario and the applicable laws of Canada. Legal proceedings related to this Agreement may only be brought in the courts of Ontario. You agree to service of process at the e-mail address on your original order. - -## Questions? - -Unsure which license you need, or unsure if your use case is covered by our licenses? - -Email us at [support@tailwindui.com](mailto:support@tailwindui.com) with your questions. diff --git a/apps/docs/app/[survey-type]/global/access-roles/images/add-member.webp b/apps/docs/app/[survey-type]/global/access-roles/images/add-member.webp deleted file mode 100644 index dba6f062f5..0000000000 Binary files a/apps/docs/app/[survey-type]/global/access-roles/images/add-member.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/access-roles/images/bulk-invite.webp b/apps/docs/app/[survey-type]/global/access-roles/images/bulk-invite.webp deleted file mode 100644 index cdd2189d5d..0000000000 Binary files a/apps/docs/app/[survey-type]/global/access-roles/images/bulk-invite.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/access-roles/images/individual-invite.webp b/apps/docs/app/[survey-type]/global/access-roles/images/individual-invite.webp deleted file mode 100644 index fd9426ccc3..0000000000 Binary files a/apps/docs/app/[survey-type]/global/access-roles/images/individual-invite.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/access-roles/images/organization-settings-menu.webp b/apps/docs/app/[survey-type]/global/access-roles/images/organization-settings-menu.webp deleted file mode 100644 index 63794142c6..0000000000 Binary files a/apps/docs/app/[survey-type]/global/access-roles/images/organization-settings-menu.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/access-roles/images/team-settings-menu.webp b/apps/docs/app/[survey-type]/global/access-roles/images/team-settings-menu.webp deleted file mode 100644 index 63794142c6..0000000000 Binary files a/apps/docs/app/[survey-type]/global/access-roles/images/team-settings-menu.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/access-roles/page.mdx b/apps/docs/app/[survey-type]/global/access-roles/page.mdx deleted file mode 100644 index 741d362571..0000000000 --- a/apps/docs/app/[survey-type]/global/access-roles/page.mdx +++ /dev/null @@ -1,173 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import AddMember from "./images/add-member.webp"; -import BulkInvite from "./images/bulk-invite.webp"; -import IndvInvite from "./images/individual-invite.webp"; -import MenuItem from "./images/organization-settings-menu.webp"; - -export const metadata = { - title: "User Management", - description: - "Assign different roles to organization members to grant them specific rights like creating surveys, viewing responses, or managing organization members.", -}; - -# Organization Access Roles - -Learn about the different organization-level and team-level roles and how they affect permissions in Formbricks. - -## Memberships - -Permissions in Formbricks are broadly handled using organization-level roles, which apply to all teams and projects in the organization. Users on a self-hosting and Enterprise plan, have access to team-level roles, which enable more granular permissions. - - - Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited organization members as `Owner`. - - -Here are the different access permissions, ranked from highest to lowest access - -1. Owner -2. Manager -3. Billing -4. Member - -### Organisational level - -All users and their organization-level roles are listed in **Organization Settings > General**. Users can hold any of the following org-level roles: - -- **Billing** users can manage payment and compliance details in the organization. -- **Org Members** can view most data in the organization and act in the projects they are members of. They cannot join projects on their own and need to be assigned. -- **Org Managers** have full management access to all teams and projects. They can also manage the organization's membership. Org Managers can perform Team Admin actions without needing to join the team. They cannot change other organization settings. -- **Org Owners** have full access to the organization, its data, and settings. Org Owners can perform Team Admin actions without needing to join the team. - -### Permissions at project level - -- **read**: read access to all resources (except settings) in the project. -- **read & write**: read & write access to all resources (except settings) in the project. -- **manage**: read & write access to all resources including settings in the project. - -### Team-level Roles - -- **Team Contributors** can view and act on surveys and responses. -- **Team Admins** have additional permissions to manage their team's membership and projects. These permissions are granted at the team-level, and don't apply to teams where they're not a Team Admin. - -For more information on user roles & permissions, see below: - -| | Owner | Manager | Billing | Member | -| -------------------------------- | ----- | ------- | ------- | ------ | -| **Organization** | | | | | -| Update organization | ✅ | ❌ | ❌ | ❌ | -| Delete organization | ✅ | ❌ | ❌ | ❌ | -| Add new Member | ✅ | ✅ | ❌ | ❌ | -| Delete Member | ✅ | ✅ | ❌ | ❌ | -| Update Member Access | ✅ | ✅ | ❌ | ❌ | -| Update Billing | ✅ | ✅ | ✅ | ❌ | -| **Project** | | | | | -| Create Project | ✅ | ✅ | ❌ | ❌ | -| Update Project Name | ✅ | ✅ | ❌ | ✅\*\* | -| Update Project Recontact Options | ✅ | ✅ | ❌ | ✅\*\* | -| Update Look & Feel | ✅ | ✅ | ❌ | ✅\*\* | -| Update Survey Languages | ✅ | ✅ | ❌ | ✅\*\* | -| Delete Project | ✅ | ✅ | ❌ | ❌ | -| **Surveys** | | | | | -| Create New Survey | ✅ | ✅ | ❌ | ✅\* | -| Edit Survey | ✅ | ✅ | ❌ | ✅\* | -| Delete Survey | ✅ | ✅ | ❌ | ✅\* | -| View survey results | ✅ | ✅ | ❌ | ✅ | -| **Response** | | | | | -| Delete response | ✅ | ✅ | ❌ | ✅\* | -| Add tags on response | ✅ | ✅ | ❌ | ✅\* | -| Edit tags on response | ✅ | ✅ | ❌ | ✅\* | -| **Actions** | | | | | -| Create Action | ✅ | ✅ | ❌ | ✅\* | -| Update Action | ✅ | ✅ | ❌ | ✅\* | -| Delete Action | ✅ | ✅ | ❌ | ✅\* | -| **API Keys** | | | | | -| Create API key | ✅ | ✅ | ❌ | ✅\*\* | -| Update API key | ✅ | ✅ | ❌ | ✅\*\* | -| Delete API key | ✅ | ✅ | ❌ | ✅\*\* | -| **Tags** | | | | | -| Create tags | ✅ | ✅ | ❌ | ✅\* | -| Update tags | ✅ | ✅ | ❌ | ✅\* | -| Delete tags | ✅ | ✅ | ❌ | ✅\*\* | -| **People** | | | | | -| Delete Person | ✅ | ✅ | ❌ | ✅\* | -| **Integrations** | | | | | -| Manage Integrations | ✅ | ✅ | ❌ | ✅\* | - -\* - for the read & write permissions team members - -\*\* - for the manage permissions team members - -## Inviting organization members - -There are two ways to invite organization members: One by one or in bulk. - -### Invite organization members one by one - -1. Go to the `Organization Settings` page via the menu in the lower right corner: - - - -2. Click on the `Add member` button: - - - -3. In the modal, add the Name, Email and Role of the organization member you want to invite: - - - - - Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited organization members as `Owners`. - - -Formbricks sends an email to the organization member with an invitation link. The organization member can accept the invitation or create a new account by clicking on the link. - -### Invite organization members in bulk - -1. Go to the `Organization Settings` page via the menu in the lower right corner: - - - -2. Click on the `Add member` button: - - - -3. In the modal, switch to `Bulk Invite`. You can download an example .CSV file to fill in the Name, Email and Role of the organization members you want to invite: - - - -4. Upload the filled .CSV file and invite the organization members in bulk ✅ - -Formbricks sends an email to each organization member in the CSV. The member can accept the invitation or create a new account by clicking on the link. - ---- diff --git a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-image.webp b/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-image.webp deleted file mode 100644 index 838117dc32..0000000000 Binary files a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-image.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-video.webp b/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-video.webp deleted file mode 100644 index cb4b0536bc..0000000000 Binary files a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question-video.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question.webp b/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question.webp deleted file mode 100644 index 54ea67f3ff..0000000000 Binary files a/apps/docs/app/[survey-type]/global/add-image-or-video-question/images/add-image-or-video-to-question.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/add-image-or-video-question/page.mdx b/apps/docs/app/[survey-type]/global/add-image-or-video-question/page.mdx deleted file mode 100644 index ca588519b0..0000000000 --- a/apps/docs/app/[survey-type]/global/add-image-or-video-question/page.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import AddImageOrVideoToQuestionImage from "./images/add-image-or-video-to-question-image.webp"; -import AddImageOrVideoToQuestionVideo from "./images/add-image-or-video-to-question-video.webp"; -import AddImageOrVideoToQuestion from "./images/add-image-or-video-to-question.webp"; - -# Add Image or Video to a Question - -Enhance your questions by adding images or videos. This makes instructions clearer and the survey more engaging. - -## How to Add Images - -Click the icon on the right side of the question to add an image or video: - - - -Upload an image by clicking the upload icon or dragging the file: - - - -## How to Add Videos - -Toggle to add a video via link: - - - -### Supported Video Platforms - -We support YouTube, Vimeo, and Loom URLs. - - - **YouTube Privacy Mode**: This option reduces tracking by converting YouTube URLs to no-cookie URLs. It only works with YouTube. - diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-operators.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-operators.webp deleted file mode 100644 index c0928693b3..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-operators.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-value.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-value.webp deleted file mode 100644 index 678a56d404..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-value.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-variables.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-variables.webp deleted file mode 100644 index b33a360a2c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate-variables.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate.webp deleted file mode 100644 index fad23ba416..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-calculate.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-jump.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-jump.webp deleted file mode 100644 index acae8eea84..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-jump.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-options.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-options.webp deleted file mode 100644 index 4635196200..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-options.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-require.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/action-require.webp deleted file mode 100644 index 652dcbd7dd..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/action-require.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/add-logic.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/add-logic.webp deleted file mode 100644 index 03504d21ca..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/add-logic.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-chaining.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-chaining.webp deleted file mode 100644 index a5560aced8..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-chaining.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-operators.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-operators.webp deleted file mode 100644 index 8d99b4d44e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-operators.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-options.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-options.webp deleted file mode 100644 index c08fbfa2b4..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-options.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-value.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-value.webp deleted file mode 100644 index 4bc2d51218..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/condition-value.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/conditions.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/conditions.webp deleted file mode 100644 index 85bb78d596..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/conditions.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/editor.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/editor.webp deleted file mode 100644 index bb7dab326c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/editor.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/images/question-logic.webp b/apps/docs/app/[survey-type]/global/conditional-logic/images/question-logic.webp deleted file mode 100644 index 9d1d48845f..0000000000 Binary files a/apps/docs/app/[survey-type]/global/conditional-logic/images/question-logic.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx b/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx deleted file mode 100644 index d4952e1011..0000000000 --- a/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx +++ /dev/null @@ -1,169 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import ActionCalculateOperators from "./images/action-calculate-operators.webp"; -import ActionCalculateValue from "./images/action-calculate-value.webp"; -import ActionCalculateVariables from "./images/action-calculate-variables.webp"; -import ActionCalculate from "./images/action-calculate.webp"; -import ActionJump from "./images/action-jump.webp"; -import ActionOptions from "./images/action-options.webp"; -import ActionRequire from "./images/action-require.webp"; -import AddLogic from "./images/add-logic.webp"; -import ConditionChaining from "./images/condition-chaining.webp"; -import ConditionOperators from "./images/condition-operators.webp"; -import ConditionOptions from "./images/condition-options.webp"; -import ConditionValue from "./images/condition-value.webp"; -import Conditions from "./images/conditions.webp"; -import Editor from "./images/editor.webp"; -import QuestionLogic from "./images/question-logic.webp"; - -export const metadata = { - title: "Conditional Logic", - description: - "Create complex survey logic with the Logic Editor. Use conditions, actions, and variables to create a personalized survey experience.", -}; - -# Conditional Logic - -Create complex survey logic with the Logic Editor. Use conditions, actions, and variables to create a personalized survey experience. - - - -## Terminology - -- **Condition**: A rule that determines when an action should be executed. -- **Action**: A task that is executed when a condition is met. - -## **Creating Logic** - -1. **Add a Logic Block**: Click the `Add logic +` button to add a new logic block. - - - - You can add multiple logic blocks to a survey. Logic blocks are executed in the order they are added. You can rearrange the order of logic blocks. - - -2. **Add Conditions**: Add conditions to the logic block. Conditions are rules that determine when an action should be executed. - - - -Conditons can be based on: - -- **Question**: The answer to a question. -- **Variable**: A variable value. -- **Hidden Field**: The value of a hidden field. - - 2.a **Condition Options**: Choose from a list of available conditions. - - - - 2.b **Condition Operators**: Choose an operator to compare the condition value. - - - - 2.c **Condition Value**: Enter a value to compare the condition against. - Comparisons can be made against a fixed value or a dynamic value. - Dynamic values can be based on a question, variable, or hidden field. - - - - - - Conditions can be grouped. - Conditions can be combined using AND or OR operators. You can add multiple conditions to a logic block. Conditions are evaluated in the order they are added. - - - - -3. **Add Actions**: Add actions to the logic block. Actions are tasks that are executed when a condition is met. - -You can add multiple actions to a logic block. Actions are executed in the order they are added. - -- 3.a **Action Options**: Choose from a list of available actions. - - - - Action is of the following types: - - - **Calculate**: Perform a calculation. These variables are then available for use in other questions. - - - Calculations can be performed on variables. - - Calculations can be based on fixed values or dynamic values. - - - - - - - **Require Answer**: Make a question required. Only the optional questions can be marked as required while filling the survey. - - - **Jump to Question**: Skip to a specific question. The user will be redirected to the specified question based on the condition. - - -4. **Save Logic**: Click the `Save` button to save the logic block. - -# Question Logic - -This logic is executed when the user answers the question. Logic can be as simple as showing a follow-up question based on the answer or as complex as calculating a score based on multiple answers. - - diff --git a/apps/docs/app/[survey-type]/global/email-customization/email-customization-card.webp b/apps/docs/app/[survey-type]/global/email-customization/email-customization-card.webp deleted file mode 100644 index bdc93d051b..0000000000 Binary files a/apps/docs/app/[survey-type]/global/email-customization/email-customization-card.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/email-customization/email-sample.webp b/apps/docs/app/[survey-type]/global/email-customization/email-sample.webp deleted file mode 100644 index 197cb6f20f..0000000000 Binary files a/apps/docs/app/[survey-type]/global/email-customization/email-sample.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/email-customization/page.mdx b/apps/docs/app/[survey-type]/global/email-customization/page.mdx deleted file mode 100644 index 8622caa771..0000000000 --- a/apps/docs/app/[survey-type]/global/email-customization/page.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import EmailCustomizationSettings from "./email-customization-card.webp"; -import EmailSample from "./email-sample.webp"; -import UpdatedLogo from "./updated-logo.webp"; - -export const metadata = { - title: "Email Customization", - description: "Customize the email that is sent to your users!", -}; - -# Email Customization - -Email customization is a white-label feature that allows you to customize the email that is sent to your users. You can upload a logo of your company and use it in the email. - - - This feature is a white-label feature. It is only available for users on paid plans or have an enterprise license. - - -## How to Upload a Logo - -1. Go to the Organization Settings page. -2. You will see a card called **Email Customization** under the **General** section. - - - -3. Upload a logo of your company. -4. Click on the **Save** button. - - - -## Viewing the Logo in the Email - -You can click on the **Send test email** button to get a test email with the logo. - - - -Only the owner and managers of the organization can modify the logo. - -## Use Cases - -- **White-labeling**: You can use this feature to white-label your emails to your users. -- **Branding**: You can use this feature to add your logo to your emails to increase brand recognition. diff --git a/apps/docs/app/[survey-type]/global/email-customization/updated-logo.webp b/apps/docs/app/[survey-type]/global/email-customization/updated-logo.webp deleted file mode 100644 index 12eedafa51..0000000000 Binary files a/apps/docs/app/[survey-type]/global/email-customization/updated-logo.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/filled-hidden-fields.webp b/apps/docs/app/[survey-type]/global/hidden-fields/filled-hidden-fields.webp deleted file mode 100644 index 1881351586..0000000000 Binary files a/apps/docs/app/[survey-type]/global/hidden-fields/filled-hidden-fields.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/hidden-field-responses.webp b/apps/docs/app/[survey-type]/global/hidden-fields/hidden-field-responses.webp deleted file mode 100644 index 0d01d48e74..0000000000 Binary files a/apps/docs/app/[survey-type]/global/hidden-fields/hidden-field-responses.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/hidden-fields.webp b/apps/docs/app/[survey-type]/global/hidden-fields/hidden-fields.webp deleted file mode 100644 index 6c4dc4ab8d..0000000000 Binary files a/apps/docs/app/[survey-type]/global/hidden-fields/hidden-fields.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/input-hidden-fields.webp b/apps/docs/app/[survey-type]/global/hidden-fields/input-hidden-fields.webp deleted file mode 100644 index 8f3d4e45a9..0000000000 Binary files a/apps/docs/app/[survey-type]/global/hidden-fields/input-hidden-fields.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx b/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx deleted file mode 100644 index f2e3ba1f07..0000000000 --- a/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx +++ /dev/null @@ -1,110 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import FilledHiddenFields from "./filled-hidden-fields.webp"; -import HiddenFieldResponses from "./hidden-field-responses.webp"; -import HiddenFields from "./hidden-fields.webp"; -import InputHiddenFields from "./input-hidden-fields.webp"; - -export const metadata = { - title: "Hidden Fields", - description: "Add hidden fields to your surveys to capture additional data without requiring user inputs!", -}; - -# Hidden Fields - -Hidden fields are a powerful feature in Formbricks that allows you to add data to a submission without asking the user to type it in. This feature is especially useful when you already have information about a user that you want to use in the analysis of the survey results (e.g. `payment plan` or `email`) - -## How to Add Hidden Fields - -### Enable Hidden Fields - -1. Edit the survey you want to add hidden fields to & switch to the Questions tab and scroll down to the bottom of the page. You will see a section called **Hidden Fields**. Make sure to enable it by toggling the switch. - - - -### Add Hidden Field IDs - -2. Now click on it to add a new hidden field ID. You can add as many hidden fields as you want. - - - - - -## Set Hidden Field in Responses - -### Link Surveys - -Single Hidden Field: - - - - -```sh -https://formbricks.com/clin3dxja02k8l80hpwmx4bjy?screen=pricing -``` - - - - -Multiple Hidden Fields: - - - - -```sh -https://formbricks.com/clin3dxja02k8l80hpwmx4bjy?screen=landing_page&job=Founder -``` - - - - -### App & Website Surveys - -For in-product surveys, you can set hidden fields in the response by adding them to the `formbricks.track` call: - - - - -```sh -formbricks.track("my event", { - hiddenFields: { - screen: "landing_page", - job: "Founder" - }, -}); -``` - - - - -## View Hidden Fields in Responses - -These hidden fields will now be visible in the responses tab just like other fields in the Summary as well as the Response Cards, and you can use them to filter and analyze your responses. - - - -## Use Cases - -- **Tracking Source**: You can add a hidden field to track the source of the survey. For a detailed guide on Source Tracking, check out the [Source Tracking](/link-surveys/source-tracking) guide. -- **User Metadata**: You can add hidden fields to capture user metadata such as user ID, email, or any other user-specific information. -- **Survey Metadata**: You can add hidden fields to capture other metadata, e.g. the screen from which the survey was filled, or any other app specific information. diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-one.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-one.webp deleted file mode 100644 index 1ceaa74231..0000000000 Binary files a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-three.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-three.webp deleted file mode 100644 index 33f01ed624..0000000000 Binary files a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-three.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-two.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-two.webp deleted file mode 100644 index 4dcbe47395..0000000000 Binary files a/apps/docs/app/[survey-type]/global/limit-submissions/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx b/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx deleted file mode 100644 index f59b3cc858..0000000000 --- a/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx +++ /dev/null @@ -1,27 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepOne from "./images/step-one.webp"; -import StepThree from "./images/step-three.webp"; -import StepTwo from "./images/step-two.webp"; - -export const metadata = { - title: "Set a Maximum Number of Submissions for Surveys", - description: "Limit the number of responses your survey can receive.", -}; - -# Limit by Number of Submissions - -Automatically close your survey after a specific number of responses with Formbricks. This feature is perfect for limited offers, exclusive surveys, or when you need a precise sample size for statistical significance. - -- **How to**: Open the Survey Editor, switch to the Settings tab. Scroll down to Response Options, Toggle the “Close survey on response limit”. - {" "} - -- **Details**: Set a specific number of responses after which the survey automatically closes. -- **Use Case**: Perfect for limited offers, exclusive surveys, or when you need a precise sample size for statistical significance. - ---- diff --git a/apps/docs/app/[survey-type]/global/metadata/filters.webp b/apps/docs/app/[survey-type]/global/metadata/filters.webp deleted file mode 100644 index 8c9d2b6f6b..0000000000 Binary files a/apps/docs/app/[survey-type]/global/metadata/filters.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/metadata/metadata-card.webp b/apps/docs/app/[survey-type]/global/metadata/metadata-card.webp deleted file mode 100644 index 16c802f7b2..0000000000 Binary files a/apps/docs/app/[survey-type]/global/metadata/metadata-card.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/metadata/page.mdx b/apps/docs/app/[survey-type]/global/metadata/page.mdx deleted file mode 100644 index e3249ff5df..0000000000 --- a/apps/docs/app/[survey-type]/global/metadata/page.mdx +++ /dev/null @@ -1,65 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import { TellaVideo } from "@/components/tella-video"; - -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 (all website, app & link). We currently capture the user's source information, URL, browser, and device details, along with the country & the action that triggered.", -}; - -# 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?**: **[Get help in Github Discussions](https://github.com/formbricks/formbricks/discussions)** diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/add-language-in-survey.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/add-language-in-survey.webp deleted file mode 100644 index 7e493802ef..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/add-language-in-survey.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/add-languages.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/add-languages.webp deleted file mode 100644 index 081f81d46c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/add-languages.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/edit-multi-lang.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/edit-multi-lang.webp deleted file mode 100644 index ef987c81a5..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/edit-multi-lang.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/enable-multi-lang.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/enable-multi-lang.webp deleted file mode 100644 index ff26f0a190..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/enable-multi-lang.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/home-page.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/home-page.webp deleted file mode 100644 index 9f7392cd52..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/home-page.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/page.mdx b/apps/docs/app/[survey-type]/global/multi-language-surveys/page.mdx deleted file mode 100644 index 3e572dcd7f..0000000000 --- a/apps/docs/app/[survey-type]/global/multi-language-surveys/page.mdx +++ /dev/null @@ -1,166 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import { ResponsiveVideo } from "@/components/responsive-video"; -import AddLanguageInSurvey from "./add-language-in-survey.webp"; -import AddLanguages from "./add-languages.webp"; -import EditMultiLang from "./edit-multi-lang.webp"; -import EnableMultiLang from "./enable-multi-lang.webp"; -import SeeSurveyInLanguage from "./see-survey-in-language.webp"; -import SurveyLanguagesFromHome from "./survey-languages-from-home.webp"; -import SurveyLanguageSettings from "./survey-languague-settings.webp"; -import SurveySharing from "./survey-sharing.webp"; -import SurveysHome from "./surveys-home.webp"; -import TranslateAsPerLanguage from "./translate-as-per-language.webp"; - -export const metadata = { - title: "Multi-language Surveys | Formbricks", - description: - "Create multi-language link & app surveys with Formbricks. Get feedback from your users in their preferred language without writing a single line of code.", -}; - -# Multi-language Surveys - -Multi-Language Surveys allow you to create surveys that support multiple languages using translations. This makes it easier to reach a diverse audience without creating separate surveys for each language. This feature simplifies the creation, delivery, and analysis of surveys for a multilingual audience. - -How to deliver a specific language depends on the survey type (app or link survey): - -- App & Website survey: Set a `language` attribute for the user. [See the guide below for App Surveys](#app-surveys-configuration) -- Link survey: Add a `lang` parameter in the survey URL. [See the guide below for Link Surveys](#link-surveys-configuration) - - - ---- - -## Creating a Multi-language Survey - -1. Open the **Survey Languages** page in the Formbricks settings via the top-right menu: - - - -2. Click on the **Edit languages** button, to add a new language to your survey - - - -3. Select the preferred language from the dropdown and assign an identifier Alias. Click the **Add language** button to add the language to your project. - - -You can come back to this page anytime to add more languages or remove existing ones. - -4. Now, return to the dashboard to create a new survey or edit an existing one. - - - -5. In the survey editor, scroll down to the **Multiple Languages** section at the bottom and enable the toggle next to it. - - - -6. Now choose a **Default Language** for your survey. This is the language that will be shown to users who have not selected a preferred language. - -Changing the default language will reset all the translations you have made for the survey. - -7. Now, add the languages from the dropdown that you want to support in your survey. - - - -8. You can now see the survey in the selected language by clicking on the language dropdown in any of the questions. - - - -9. You can now translate all survey content, including questions, options, and button placeholders, into the selected language. - - - -10. Once you are done, click on the **Publish** button to save the survey. - -## App Surveys Configuration - -1. When you initialise the Formbricks SDK for your user, you can pass a `language` attribute with the language code. This can be either the ISO identifier or the Alias you set when creating the language. The `language` attribute makes sure that this user only sees surveys with a translation in this specific language available. - - - - -```js -Formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", - attributes: { - language: "de", // ISO identifier or Alias set when creating language - }, -}); -``` - - - - - - If a user has a language assigned, a survey has multi-language activate and it is missing a translation in the language of the user, the survey will not be displayed. - - -2. That's it! Now, users with the language attribute set will see the survey in their preferred language. You can start collecting responses in multiple languages and filter them by language on the summary page. - ---- - -## Link Surveys Configuration - -For link surveys, the translation delivery is dependent on the `land` URL parameter. - -After publishing the survey, just copy the survey link and append the `lang` query parameter with the language alias you have set. - -For example, if you have set the alias for French as `fr`, you can share the survey link as - -`https://your-survey-url.com?lang=fr` - -Here are two examples: - -- English: https://app.Formbricks.com/s/clptfos2i1pj516pvhxqyu3bn?lang=en -- German: https://app.Formbricks.com/s/clptfos2i1pj516pvhxqyu3bn?lang=de - -Without the `lang` parameter, Formbricks will show the survey in the default language you have set. - -You can now start collecting responses in multiple languages! - -**Can’t figure it out?**: **[Get help in Github Discussions](https://github.com/formbricks/formbricks/discussions)** diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/see-survey-in-language.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/see-survey-in-language.webp deleted file mode 100644 index d117b3cc51..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/see-survey-in-language.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languages-from-home.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languages-from-home.webp deleted file mode 100644 index c280254ad7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languages-from-home.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languague-settings.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languague-settings.webp deleted file mode 100644 index c043011028..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-languague-settings.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-sharing.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-sharing.webp deleted file mode 100644 index da69235865..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/survey-sharing.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/surveys-home.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/surveys-home.webp deleted file mode 100644 index d3f408e0bd..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/surveys-home.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/multi-language-surveys/translate-as-per-language.webp b/apps/docs/app/[survey-type]/global/multi-language-surveys/translate-as-per-language.webp deleted file mode 100644 index dc6b9b20c6..0000000000 Binary files a/apps/docs/app/[survey-type]/global/multi-language-surveys/translate-as-per-language.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/doggo.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/doggo.webp deleted file mode 100644 index 65096ccd59..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/doggo.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/hipster-living.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/hipster-living.webp deleted file mode 100644 index c83c00ed3e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/hipster-living.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/mario.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/mario.webp deleted file mode 100644 index 62470994b7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/mario.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/pre-requisite.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/pre-requisite.webp deleted file mode 100644 index 1b296658df..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/pre-requisite.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eight.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eight.webp deleted file mode 100644 index 5c35789d03..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eight.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eleven.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eleven.webp deleted file mode 100644 index 0cb0b13445..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eleven.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-five.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-five.webp deleted file mode 100644 index 71daa7e751..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-five.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-four.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-four.webp deleted file mode 100644 index 3ca7dc38d9..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-four.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-nine.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-nine.webp deleted file mode 100644 index bd8c73fe7e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-nine.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-one.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-one.webp deleted file mode 100644 index d8908f7cd7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-seven.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-seven.webp deleted file mode 100644 index bcbabf8315..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-seven.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-six.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-six.webp deleted file mode 100644 index 3ac271b6c8..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-six.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-ten.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-ten.webp deleted file mode 100644 index 092b337eb7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-ten.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-three.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-three.webp deleted file mode 100644 index cedee026fe..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-three.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-two.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-two.webp deleted file mode 100644 index 54f3d0e907..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/windows-xp.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/windows-xp.webp deleted file mode 100644 index 45f588a285..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/windows-xp.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/page.mdx b/apps/docs/app/[survey-type]/global/overwrite-styling/page.mdx deleted file mode 100644 index 284c01d1ea..0000000000 --- a/apps/docs/app/[survey-type]/global/overwrite-styling/page.mdx +++ /dev/null @@ -1,132 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepEleven from "./images/step-eleven.webp"; -import StepNine from "./images/step-nine.webp"; -import StepTen from "./images/step-ten.webp"; - -import Doggo from "./images/doggo.webp"; -import HipsterLiving from "./images/hipster-living.webp"; -import Mario from "./images/mario.webp"; -import WindowsXp from "./images/windows-xp.webp"; - -export const metadata = { - title: "Overwrite Styling Theme on Individual Surveys", - description: - "Overwrite the global styling theme for individual surveys to create unique styles for each survey.", -}; - -# Overwrite Styling Theme on Individual Surveys - -Overwrite the global styling theme for individual surveys to create unique styles for each survey. - - - To set a styling theme for all surveys, please see the [Styling Theme](/core-features/global/styling-theme) manual. - - -### Overwrite Styling Theme - -1. In the Survey Editor of the survey you want to style, navigate to the **Styling** tab: - - - -2. Activate the **Add Custom Styles** toggle to override the default project styling: - - - -3. Customize your survey's style as needed: - - - -Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look! - -## Overwrite CSS Styles for App & Website Surveys - -You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`): - -Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance. - - - - -```css -/* Formbricks CSS */ ---fb-brand-color: red; ---fb-brand-text-color: white; ---fb-border-color: green; ---fb-border-color-highlight: rgb(13, 13, 12); ---fb-focus-color: red; ---fb-heading-color: yellow; ---fb-subheading-color: green; ---fb-info-text-color: orange; ---fb-signature-text-color: blue; ---fb-survey-background-color: black; ---fb-accent-background-color: rgb(13, 13, 12); ---fb-accent-background-color-selected: red; ---fb-placeholder-color: white; ---fb-shadow-color: var(--fb-brand-color); ---fb-rating-fill: rgb(13, 13, 12); ---fb-rating-hover: green; ---fb-back-btn-border: blue; ---fb-submit-btn-border: transparent; ---fb-rating-selected: black; -``` - - - - -We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here. - -## Funky Survey Examples - -- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things - - - -- **Hipster Living**: Does your monstera get enough water? - - - -- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia. - - - -- **Whosagooooodbooooy**: Things you've likely said to your dog. - - - ---- diff --git a/apps/docs/app/[survey-type]/global/partial-submissions/images/step-one.webp b/apps/docs/app/[survey-type]/global/partial-submissions/images/step-one.webp deleted file mode 100644 index 89494819fe..0000000000 Binary files a/apps/docs/app/[survey-type]/global/partial-submissions/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx b/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx deleted file mode 100644 index 1a57fb83f2..0000000000 --- a/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx +++ /dev/null @@ -1,75 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepOne from "./images/step-one.webp"; - -export const metadata = { - title: "Collect Partial Submissions with Formbricks", - description: - "Capture and analyze partial submissions in Formbricks to understand respondent behavior and improve survey engagement. Learn how to enable and access partial submissions data.", -}; - -# Partial Submissions - -Formbricks enables you to capture and analyze partial submissions, providing detailed insights into how participants interact with each question within your survey. This feature is crucial for identifying specific points where respondents may disengage, allowing you to understand and address drop-offs effectively. This makes sure you do not lose any of your meaningful insights from a question in a survey. - -## **Understanding Partial Submissions** - -Partial submissions occur when respondents start a survey but do not complete it. These can include instances where the survey is opened but no questions are answered, or where only some questions are addressed before the survey is exited. - -## **Enabling and Accessing Partial Submissions Tracking** - -Tracking of partial submissions is automatically enabled for all Formbricks surveys, capturing every interaction from the moment a respondent begins the survey. - -### **Types of Data Captured** - -1. **Display Created**: Tracks when a survey is initially opened. -2. **Questions Partially Answered**: Records after every question & the data is handled, noting which questions were last interacted with before the survey was exited. - -### **Benefits of Tracking Partial Submissions** - -- **Identifies Drop-Off Points**: Pinpoints specific questions where respondents are likely to stop answering, providing critical insights into potential issues within the survey. -- **Improves Survey Design**: Data from partial submissions can guide adjustments to question complexity, survey length, or formatting to enhance respondent engagement. -- **Enhances Completion Rates**: Understanding where and why respondents are dropping off allows for targeted interventions to improve overall engagement and completion rates. - -## **Analyzing Partial Submission Data** - -Formbricks provides detailed analytics for partial submissions, including a per-question analysis of respondent behavior. - - - -### **Survey Summary Analytics** - -The "Analyze Drop-Offs" toggle in the survey summary reveals a comprehensive table with detailed metrics, enabling a deep dive into how respondents interact with each question: - -- **Summary Metrics**: - - **Impressions**: Total number of times the survey was viewed. - - **Starts**: Percentage of impressions that the survey was started. - - **Responses**: Total number of completed responses. - - **Drop-Offs**: Percentage of starts that did not lead to a complete response. - - **Time to Complete**: Average time taken by respondents to complete the survey. - -### **Detailed Question Analysis** - -Each question is analyzed for: - -- **Time to Complete**: Average time taken by respondents spent on this question. -- **Impressions**: Number of times the question was viewed. -- **Drop-Offs**: Number of times respondents left the survey at this question, with a percentage indicating the drop-off rate. - -This data is invaluable for pinpointing problems with specific questions and understanding the overall flow and engagement levels within the survey. - -## **Use Cases** - -Partial submissions tracking is particularly valuable for: - -- Surveys experiencing high drop-off rates, where detailed question analysis can inform necessary adjustments. -- Studies requiring in-depth engagement metrics for each survey question to optimize content and survey structure. - -## **Conclusion** - -By leveraging the partial submissions tracking feature in Formbricks, you gain comprehensive insights into respondent behaviors and survey interactions. This information is vital for enhancing survey design, improving response rates, and ensuring more reliable and meaningful data collection. diff --git a/apps/docs/app/[survey-type]/global/question-type/address/images/address.webp b/apps/docs/app/[survey-type]/global/question-type/address/images/address.webp deleted file mode 100644 index 7f9279616f..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/address/images/address.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/address/page.mdx b/apps/docs/app/[survey-type]/global/question-type/address/page.mdx deleted file mode 100644 index 4561280954..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/address/page.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Address from "./images/address.webp"; - -#### Question Type - -# Address - -The Address question type allows respondents to input their address details, including multiple fields such as address lines, city, state, and country. You can configure the question by adding a title, an optional description, and toggling specific fields to be required. - - - -## Elements - - - -### Question - -Provide a question to describe the address information you are requesting. - -### Description - -Optionally, add a description to guide the user. - -### Toggle Fields - -You can choose to show and require any or all of the following fields in the form: - -- Address Line 1 -- Address Line 2 -- City -- State -- Zip Code -- Country diff --git a/apps/docs/app/[survey-type]/global/question-type/consent/images/consent.webp b/apps/docs/app/[survey-type]/global/question-type/consent/images/consent.webp deleted file mode 100644 index 60291a402c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/consent/images/consent.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx b/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx deleted file mode 100644 index b94bb9ae9b..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx +++ /dev/null @@ -1,32 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Consent from "./images/consent.webp"; - -#### Question Type - -# Consent - -The Consent card is used to obtain user agreement regarding a product, service, or policy. It features a bold statement or question as the title, followed by a brief description. At the end of the card, users can confirm their consent by checking a checkbox to indicate their agreement. - - - -## Elements - - - -### Title - -A bold statement or question asking for user consent, displayed prominently at the top of the card. - -### Description - -A short explanation or additional context for the consent request, displayed below the title. The text can be formatted, and hyperlinks are allowed within the description. - -### Checkbox - -At the bottom of the card, users can confirm their agreement by checking the box, indicating their consent to the question or statement above. The label for the checkbox is also editable. diff --git a/apps/docs/app/[survey-type]/global/question-type/contact/images/contact.webp b/apps/docs/app/[survey-type]/global/question-type/contact/images/contact.webp deleted file mode 100644 index ac2ade0722..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/contact/images/contact.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx b/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx deleted file mode 100644 index 59cc2273c4..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Contact from "./images/contact.webp"; - -#### Question Type - -# Contact Info - -The Contact Info question type allows respondents to provide their basic contact information such as name, email, and phone number. You can customize the form with a title, an optional description, and control which fields to display and require. - - - -## Elements - - - -### Title - -Specify a title to describe the information you're collecting. - -### Description - -Optionally, add a description to give additional context. - -### Toggle Fields - -You can choose to show and require any or all of the following fields: - -- First Name -- Last Name -- Email -- Phone Number -- Company diff --git a/apps/docs/app/[survey-type]/global/question-type/date/images/date.webp b/apps/docs/app/[survey-type]/global/question-type/date/images/date.webp deleted file mode 100644 index 6fa0c564a4..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/date/images/date.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/date/page.mdx b/apps/docs/app/[survey-type]/global/question-type/date/page.mdx deleted file mode 100644 index 03bf5c74d5..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/date/page.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Date from "./images/date.webp"; - -#### Question Type - -# Date - -The Date question type allows respondents to provide a date, such as when they are available or when an event is scheduled. It features a title to guide the respondent on what date to enter, and an optional description to provide further details or context. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what date you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Date Format - -Choose from multiple date formats for the input: - -- MM-DD-YYYY -- DD-MM-YYYY -- YYYY-MM-DD diff --git a/apps/docs/app/[survey-type]/global/question-type/file-upload/images/file-upload.webp b/apps/docs/app/[survey-type]/global/question-type/file-upload/images/file-upload.webp deleted file mode 100644 index dd85a6d161..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/file-upload/images/file-upload.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/file-upload/page.mdx b/apps/docs/app/[survey-type]/global/question-type/file-upload/page.mdx deleted file mode 100644 index 7c804b2e38..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/file-upload/page.mdx +++ /dev/null @@ -1,40 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import FileUpload from "./images/file-upload.webp"; - -#### Questions Type - -# File Upload - -The File Upload question type allows respondents to upload files related to your survey, such as production documents or requirement specifications. It features a title to guide the user on what to upload and an optional description to provide additional context. - - - -## Elements - - - -### Title - -Add a clear title that informs the respondent about the purpose of the file upload. - -### Description - -Provide an optional description to give respondents more details or instructions about what files they need to upload. - -### Allow Multiple Files - -Enable this option to allow respondents to upload multiple files at once. - -### Max File Size - -You can set a maximum file size limit, and an input box will appear to specify the size in MB. - -### File Type Restrictions - -You can restrict the allowed file types. An input box will appear where you can specify the file formats, such as `.pdf`, `.jpg`, `.docx`, etc. diff --git a/apps/docs/app/[survey-type]/global/question-type/free-text/images/free-text.webp b/apps/docs/app/[survey-type]/global/question-type/free-text/images/free-text.webp deleted file mode 100644 index 960d9b4cc1..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/free-text/images/free-text.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/free-text/page.mdx b/apps/docs/app/[survey-type]/global/question-type/free-text/page.mdx deleted file mode 100644 index 84a296acf6..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/free-text/page.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import FreeText from "./images/free-text.webp"; - -export const metadata = { - title: "Free Text", - description: "Free text questions allow respondents to enter a custom answer.", -}; - -#### Question Type - -# Free Text - -Free text questions allow respondents to enter a custom answer. Displays a title and an input field for the respondent to type in. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Placeholder - -Specify a placeholder text to display in the input field. - -### Input Type - -Choose the type of input field to display. Options include: - -- **Text**: A text area input. This can be converted to a single line input field if needed, by toggling the _"Long answer"_ switch at the bottom of the question segment. -- **Email**: A single-line text input that validates the input as an email address. -- **URL**: A single-line text input that validates the input as a URL. -- **Number**: A single-line text input that validates the input as a number and shows "increase" and "decrease" buttons. -- **Phone**: A single-line text input that validates the input as a phone number. diff --git a/apps/docs/app/[survey-type]/global/question-type/matrix/images/matrix.webp b/apps/docs/app/[survey-type]/global/question-type/matrix/images/matrix.webp deleted file mode 100644 index 8c3d1c436f..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/matrix/images/matrix.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/matrix/page.mdx b/apps/docs/app/[survey-type]/global/question-type/matrix/page.mdx deleted file mode 100644 index 5b6ba5c937..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/matrix/page.mdx +++ /dev/null @@ -1,41 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Matrix from "./images/matrix.webp"; - -#### Question Type - -# Matrix - -Matrix questions allow respondents to select a value for each option presented in rows. The values range from 0 to a user-defined maximum (e.g., 0 to X). The selection is made using radio buttons, and users can choose any value within the defined range, including 0. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Rows - -Define the options shown on the left side of the matrix. These represent the items for which users will select a value. - -### Columns - -Represent the range of values from 0 to X (right side of the screen). Users can choose any value, including 0, using radio buttons. - -### Select ordering - -- Keep current order: This will keep the order of options the same for all respondents. -- Randomize all: This will randomize the options for each respondent. diff --git a/apps/docs/app/[survey-type]/global/question-type/multi-select/images/multi-select.webp b/apps/docs/app/[survey-type]/global/question-type/multi-select/images/multi-select.webp deleted file mode 100644 index 8c169b6f2e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/multi-select/images/multi-select.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/multi-select/page.mdx b/apps/docs/app/[survey-type]/global/question-type/multi-select/page.mdx deleted file mode 100644 index 6e1e73e4d7..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/multi-select/page.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import MultiSelect from "./images/multi-select.webp"; - -export const metadata = { - title: "Multi Select", - description: "Multi select questions allow respondents to select several answers from a list", -}; - -#### Question Type - -# Multi Select - -Multi select questions allow respondents to select several answers from a list. Displays a title and a list of checkboxes for the respondent to choose from. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Options - -Define the options shown in the list. These represent the items for which users will select. - -Other than the fact that respondents can select multiple options, multi select questions are similar to [single select](/global/question-types/single-select) questions. diff --git a/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/images/net-promoter-score.webp b/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/images/net-promoter-score.webp deleted file mode 100644 index 1b30bcc4d4..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/images/net-promoter-score.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/page.mdx b/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/page.mdx deleted file mode 100644 index 21731ff322..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/page.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import NetPromoterScore from "./images/net-promoter-score.webp"; - -#### Question Type - -# Net Promoter Score - -Net Promoter Score questions allow respondents to rate a question on a scale from 0 to 10. Displays a title and a list of radio buttons for the respondent to choose from. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Labels - -Add labels for the lower and upper bounds of the score. The default is "Not at all likely" and "Extremely likely". - -### Add color coding - -Add color coding to the score. This will show a color bar above the score. diff --git a/apps/docs/app/[survey-type]/global/question-type/picture-selection/images/picture-selection.webp b/apps/docs/app/[survey-type]/global/question-type/picture-selection/images/picture-selection.webp deleted file mode 100644 index 5c780e5530..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/picture-selection/images/picture-selection.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/picture-selection/page.mdx b/apps/docs/app/[survey-type]/global/question-type/picture-selection/page.mdx deleted file mode 100644 index a1c64a46b9..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/picture-selection/page.mdx +++ /dev/null @@ -1,41 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import PictureSelection from "./images/picture-selection.webp"; - -export const metadata = { - title: "Picture Selection", - description: "Picture selection questions allow respondents to select one or more images from a list", -}; - -#### Question Type - -# Picture Selection - -Picture selection questions allow respondents to select one or more images from a list. Displays a title and a list of images for the respondent to choose from. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Images - -Images can be uploaded via click or drag and drop. At least two images are required. - -### Allow Multi Select - -This option allows user to select more than one image. diff --git a/apps/docs/app/[survey-type]/global/question-type/ranking/images/ranking.webp b/apps/docs/app/[survey-type]/global/question-type/ranking/images/ranking.webp deleted file mode 100644 index b057d34f34..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/ranking/images/ranking.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/ranking/page.mdx b/apps/docs/app/[survey-type]/global/question-type/ranking/page.mdx deleted file mode 100644 index a5d74893f5..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/ranking/page.mdx +++ /dev/null @@ -1,37 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Ranking from "./images/ranking.webp"; - -#### Question Type - -# Ranking - -Ranking questions let respondents select options in order from 1 to the total number of options. As they make their choices, the list is automatically rearranged in numerical order. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Options - -You need to add at least two options so that users can rearrange them in numerical order based on their selection. - -### Select ordering - -- Keep current order: This will keep the order of options the same for all respondents. -- Randomize all: This will randomize the options for each respondent. diff --git a/apps/docs/app/[survey-type]/global/question-type/rating/images/rating.webp b/apps/docs/app/[survey-type]/global/question-type/rating/images/rating.webp deleted file mode 100644 index 9b1000ba1e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/rating/images/rating.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx b/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx deleted file mode 100644 index ea82d3cb47..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx +++ /dev/null @@ -1,45 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import Rating from "./images/rating.webp"; - -export const metadata = { - title: "Rating", - description: "Rating questions allow respondents to rate questions on a scale", -}; - -#### Question Type - -# Rating - -Rating questions allow respondents to rate questions on a scale. Displays a title and a rating scale consisting of a number of images and labels for the lower and upper ends of the scale. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Scale - -Select the icon to be used for the rating scale. The options include: stars, numbers or smileys. The default is stars. - -### Range - -Select the range of the rating scale. the options include: 3, 4, 5, 7 or 10. The default is 5. - -### Labels - -Add labels for the lower and upper bounds of the rating scale. The default is "Not good" and "Very good". diff --git a/apps/docs/app/[survey-type]/global/question-type/schedule/images/schedule-call.webp b/apps/docs/app/[survey-type]/global/question-type/schedule/images/schedule-call.webp deleted file mode 100644 index 55b291282c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/schedule/images/schedule-call.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx b/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx deleted file mode 100644 index d5abd856e2..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import ScheduleCall from "./images/schedule-call.webp"; - -#### Question Type - -# Schedule A Meeting - -The Schedule A Meeting question type allows respondents to book a meeting by selecting a date and time. It includes a title to guide the respondent, along with an optional description to provide additional context for the meeting setup. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Cal.com Username/Event - -Add an input box where users can enter their [`cal.com`](https://cal.com/) username and event URL (e.g., `username/event`). - -### Custom Hostname (Optional) - -Enable an input box for adding a custom hostname, which is necessary if using a self-hosted instance of [`cal.com`](https://cal.com/docs/self-hosting/installation). diff --git a/apps/docs/app/[survey-type]/global/question-type/single-select/images/single-select.webp b/apps/docs/app/[survey-type]/global/question-type/single-select/images/single-select.webp deleted file mode 100644 index 8949f4ab5a..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/single-select/images/single-select.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/single-select/page.mdx b/apps/docs/app/[survey-type]/global/question-type/single-select/page.mdx deleted file mode 100644 index 9e62572626..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/single-select/page.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import SingleSelect from "./images/single-select.webp"; - -export const metadata = { - title: "Single Select", - description: "Single select questions allow respondents to select one answer from a list", -}; - -#### Question Type - -# Single Select - -Single select questions allow respondents to select one answer from a list. Displays a title and a list of radio buttons for the respondent to choose from. - - - -## Elements - - - -### Title - -Add a clear title to inform the respondent what information you are asking for. - -### Description - -Provide an optional description with further instructions. - -### Options - -The list of answers the respondent can choose from. - -### Additional Actions - -- Add "Other": Adds an "Other" option to allow respondents to enter a custom answer. This will show two inputs, one for the label text and one for the placeholder. - -- Convert to Multiple Select: Converts the question to a multiple select question. This will show checkboxes instead of radio buttons. - -- Order dropdown: Allows you to choose the order in which the options are displayed. - - Keep current order: Options will be displayed in the order you added them. - - Randomize all: Options will be displayed in a random order. - - Randomize all except last option: Options will be displayed in a random order, except for the last one. diff --git a/apps/docs/app/[survey-type]/global/question-type/statement-cta/images/statement-cta.webp b/apps/docs/app/[survey-type]/global/question-type/statement-cta/images/statement-cta.webp deleted file mode 100644 index c0762f3198..0000000000 Binary files a/apps/docs/app/[survey-type]/global/question-type/statement-cta/images/statement-cta.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/question-type/statement-cta/page.mdx b/apps/docs/app/[survey-type]/global/question-type/statement-cta/page.mdx deleted file mode 100644 index f5da195606..0000000000 --- a/apps/docs/app/[survey-type]/global/question-type/statement-cta/page.mdx +++ /dev/null @@ -1,33 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import StatementCTA from "./images/statement-cta.webp"; - -#### Question Type - -# Statement (Call to Action) - -The Statement question type allows you to display descriptive information in your survey, such as a message or instruction. It consists of a title (can be Question or Short Note) and a description, which can be a brief note(realted to CTA) or guideline. Instead of collecting input, this type includes a call to action button for further steps, such as booking an interview call. - - - -## Elements - - - -### Title - -This is the main question or heading that appears at the top of the card. - -### Description - -A brief note or instruction displayed under the title, typically used to provide context or instructions for the next step. - -### Button Options - -- Button to continue in survey: This will continue respondent with the survey, form or fillups. -- Button to link to external URL: Selecting this option will open-up URL input box below when us set URL the button will redirect to your setted link. diff --git a/apps/docs/app/[survey-type]/global/recall/images/step-one.webp b/apps/docs/app/[survey-type]/global/recall/images/step-one.webp deleted file mode 100644 index 42ebcd0fa5..0000000000 Binary files a/apps/docs/app/[survey-type]/global/recall/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/recall/images/step-three.webp b/apps/docs/app/[survey-type]/global/recall/images/step-three.webp deleted file mode 100644 index dd630ba876..0000000000 Binary files a/apps/docs/app/[survey-type]/global/recall/images/step-three.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/recall/images/step-two.webp b/apps/docs/app/[survey-type]/global/recall/images/step-two.webp deleted file mode 100644 index 98761acc8c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/recall/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/recall/page.mdx b/apps/docs/app/[survey-type]/global/recall/page.mdx deleted file mode 100644 index d141a88fb9..0000000000 --- a/apps/docs/app/[survey-type]/global/recall/page.mdx +++ /dev/null @@ -1,83 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import SurveyEmbed from "@/components/survey-embed"; -import StepOne from "./images/step-one.webp"; -import StepThree from "./images/step-three.webp"; -import StepTwo from "./images/step-two.webp"; - -export const metadata = { - title: "Recall Data in Formbricks Surveys", - description: - "Personalize your surveys by dynamically inserting data from URL parameters or previous answers into questions and descriptions. The Recall Data feature helps create engaging, adaptive survey experiences tailored to each respondent.", -}; - -# Recall Data - -Personalize your surveys by dynamically inserting data from URL parameters or previous answers into questions and descriptions. The Recall Data feature helps create engaging, adaptive survey experiences tailored to each respondent. - -## Recall Sources - -You can recall data from the following sources: - -- From a previous question -- From a [Hidden Field](/docs/link-surveys/global/hidden-fields) -- From a [Variable](/docs/link-surveys/global/variables) - -## Recalling from a previous question - - - The recall functionality is disabled on the first question of the survey since there’s no preceding question to recall data from. - - -### **Pre-requisite** - -Ensure the answer you wish to recall precedes the question in which it will be recalled. Here’s an example of setting up the first question: - - - -### **Step 1: Recall Data** - -Type **`@`** in the question or description field where you want to insert a recall. This triggers a dropdown menu listing all preceding questions. Select the question you want to recall data from. - - - -### **Step 2: Set a Fallback** - -To ensure the survey remains coherent when a response is missing (or the question is optional), you should set a fallback option. - - - -## Recalling from the URL - -1. Create a hidden field, [here is how →](/docs/global/hidden-fields) -2. Use the `@` symbol in a question or description to recall the value of the hidden field -3. Set a fallback in case the hidden field is not being filled by a URL parameter -4. Use [Data Prefilling](/docs/link-surveys/data-prefilling) to set the hidden field value when the survey is accessed - -## Recalling from a Variable - -1. Create a variable, [here is how →](/docs/link-surveys/global/variables) -2. Use the `@` symbol in a question or description to recall the value of the variable -3. Set a fallback in case the variable is not being filled by a URL parameter - -## Live Demo - - - -## **Conclusion** - -Recall Data in Formbricks surveys allows for a conversational and customized survey experience that enhances engagement and improves the quality of feedback. By integrating previous responses into new questions, you create a more interactive and relevant environment for respondents. diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-one.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-one.webp deleted file mode 100644 index 1ceaa74231..0000000000 Binary files a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-three.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-three.webp deleted file mode 100644 index 33f01ed624..0000000000 Binary files a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-three.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-two.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-two.webp deleted file mode 100644 index 4dcbe47395..0000000000 Binary files a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/page.mdx b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/page.mdx deleted file mode 100644 index 375e9ec5bb..0000000000 --- a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/page.mdx +++ /dev/null @@ -1,50 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepOne from "./images/step-one.webp"; -import StepThree from "./images/step-three.webp"; -import StepTwo from "./images/step-two.webp"; - -export const metadata = { - title: "Schedule Start & End Dates for Surveys", - description: "Automatically release and close surveys based on specific dates.", -}; - -# Schedule Start & End Dates - -Optimize your survey management with custom Start & End Conditions in Formbricks. This feature allows you to control exactly when your survey is available for responses and when it should close, making it ideal for time-sensitive or number-of-response-limited surveys. - -Configure your surveys to open and close based on specific criteria. Here’s how to set up these conditions: - -## **Schedule a Survey Release** - -- **How to**: Open the Survey Editor, switch to the Settings tab. Scroll down to Response Options, Toggle the “Release Survey on Date”. - - - -- **Details**: Choose the date and time when the survey should become available to respondents. All times follow UTC timezone. -- **Use Case**: This is useful for launching surveys in alignment with events, product releases, or specific marketing campaigns. - -## **Automatically Closing a Survey** - -- **How to**: Open the Survey Editor, switch to the Settings tab. Scroll down to Response Options, Toggle the “Close survey on date”. - - -- **Details**: Define a specific date and time for the survey to close. This also follows UTC timezone. - -**Use Case**: Essential for surveys linked to time-bound events or studies where data collection needs to end -at a specific point. - -### **Summary** - -Setting up Start & End Dates in Formbricks allows you to control the availability and duration of your surveys with precision. Whether you are conducting academic research, market analysis, or gathering event feedback, these settings help ensure that your data collection aligns perfectly with your objectives. - ---- diff --git a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/1-publish-to-web.webp b/apps/docs/app/[survey-type]/global/shareable-dashboards/images/1-publish-to-web.webp deleted file mode 100644 index 3d8996b622..0000000000 Binary files a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/1-publish-to-web.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/2-warning-publish.webp b/apps/docs/app/[survey-type]/global/shareable-dashboards/images/2-warning-publish.webp deleted file mode 100644 index 0d8ac85853..0000000000 Binary files a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/2-warning-publish.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/3-share-link.webp b/apps/docs/app/[survey-type]/global/shareable-dashboards/images/3-share-link.webp deleted file mode 100644 index 3ae5696f88..0000000000 Binary files a/apps/docs/app/[survey-type]/global/shareable-dashboards/images/3-share-link.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx b/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx deleted file mode 100644 index 097caad745..0000000000 --- a/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx +++ /dev/null @@ -1,74 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepOne from "./images/1-publish-to-web.webp"; -import StepTwo from "./images/2-warning-publish.webp"; -import StepThree from "./images/3-share-link.webp"; - -export const metadata = { - title: "Shareable Dashboards", - description: "Create shareable links to dashboards of specific surveys.", -}; - -# Shareable Dashboards - -Formbricks allows you to create public, shareable versions of your survey results dashboards. This feature enables you to easily share survey results with stakeholders, team members, or the public without granting access to your Formbricks account. - -## How To Publish Survey Results - -1. **Go to survey summary**: Choose the survey for which you want to create a shareable dashboard and go to its summary page. - -2. **Share results**: Click the "Share results" and then "Publish to web". - - - -3. **Confirm**: Click "Publish to public web" (it's public). - - - -4. **Share link**: Formbricks has generated a unique URL for your public dashboard. Share it around. - - - -Whoever has access to the link can access the survey results. - -## How To Unpublish Survey Results - -Unpublish is very simple: Go to "Share results" -> "Unpublish from web" -> "Unpublish". - - - -## Key Features - -- **Read-only access**: Viewers can see survey results but cannot modify data or settings. -- **Real-time updates**: The shared dashboard reflects current survey data in real-time. -- **Filters included**: Visitors can access all filters to dissect the data. -- **Revocable access**: You can disable the shared link at any time to restrict access. - -## Use Cases - -- Share results with clients or stakeholders -- Publish survey findings to your website or blog -- Collaborate with team members without sharing account credentials -- Create transparency by making certain survey results public - -Shareable dashboards provide a simple yet powerful way to disseminate survey insights while maintaining control over your Formbricks account and data. diff --git a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-one.webp b/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-one.webp deleted file mode 100644 index 1a8587a024..0000000000 Binary files a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-two.webp b/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-two.webp deleted file mode 100644 index b37dda4e3f..0000000000 Binary files a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/page.mdx b/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/page.mdx deleted file mode 100644 index 0276f02361..0000000000 --- a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/page.mdx +++ /dev/null @@ -1,74 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import StepOne from "./images/step-one.webp"; -import StepTwo from "./images/step-two.webp"; - -export const metadata = { - title: "Show Survey to % of Users", - description: - "To target specific segments of your audience or manage survey exposure, Formbricks allows you to display surveys to only a percentage of your targeted users.", -}; - -# Show Survey to % of Users - -To target specific segments of your audience or manage survey exposure, Formbricks allows you to display surveys to only a percentage of your targeted users. - - - This feature is applicable for website surveys and app surveys, where managing participant engagement and response volume is crucial. - - -## **Enabling Percentage-Based Visibility** - -Set up this feature to control how many users see your survey, using a simple slider to specify the percentage of your targeted audience that should be prompted to participate. - -### **Steps to Set Up Percentage-Based Visibility** - -1. **Open Survey Editor**: Navigate to the survey where you wish to configure visibility settings & click on Edit. -2. **Access Settings**: In the Survey Editor, click on the **`Settings`** tab -3. **Navigate to Survey Trigger Options**: - - {" "} - - - - - Select **`Survey Trigger`** from the menu options. - - Choose **`Survey Display Settings`** to access visibility controls. - -4. **Adjust User Visibility Percentage**: - - - Find the **`Show Survey to % of Users`** toggle. Enable it. - - Enter the desired percentage (from 0.01% to 100%) of users to whom the survey will be shown. - - {" "} - - - - - Please note that this feature operates based on mathematical probabilistic functions, which may result in slight variations in the exact percentage of users who see the survey. - - -### **Example Usage** - -For instance, if you want to expose your survey to only half of your targeted user base, simply adjust the slider to show the survey to 50% of your users. This functionality allows you to conduct A/B testing or control the rollout of new surveys to gauge initial reactions before a wider release. - -### **Application** - -It's effective for: - -- **A/B Testing**: Compare different user experiences by showing different surveys or survey variations to different segments of your audience. -- **Gradual Rollouts**: Gradually introduce a new survey to a portion of your users to monitor initial responses and adjust based on feedback before full deployment. -- **Load Management**: Manage server load and response processing by limiting the number of responses collected at any given time. - -## **Conclusion** - -Using the **Show Survey to % of Users** feature allows for precise control over who sees your Formbricks surveys, making it an invaluable feature for targeted data collection and user experience management. By adjusting survey visibility settings, you can strategically engage segments of your audience, enhance survey testing phases, and optimize overall survey effectiveness. diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/allow-overwrite.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/allow-overwrite.webp deleted file mode 100644 index fcadbc68e0..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/allow-overwrite.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/background-settings.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/background-settings.webp deleted file mode 100644 index 01fff26e7e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/background-settings.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/card-settings.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/card-settings.webp deleted file mode 100644 index 9ad553b4cc..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/card-settings.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/doggo.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/doggo.webp deleted file mode 100644 index 65096ccd59..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/doggo.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/form-settings.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/form-settings.webp deleted file mode 100644 index 643cf950ac..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/form-settings.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/hipster-living.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/hipster-living.webp deleted file mode 100644 index c83c00ed3e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/hipster-living.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/look-and-feel.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/look-and-feel.webp deleted file mode 100644 index b7c8dcfff9..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/look-and-feel.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/mario.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/mario.webp deleted file mode 100644 index 62470994b7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/mario.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/pre-requisite.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/pre-requisite.webp deleted file mode 100644 index 1b296658df..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/pre-requisite.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-eight.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-eight.webp deleted file mode 100644 index 5c35789d03..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-eight.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-eleven.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-eleven.webp deleted file mode 100644 index 0cb0b13445..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-eleven.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-five.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-five.webp deleted file mode 100644 index 71daa7e751..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-five.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-four.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-four.webp deleted file mode 100644 index 3ca7dc38d9..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-four.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-nine.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-nine.webp deleted file mode 100644 index bd8c73fe7e..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-nine.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-one.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-one.webp deleted file mode 100644 index d8908f7cd7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-one.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-seven.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-seven.webp deleted file mode 100644 index bcbabf8315..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-seven.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-six.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-six.webp deleted file mode 100644 index 3ac271b6c8..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-six.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-ten.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-ten.webp deleted file mode 100644 index 092b337eb7..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-ten.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-three.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-three.webp deleted file mode 100644 index cedee026fe..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-three.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/step-two.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-two.webp deleted file mode 100644 index 54f3d0e907..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/step-two.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/windows-xp.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/windows-xp.webp deleted file mode 100644 index 45f588a285..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/windows-xp.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/page.mdx b/apps/docs/app/[survey-type]/global/styling-theme/page.mdx deleted file mode 100644 index a74f6f6dc4..0000000000 --- a/apps/docs/app/[survey-type]/global/styling-theme/page.mdx +++ /dev/null @@ -1,149 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import AllowOverwrite from "./images/allow-overwrite.webp"; -import BackgroundSettings from "./images/background-settings.webp"; -import CardSettings from "./images/card-settings.webp"; -import FormSettings from "./images/form-settings.webp"; -import LookAndFeelSettings from "./images/look-and-feel.webp"; -import StepEight from "./images/step-eight.webp"; -import StepEleven from "./images/step-eleven.webp"; -import StepFive from "./images/step-five.webp"; -import StepFour from "./images/step-four.webp"; -import StepNine from "./images/step-nine.webp"; -import StepSeven from "./images/step-seven.webp"; -import StepSix from "./images/step-six.webp"; -import StepTen from "./images/step-ten.webp"; - -import Doggo from "./images/doggo.webp"; -import HipsterLiving from "./images/hipster-living.webp"; -import Mario from "./images/mario.webp"; -import WindowsXp from "./images/windows-xp.webp"; - -export const metadata = { - title: "Styling Theme", - description: - "Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.", -}; - -# Styling Theme - -Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic. - -## Configuration - -In the left side bar, you find the `Configuration` page. On this page you find the `Look & Feel` section: - - - -## **Styling Options** - -1. **Form Styling:** Customize the survey card using the following settings - - - -- **Brand Color**: Sets the primary color tone of the survey. -- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background. -- **Input Color:** Alters the border color of input fields. -- **Input Border Color**: This is the color of the border of the form input field. - -2. **Card Styling:** Adjust the look of the survey card - - - -- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons). -- **Card Background Color**: Sets the card's main background color. -- **Card Border Color**: Changes the border color of the card -- **Card Shadow Color**: Adds a shadow effect for depth -- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience -- **Add Highlight Border**: Adds a distinct border for emphasis. - -3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash) - -This is only available for Link Surveys - - - -- **Color**: Pick any color for the background -- **Animation**: Add dynamic animations to enhance user experience.. -- **Upload**: Use a custom uploaded image for a personalized touch -- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work! -- **Background Overlay**: Adjust the background's opacity - -## Add Brand Logo - -Customize your survey with your brand's logo. - -Brand logos are only visible on Link Survey pages. - -1. In the Look & Feel page itself in Project settings, scroll down to see the Logo Upload box. - - - -2. Upload your logo - - - -3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice. - - - -4. Remember to save your changes! - - - -The logo settings apply across all Link Surveys pages. - -## Overwrite Styling Theme - -You can allow to overwrite the styling theme for individual surveys to create unique styles for each survey: - - - -In the survey editor, a tab called `Styling` will appear. Here you can overwrite the default styling theme. - ---- diff --git a/apps/docs/app/[survey-type]/global/variables/images/created-variables.webp b/apps/docs/app/[survey-type]/global/variables/images/created-variables.webp deleted file mode 100644 index 4567d91598..0000000000 Binary files a/apps/docs/app/[survey-type]/global/variables/images/created-variables.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/variables/images/input-variables.webp b/apps/docs/app/[survey-type]/global/variables/images/input-variables.webp deleted file mode 100644 index 6273bfe5fc..0000000000 Binary files a/apps/docs/app/[survey-type]/global/variables/images/input-variables.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/variables/images/logic-with-variables.webp b/apps/docs/app/[survey-type]/global/variables/images/logic-with-variables.webp deleted file mode 100644 index 24db41a7e3..0000000000 Binary files a/apps/docs/app/[survey-type]/global/variables/images/logic-with-variables.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/variables/images/variables-card.webp b/apps/docs/app/[survey-type]/global/variables/images/variables-card.webp deleted file mode 100644 index c9f6c781d6..0000000000 Binary files a/apps/docs/app/[survey-type]/global/variables/images/variables-card.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/variables/images/variables-usage.webp b/apps/docs/app/[survey-type]/global/variables/images/variables-usage.webp deleted file mode 100644 index 2ff22da6ad..0000000000 Binary files a/apps/docs/app/[survey-type]/global/variables/images/variables-usage.webp and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/variables/page.mdx b/apps/docs/app/[survey-type]/global/variables/page.mdx deleted file mode 100644 index a76b032dec..0000000000 --- a/apps/docs/app/[survey-type]/global/variables/page.mdx +++ /dev/null @@ -1,88 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import CreatedVariables from "./images/created-variables.webp"; -import InputVariables from "./images/input-variables.webp"; -import LogicWithVariables from "./images/logic-with-variables.webp"; -import VariablesCard from "./images/variables-card.webp"; -import VariablesUsage from "./images/variables-usage.webp"; - -export const metadata = { - title: "Variables", - description: "Add variabeles to your surveys to transform your survey into a quiz", -}; - -# Variables - -Variables are a powerful feature in Formbricks that allows you to keep track of data variables when user fills a form. This feature is especially useful when you want to use your survey as a quiz. - -## Types of Variables - -There are two types of variables you can add to your survey: - -1. **Text**: You can add text variables to your survey to capture text data. -2. **Number**: You can add number variables to your survey to capture number data. - -## How to Add Variables - -1. Edit the survey you want to add variables to & switch to the Questions tab and scroll down to the bottom of the page. You will see a section called **Variables**. - - - -2. Now click on it to add a new variable ID. You can add as many variables as you want. You can also choose the type of variable you want to add along with the default value. - - - - - -## Use case: - -- **Quiz**: You can use variables to create a quiz. For example, you can add a variable `score` and update it every time a user answers a question. You can also use the variable for recall to show the final score to the user. - -- **Personalisation**: You can use variables to store user data and personalise the survey experience. For example, you can add a variable `full_name` and update it every time a user fills in their first name and last name. You can use the variable to personalise the survey experience by addressing the user with their full name. - -## How is it different from Hidden Fields? - -Variables are different from hidden fields in the following ways: - -1. **Setting**: Hidden fields can be set through query parameters or `formbricks.init`, but the variables can only be set either during creation or dynamically by using logic actions. -2. **Updating**: Hidden fields cannot be set again, but the value of variables can be updated while the user fills the survey. -3. **Type**: Hidden fields can only store text data, but variables can store both text and number data. - -## How to use Variables - -1. Once you have added the variables to your survey, you'll be able to access them in the logic editor. You can use the variables to create logic actions and conditions. - - - -2. You can create logic based on the variables and questions in your survey and can update the variables based on the user's response. - - - - - To know more about how to use logic in Formbricks, check out the [Conditional Logic](/global/conditional-logic). - diff --git a/apps/docs/app/api-docs/components/api-docs.tsx b/apps/docs/app/api-docs/components/api-docs.tsx deleted file mode 100644 index 33ad020269..0000000000 --- a/apps/docs/app/api-docs/components/api-docs.tsx +++ /dev/null @@ -1,74 +0,0 @@ -"use client"; - -import { Button } from "@/components/button"; -import { LoadingSpinner } from "@/components/icons/loading-spinner"; -import { useTheme } from "next-themes"; -import { useState } from "react"; -import { RedocStandalone } from "redoc"; -import "./style.css"; - -export function ApiDocs() { - const { resolvedTheme } = useTheme(); - - const redocTheme = { - hideDownloadButton: true, - hideLoading: true, - nativeScrollbars: true, - theme: { - sidebar: { - backgroundColor: "transparent", - textColor: resolvedTheme === "dark" ? "rgb(203, 213, 225)" : "rgb(51, 51, 51)", - activeTextColor: "#2dd4bf", - }, - rightPanel: { - backgroundColor: "transparent", - }, - colors: { - primary: { main: "#2dd4bf" }, - text: { - primary: resolvedTheme === "dark" ? "#ffffff" : "rgb(51, 51, 51)", - }, - responses: { - success: { color: "#22c55e" }, - error: { color: "#ef4444" }, - info: { color: "#3b82f6" }, - }, - }, - typography: { - fontSize: "16px", - lineHeight: "2rem", - fontFamily: "Jost, system-ui, -apple-system, sans-serif", - headings: { - fontFamily: "Jost, system-ui, -apple-system, sans-serif", - fontWeight: "600", - }, - code: { - fontSize: "16px", - fontFamily: "ui-monospace, monospace", - }, - }, - codeBlock: { - backgroundColor: "rgb(24, 35, 58)", - }, - spacing: { unit: 5 }, - }, - }; - - const [loading, setLoading] = useState(true); - - return ( -
- - { - setLoading(false); - }} - options={redocTheme} - /> - {loading ? : null} -
- ); -} diff --git a/apps/docs/app/api-docs/components/style.css b/apps/docs/app/api-docs/components/style.css deleted file mode 100644 index c5463636c3..0000000000 --- a/apps/docs/app/api-docs/components/style.css +++ /dev/null @@ -1,86 +0,0 @@ -:root[data-theme="light"] { - --text-color: rgb(51, 65, 85); -} - -:root[data-theme="dark"] { - --text-color: rgb(203, 213, 225); -} - -h5, -.sc-dhCplO, -.sc-dpBQxM { - color: var(--text-color) !important; -} - -.tab-success, -.react-tabs__tab, -.tab-error { - background-color: transparent !important; - border: 1px solid var(--text-color) !important; - margin: 10px 5px !important; -} - -.sc-dwGkES, -.sc-ePpfBx { - background-color: rgb(24, 24, 27) !important; - border: 1px solid var(--text-color) !important; -} -.sc-ePpfBx, -.corVrN { - background-color: rgb(24, 24, 27) !important; - border: none !important; -} -.cqdCbT { - display: none !important; -} -.kiMaJz, .iZNUDY { - align-items: center !important; -} - -.react-tabs__tab-panel > div { - padding: 0 !important; - border-radius: 8px !important; - overflow: hidden !important; -} -.sc-Rjrgp { - background-color: rgb(15, 23, 42) !important; - display: flex !important; - justify-content: center !important; - flex-direction: column !important; - padding: 8px 16px !important; -} -.cugBNu { - position: static !important; -} -.daIHdK { - padding: 0 !important; -} -.kqHNPM { - margin-top: 0px !important; -} -.sc-iwXfZk, -.redoc-json { - padding: 1rem !important; - background-color: rgb(24, 35, 58) !important; -} -.sc-uYFMi { - background-color: rgb(24, 35, 58) !important; - padding: 0.5rem 0 !important; - color: #2dd4bf !important; - font-weight: 600 !important; -} -.token { - color: #2dd4bf !important; -} - -.property { - color: rgb(203, 213, 225) !important; -} -.sc-iPHsxv { - background-color: rgb(15, 23, 42) !important; - border-radius: 8px !important; -} - -.sc-hSyjfr { - background-color: rgb(15, 23, 42) !important; -} diff --git a/apps/docs/app/api-docs/page.tsx b/apps/docs/app/api-docs/page.tsx deleted file mode 100644 index 8ae8c9d144..0000000000 --- a/apps/docs/app/api-docs/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { ApiDocs } from "./components/api-docs"; - -export default function ApiDocsPage() { - return ; -} diff --git a/apps/docs/app/app-surveys/actions/images/i1.webp b/apps/docs/app/app-surveys/actions/images/i1.webp deleted file mode 100644 index 88c128dc54..0000000000 Binary files a/apps/docs/app/app-surveys/actions/images/i1.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/actions/images/i2.webp b/apps/docs/app/app-surveys/actions/images/i2.webp deleted file mode 100644 index 0e12783e67..0000000000 Binary files a/apps/docs/app/app-surveys/actions/images/i2.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/actions/page.mdx b/apps/docs/app/app-surveys/actions/page.mdx deleted file mode 100644 index 69002b8aa9..0000000000 --- a/apps/docs/app/app-surveys/actions/page.mdx +++ /dev/null @@ -1,121 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import I1 from "./images/i1.webp"; -import I2 from "./images/i2.webp"; - -export const metadata = { - title: "Using Actions in Formbricks", - description: - "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.", -}; - -# Actions - -Actions are predefined events within your app that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings. - -## **How Do Actions Work?** - -Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match for that survey. This capability ensures that surveys are triggered at the right time. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard. - -## **Why Are Actions Useful?** - -Actions are invaluable for enhancing survey relevance and effectiveness: - -- **Personalized Engagement**: Surveys triggered by user actions ensure content is highly relevant and engaging, matching each user’s current context. -- **User Attributes**: By tying surveys to specific user attributes, such as activity levels or feature usage, you can customize the survey experience to reflect individual user profiles. -- **User Targeting**: Precise targeting based on user attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey. - -## **Setting Up No-Code Actions** - -Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code. - -To add a No-Code Action: - -1. Visit the Formbricks Dashboard & switch to the Actions tab: - - - -2. Now click on “Add Action” - - - -Here are four types of No-Code actions you can set up: - -### **1. Click Action** - -Click Action is triggered when a user clicks on a specific element within your application. You can define the element's inner text or CSS selector to trigger the survey. - -- **Inner Text**: Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application. - -- **CSS Selector**: Verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions. - -### **2. Page view Action** - -This action is triggered when a user visits a page within your application. - -### **3. Exit Intent Action** - -This action is triggered when a user is about to leave your application. It helps capture user feedback before they exit, providing valuable insights into user experiences and potential improvements. - -### **4. 50% Scroll Action** - -This action is triggered when a user scrolls through 50% of a page within your application. It helps capture user feedback at a specific point in their journey, enabling you to gather insights based on user interactions. - -This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows: - - -You can combine the url filters with any of the no-code actions to trigger the survey based on the URL match conditions. - -### **URL Match Conditions** - -- **exactMatch**: Triggers the action when the URL exactly matches the specified string. -- **contains**: Activates when the URL contains the specified substring. -- **startsWith**: Fires when the URL starts with the specified string. -- **endsWith**: Executes when the URL ends with the specified string. -- **notMatch**: Triggers when the URL does not match the specified condition. -- **notContains**: Activates when the URL does not contain the specified substring. - - - -## **Setting Up Code Actions** - -For more granular control, you can implement actions directly in your codebase: - -1. **Configure the Action**: First, add the action via the Formbricks web interface to make it available for survey configuration. - After that you can fire an action using `formbricks.track()` - -2. **Track an Action**: Use formbricks.track() to send an action event to Formbricks. - - - - -```javascript -formbricks.track("Action Name"); -``` - - - -Here is an example of how to fire an action when a user clicks a button: - - - -```javascript -const handleClick = () => { - formbricks.track("Button Clicked"); -}; - -return ; -``` - - - diff --git a/apps/docs/app/app-surveys/advanced-targeting/germans-gpt.webp b/apps/docs/app/app-surveys/advanced-targeting/germans-gpt.webp deleted file mode 100644 index a36ec28252..0000000000 Binary files a/apps/docs/app/app-surveys/advanced-targeting/germans-gpt.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/advanced-targeting/hni.webp b/apps/docs/app/app-surveys/advanced-targeting/hni.webp deleted file mode 100644 index ad56505d05..0000000000 Binary files a/apps/docs/app/app-surveys/advanced-targeting/hni.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/advanced-targeting/page.mdx b/apps/docs/app/app-surveys/advanced-targeting/page.mdx deleted file mode 100644 index e7a62f609d..0000000000 --- a/apps/docs/app/app-surveys/advanced-targeting/page.mdx +++ /dev/null @@ -1,29 +0,0 @@ -export const metadata = { - title: "Advanced Targeting for App Surveys | Formbricks", - description: - "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, metadata, and other segments. This helps you get more relevant feedback and make data-driven decisions.", -}; - -# Advanced Targeting - -Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, device type, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code. - -## How to setup Advanced Targeting - -Advanced Targeting is only available on the Pro plan! - -1. On the Formbricks dashboard, click on **People** tab from the top navigation bar. - -2. Switch to the **Segments** tab & click on **Create Segment**. - -3. Give your segment a title & a description to help you remember what this segment is about. - -4. Now click on the **Add Filter** button to add a filter. You can filter based on user attributes, other segments, devices, and more. - -5. To group a set of filters together, click on the Three Dots icon on the right side of the filter and click on **Create Group**. - -6. Try playing around with different filters & conditions that we have provided to see how the segment size changes. - -7. Once you are happy with the segment, click on **Save Segment**. - -8. Now, when you create a survey, you can select this segment to target your survey to. diff --git a/apps/docs/app/app-surveys/advanced-targeting/power-users.webp b/apps/docs/app/app-surveys/advanced-targeting/power-users.webp deleted file mode 100644 index 4c1bb564a1..0000000000 Binary files a/apps/docs/app/app-surveys/advanced-targeting/power-users.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/advanced-targeting/ride-hailing.webp b/apps/docs/app/app-surveys/advanced-targeting/ride-hailing.webp deleted file mode 100644 index 694cd90790..0000000000 Binary files a/apps/docs/app/app-surveys/advanced-targeting/ride-hailing.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/advanced-targeting/upsell-miro.webp b/apps/docs/app/app-surveys/advanced-targeting/upsell-miro.webp deleted file mode 100644 index 8da20d2c9e..0000000000 Binary files a/apps/docs/app/app-surveys/advanced-targeting/upsell-miro.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/framework-guides/components/libraries.tsx b/apps/docs/app/app-surveys/framework-guides/components/libraries.tsx deleted file mode 100644 index 0dfa3036fb..0000000000 --- a/apps/docs/app/app-surveys/framework-guides/components/libraries.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Button } from "@/components/button"; -import logoHtml from "@/images/frameworks/html5.svg"; -import logoNextjs from "@/images/frameworks/nextjs.svg"; -import logoReactJs from "@/images/frameworks/reactjs.svg"; -import logoVueJs from "@/images/frameworks/vuejs.svg"; -import Image from "next/image"; - -const libraries = [ - { - href: "#html", - name: "HTML", - description: "All you need to do is add 3 lines of code to your HTML script and thats it, you're done!", - logo: logoHtml as string, - }, - { - href: "#react-js", - name: "React.js", - description: "Load the our Js library with your environment ID and you're ready to go!", - logo: logoReactJs as string, - }, - { - href: "#next-js", - name: "Next.js", - description: - "Natively add us to your NextJs project with support for both App as well as Pages project structure!", - logo: logoNextjs as string, - }, - { - href: "#vue-js", - name: "Vue.js", - description: "Simply add us to your router change and sit back!", - logo: logoVueJs as string, - }, - { - href: "#react-native", - name: "React Native", - description: "Easily integrate our SDK with your React Native app for seamless survey support!", - logo: logoReactJs as string, - }, -]; - -export function Libraries() { - return ( - - ); -} diff --git a/apps/docs/app/app-surveys/framework-guides/images/env-id.webp b/apps/docs/app/app-surveys/framework-guides/images/env-id.webp deleted file mode 100644 index 1c148f2e64..0000000000 Binary files a/apps/docs/app/app-surveys/framework-guides/images/env-id.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/framework-guides/images/react-in-app-survey-app-popup-form.webp b/apps/docs/app/app-surveys/framework-guides/images/react-in-app-survey-app-popup-form.webp deleted file mode 100644 index ae74a5d73b..0000000000 Binary files a/apps/docs/app/app-surveys/framework-guides/images/react-in-app-survey-app-popup-form.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/framework-guides/images/widget-connected.webp b/apps/docs/app/app-surveys/framework-guides/images/widget-connected.webp deleted file mode 100644 index 90b82de9f4..0000000000 Binary files a/apps/docs/app/app-surveys/framework-guides/images/widget-connected.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/framework-guides/images/widget-not-connected.webp b/apps/docs/app/app-surveys/framework-guides/images/widget-not-connected.webp deleted file mode 100644 index 2cd15d007c..0000000000 Binary files a/apps/docs/app/app-surveys/framework-guides/images/widget-not-connected.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/framework-guides/page.mdx b/apps/docs/app/app-surveys/framework-guides/page.mdx deleted file mode 100644 index 85d27a588c..0000000000 --- a/apps/docs/app/app-surveys/framework-guides/page.mdx +++ /dev/null @@ -1,447 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import { Libraries } from "./components/libraries"; - -import ReactApp from "./images/react-in-app-survey-app-popup-form.webp"; -import WidgetConnected from "./images/widget-connected.webp"; -import WidgetNotConnected from "./images/widget-not-connected.webp"; - -export const metadata = { - title: "Integrate Formbricks: Comprehensive Framework Guide & Integration Tutorial", - description: - "Master the integration of Formbricks into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.", -}; - -# Framework Guides - -One can integrate Formbricks App Survey SDK into their app using multiple options! Checkout the options below that we provide! If you are looking -for something else, please [open a new Github Discussion](https://github.com/formbricks/formbricks/discussions) and we would be glad to help. - - - ---- - -## Prerequisites - -Before getting started, make sure you have: - -1. A web application (behind your user authentication system) in your desired framework is set up and running. -2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings. - ---- - -## HTML - -All you need to do is copy a ` - -``` - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - URL of the hosted Formbricks instance. - - - -Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - ---- - -## ReactJS - -Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`. Note that zod is required as a peer dependency must also be installed in your project. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js zod -``` -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js zod -``` -```shell {{ title: 'yarn' }} -yarn add @formbricks/js zod -``` - - - -Now, update your App.js/ts file to initialise Formbricks. - - - -```js -// other imports -import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", //optional - }); -} - -function App() { - // your own app -} - -export default App; -``` - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - URL of the hosted Formbricks instance. - - - -Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - ---- - -## NextJS - -NextJs projects typically follow two main conventions: the App Directory and the Pages Directory. -To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the -guidelines for each convention below: - -- App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file. -- Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there. - -Code snippets for the integration for both conventions are provided to further assist you. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js zod -``` -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js zod -``` -```shell {{ title: 'yarn' }} -yarn add @formbricks/js zod -``` - - - - -### App Directory - - - - -```tsx {{title: 'Typescript'}} -"use client"; - -import { usePathname, useSearchParams } from "next/navigation"; -import { useEffect } from "react"; -import formbricks from "@formbricks/js"; - -export default function FormbricksProvider() { - const pathname = usePathname(); - const searchParams = useSearchParams(); - - useEffect(() => { - formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", //optional - }); - }, []); - - useEffect(() => { - formbricks?.registerRouteChange(); - }, [pathname, searchParams]); - - return null; -} -``` - - - - -```tsx {{title: 'Typescript'}} -// other imports -import FormbricksProvider from "./formbricks"; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - ); -} -``` - - - - -### Pages Directory - - - - -```tsx {{ title: 'Typescript' }} -// other import -import { useRouter } from "next/router"; -import { useEffect } from "react"; -import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", //optional - }); -} - -export default function App({ Component, pageProps }: AppProps) { - const router = useRouter(); - - useEffect(() => { - // Connect next.js router to Formbricks - const handleRouteChange = formbricks?.registerRouteChange; - router.events.on("routeChangeComplete", handleRouteChange); - - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - }; - }, []); - return ; -} -``` - - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - URL of the hosted Formbricks instance. - - - -First we initialize the Formbricks SDK, ensuring that it only runs on the client side. -To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event. - -Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - ---- - -## VueJs - -Integrating the Formbricks SDK with Vue.js is a straightforward process. -We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/js -```` - -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/js -``` - -```shell {{ title: 'yarn' }} -yarn add @formbricks/js -``` - - - - - -```js -import formbricks from "@formbricks/js"; - -if (typeof window !== "undefined") { - formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", //optional - }); -} - -export default formbricks; -``` - - - - - -```js -// other imports -import formbricks from "@/formbricks"; - -const app = createApp(App); - -app.use(router); - -app.mount("#app"); - -router.afterEach((to, from) => { - if (typeof formbricks !== "undefined") { - formbricks.registerRouteChange(); - } -}); -``` - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - - - URL of the hosted Formbricks instance. - - - -Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup! - -## React Native - -Install the Formbricks React Native SDK using one of the package managers, i.e., npm, pnpm, or yarn. - - - -```shell {{ title: 'npm' }} -npm install @formbricks/react-native -``` -```shell {{ title: 'pnpm' }} -pnpm add @formbricks/react-native -``` -```shell {{ title: 'yarn' }} -yarn add @formbricks/react-native -``` - - - -Now, update your App.js/App.tsx file to initialize Formbricks: - - - -```js -// other imports -import Formbricks from "@formbricks/react-native"; - -export default function App() { - return ( - <> - {/* Your app content */} - - - ); -} -``` - - - -### Required customizations to be made - - - - Formbricks Environment ID. - - - URL of the hosted Formbricks instance. - - - ---- - -## Validate your setup - -Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this: - - - -To this: - - - -## Debugging Formbricks Integration - -Enabling Formbricks debug mode in your browser is a useful troubleshooting step for identifying and resolving complex issues. This section outlines how to activate debug mode, covers common use cases, and provides insights into specific debug log messages. - -### Activate Debug Mode - -To activate Formbricks debug mode: - -1. **Via URL Parameter:** - - - Enable debug mode mode by adding `?formbricksDebug=true` to your application's URL (e.g. `https://example.com?formbricksDebug=true` or `https://example.com?page=123&formbricksDebug=true`). This parameter will enable debugging for the current page. - -2. **View Debug Logs:** - - - Open your browser's developer tools by pressing `F12` or right-clicking and selecting "Inspect." - - Navigate to the "Console" tab to view Formbricks debugging information. - - **How to Open Browser Console:** - - - **Google Chrome:** Press `F12` or right-click, select "Inspect," and go to the "Console" tab. - - **Firefox:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab. - - **Safari:** Press `Option + Command + C` to open the developer tools and navigate to the "Console" tab. - - **Edge:** Press `F12` or right-click, select "Inspect Element," and go to the "Console" tab. - -### Common Use Cases - -Debug mode is beneficial for scenarios such as: - -- Verifying Formbricks initialization. -- Identifying survey trigger issues. -- Troubleshooting unexpected behavior. - -### Debug Log Messages - -Debug log messages provide insights into: - -- API calls and responses. -- Event tracking, survey triggers and form interactions. -- Initialization errors. - -**Can’t figure it out?**: **[Get help in Github Discussions](https://github.com/formbricks/formbricks/discussions)** - ---- diff --git a/apps/docs/app/app-surveys/quickstart/images/i1.webp b/apps/docs/app/app-surveys/quickstart/images/i1.webp deleted file mode 100644 index 0714f4a19a..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i1.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i2.webp b/apps/docs/app/app-surveys/quickstart/images/i2.webp deleted file mode 100644 index 66b2db4cca..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i2.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i3.webp b/apps/docs/app/app-surveys/quickstart/images/i3.webp deleted file mode 100644 index 76b9658d5d..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i3.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i3_1.webp b/apps/docs/app/app-surveys/quickstart/images/i3_1.webp deleted file mode 100644 index 15b7efe1c0..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i3_1.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i4.webp b/apps/docs/app/app-surveys/quickstart/images/i4.webp deleted file mode 100644 index f7bae96938..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i4.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i5.webp b/apps/docs/app/app-surveys/quickstart/images/i5.webp deleted file mode 100644 index 1962df70a8..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i5.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i6.webp b/apps/docs/app/app-surveys/quickstart/images/i6.webp deleted file mode 100644 index a24c2af56d..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i6.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i7.webp b/apps/docs/app/app-surveys/quickstart/images/i7.webp deleted file mode 100644 index 4a3a352d2d..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i7.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/images/i8.webp b/apps/docs/app/app-surveys/quickstart/images/i8.webp deleted file mode 100644 index e5c0ab7442..0000000000 Binary files a/apps/docs/app/app-surveys/quickstart/images/i8.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/quickstart/page.mdx b/apps/docs/app/app-surveys/quickstart/page.mdx deleted file mode 100644 index 7a0f32db1b..0000000000 --- a/apps/docs/app/app-surveys/quickstart/page.mdx +++ /dev/null @@ -1,115 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import I1 from "./images/i1.webp"; -import I2 from "./images/i2.webp"; -import I3 from "./images/i3.webp"; -import I3_1 from "./images/i3_1.webp"; -import I4 from "./images/i4.webp"; -import I5 from "./images/i5.webp"; -import I6 from "./images/i6.webp"; -import I7 from "./images/i7.webp"; -import I8 from "./images/i8.webp"; - -export const metadata = { - title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster", - description: - "Formbricks is the easiest way to create and manage app surveys. This quickstart guide will show you how to create your first app survey in under 5 minutes.", -}; - -# Quickstart - -App surveys have 6-10x better conversion rates than emailed surveys. This tutorial explains how to run a survey in both your web app and mobile app (React Native) in just 10 to 15 minutes. Let’s go! - -1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below, choose the "Formbricks Surveys" option: - - - -2. **Choose your Project Channel**: On this step, you have to choose between the various channels that you want your project to be created in, you can create both app and link surveys from all the channels, but for the onboarding, please choose between the app surveys or the public website options, upon doing this, you'll be prompted to connect your app / website to formbricks. - - - -3. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app: - - - -Paste the code snippet in your app and reload the page. You should now see a message being displayed that your app or website is now connected with formbricks. - - - -Onboarding is complete! Now let’s create our first survey as you should see templates to choose from after clicking on **Next**: - - - -4. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings: - -Pick the Survey Type as **App Survey**. - - - -5. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session: - - - -6. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue: - - - Please change this setting later on after testing your survey to prevent survey fatigue for your users. - - - - -7. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey. - - - ---- - -- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-surveys/framework-guides) to get started with your app survey. -- Head over to our JS SDK documentation to get started with the [JS SDK](/developer-docs/js-sdk). - -Still struggling or something not working as expected? [Join us in Github Discussions](https://github.com/formbricks/formbricks/discussions) and we'd be glad to assist you! diff --git a/apps/docs/app/app-surveys/recontact/app-survey.webp b/apps/docs/app/app-surveys/recontact/app-survey.webp deleted file mode 100644 index 467e536c8a..0000000000 Binary files a/apps/docs/app/app-surveys/recontact/app-survey.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/recontact/global-wait-time.webp b/apps/docs/app/app-surveys/recontact/global-wait-time.webp deleted file mode 100644 index 6208dfa66b..0000000000 Binary files a/apps/docs/app/app-surveys/recontact/global-wait-time.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/recontact/ignore-wait-time.webp b/apps/docs/app/app-surveys/recontact/ignore-wait-time.webp deleted file mode 100644 index 97809d77c2..0000000000 Binary files a/apps/docs/app/app-surveys/recontact/ignore-wait-time.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/recontact/page.mdx b/apps/docs/app/app-surveys/recontact/page.mdx deleted file mode 100644 index 8bb45df6ca..0000000000 --- a/apps/docs/app/app-surveys/recontact/page.mdx +++ /dev/null @@ -1,105 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import AppSurvey from "./app-survey.webp"; -import GlobalWaitTime from "./global-wait-time.webp"; -import IgnoreWaitTime from "./ignore-wait-time.webp"; -import SurveyRecontact from "./survey-recontact.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.", -}; - -# 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](/best-practices/docs-feedback) or the [Feedback Box](/best-practices/feedback-box). - - - -## Project-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 Project 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 us in Github Discussions](https://github.com/formbricks/formbricks/discussions) and we'd be glad to assist you! diff --git a/apps/docs/app/app-surveys/recontact/survey-recontact.webp b/apps/docs/app/app-surveys/recontact/survey-recontact.webp deleted file mode 100644 index 552871ab31..0000000000 Binary files a/apps/docs/app/app-surveys/recontact/survey-recontact.webp and /dev/null differ diff --git a/apps/docs/app/app-surveys/user-identification/page.mdx b/apps/docs/app/app-surveys/user-identification/page.mdx deleted file mode 100644 index 9fb7ccb67b..0000000000 --- a/apps/docs/app/app-surveys/user-identification/page.mdx +++ /dev/null @@ -1,115 +0,0 @@ -export const metadata = { - title: "Identifying Users in Formbricks App Surveys", - description: - "Dive into the importance of user identification in surveys. Boost your survey response rates and target the right users with Formbricks.", -}; - -# User Identification - -User Identification helps you to not only segment your users but also to see more information about the user who responded to a survey. This helps you to target surveys to specific user segments and see more information about the user who responded to a survey. - -### Understanding Identified vs Unidentified Users - -In Formbricks, understanding the distinction between identified and unidentified users is crucial for effective survey segmentation and targeted feedback collection. - -| Feature | Unidentified Users | Identified Users | -| -------------------------------------------------------- | ------------------ | ---------------- | -| Show surveys based on **trigger** actions | ✅ | ✅ | -| Set **recontact details** to avoid survey fatique | ✅ | ✅ | -| Target a subset of users using **attributes & segments** | ❌ | ✅ | -| Collect **user information** in Formbricks | ❌ | ✅ | -| Track **custom attributes** | ❌ | ✅ | -| Counts towards your **monthly tacked user (MTU)** limit | ❌ | ✅ | -| Recommended for **public-facing websites** | ✅ | ❌ | -| Recommended for **web apps after login** | ❌ | ✅ | - -## Identified Users - -Identified users are those for whom specific information has been set, notably the userId. This identification allows for more precise targeting of surveys and a deeper understanding of the feedback provided. When enabled, all information specified by you and all actions are sent to Formbricks. - -This method is recommended for applications where users are required to log in and will often return. - -### Setting User ID - -To enable the User identification feature you need to set the `userId` in the init() call of Formbricks. Only when the `userId` is set the person will be visible in the Formbricks dashboard. The `userId` can be any string and it's best to use the default identifier you use in your app (e.g. unique id from database or the email address if it's unique) but you can also anonymize these as long as they are unique for every user. - - - - -```javascript -formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", -}); -``` - - - - -### Enhanced Initialization with User Attributes - -In addition to setting the `userId`, Formbricks allows you to set user attributes right at the initialization. This ensures that your user data is seamlessly integrated from the start. Here's how you can include user attributes in the `init()` function: - - - - -```javascript -formbricks.init({ - environmentId: "", - apiHost: "", - userId: "", - attributes: { - // your custom attributes - Plan: "premium", - }, -}); -``` - - - - -## Setting Custom User Attributes - -You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.): - - - Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently limited to 150 attributes per environment. - - - - - -```javascript -formbricks.setAttribute("Plan", "free"); -``` - - - - -Generally speaking, the setAttribute function works like this: - - - - -```javascript -formbricks.setAttribute("attribute_key", "attribute_value"); -``` - - - -Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set. - -### Logging Out Users - -When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function: - - - - -```javascript -formbricks.logout(); -``` - - - diff --git a/apps/docs/app/best-practices/cancel-subscription/change-text.webp b/apps/docs/app/best-practices/cancel-subscription/change-text.webp deleted file mode 100644 index 6ff799b492..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/change-text.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/create-cancel-flow.webp b/apps/docs/app/best-practices/cancel-subscription/create-cancel-flow.webp deleted file mode 100644 index 6d88d33e02..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/create-cancel-flow.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/page.mdx b/apps/docs/app/best-practices/cancel-subscription/page.mdx deleted file mode 100644 index 8aa9958afa..0000000000 --- a/apps/docs/app/best-practices/cancel-subscription/page.mdx +++ /dev/null @@ -1,155 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import ChangeText from "./change-text.webp"; -import CreateChurnFlow from "./create-cancel-flow.webp"; -import PublishSurvey from "./publish-survey.webp"; -import RecontactOptions from "./recontact-options.webp"; -import SelectAction from "./select-action.webp"; -import TriggerCSS from "./trigger-css-selector.webp"; -import TriggerInnerText from "./trigger-inner-text.webp"; -import TriggerPageUrl from "./trigger-page-url.webp"; - -export const metadata = { - title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps", - description: - "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures", -}; - -#### Best Practices - -# Learn from Churn - -Churn is hard, but can teach you a lot. Whenever a user decides that your product isn’t worth it anymore, you have a unique opportunity to get deep insights. These insights are pure gold to reduce churn. - -## Purpose - -The Churn Survey is among the most effective ways to identify weaknesses in your offering. People were willing to pay but now are not anymore: What changed? Let’s find out! - -## Formbricks Approach - -- Ask at exactly the right point in time -- Follow-up to prevent bad reviews -- Coming soon: Make survey mandatory - -## Overview - -To run the Churn Survey in your app you want to proceed as follows: - -1. Create new Churn Survey at [app.formbricks.com](https://app.formbricks.com/) -2. Set up the user action to display survey at right point in time -3. Choose correct recontact options to never miss a feedback -4. Prevent that churn! - - - ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/app-surveys/quickstart) - - -### 1. Create new Churn Survey - -If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup) - -Click on "Create Survey" and choose the template “Churn Survey”: - - - -### 2. Update questions (if you like) - -You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊 - - - -_Want to change the button color? You can do so in the project settings._ - -Save, and move over to the “Audience” tab. - -### 3. Pre-segment your audience - -In this case, you don’t really need to pre-segment your audience. You likely want to ask everyone who hits the “Cancel subscription” button. - -### 4. Set up a trigger - -To create the trigger for your Churn Survey, you have three options to choose from: - -1. **Trigger by Inner Text:** You likely have a “Cancel Subscription” button in your app. You can setup a user Action with the according `Inner Text` to trigger the survey, like so: - - - -2. **Trigger by CSS Selector:** In case you have more than one button saying “Cancel Subscription” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“cancel-subscription”` and set your user action up like so: - - - -1. **Trigger by page view filters:** Lastly, you could also display your survey on a subpage “/subscription-cancelled” where you forward users once they cancelled the trial subscription. You can then create a user Action with the type `Page View` and add select `Limit to specific pages` to add url filters, with the following settings: - - - -Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅ - -Here is our complete [Actions manual](/app-surveys/actions/) covering [No-Code](/app-surveys/actions#setting-up-no-code-actions) and [Code](/app-surveys/actions#setting-up-code-actions) Actions. - - - ## Pre-churn flow coming soon We’re currently building full-screen survey pop-ups. You’ll be able to prevent users from closing the survey unless they respond to it. It’s certainly debatable if you want that but you could force them to click through the survey before letting them cancel 🤷 - - -### 5. Select Action in the “When to ask” card - - - -### 6. Last step: Set Recontact Options correctly - -Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you milk these super valuable insights. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days: - - - -These settings make sure the survey is always displayed, when a user wants to Cancel their subscription. - -### 7. Congrats! You’re ready to publish your survey 💃 - - - - - ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Churn Survey in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. - - -### - -# Get those insights! 🎉 diff --git a/apps/docs/app/best-practices/cancel-subscription/publish-survey.webp b/apps/docs/app/best-practices/cancel-subscription/publish-survey.webp deleted file mode 100644 index 1452de30d6..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/publish-survey.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/recontact-options.webp b/apps/docs/app/best-practices/cancel-subscription/recontact-options.webp deleted file mode 100644 index 3597c60e5f..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/recontact-options.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/select-action.webp b/apps/docs/app/best-practices/cancel-subscription/select-action.webp deleted file mode 100644 index a120c5770d..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/select-action.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/trigger-css-selector.webp b/apps/docs/app/best-practices/cancel-subscription/trigger-css-selector.webp deleted file mode 100644 index 404802b219..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/trigger-css-selector.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/trigger-inner-text.webp b/apps/docs/app/best-practices/cancel-subscription/trigger-inner-text.webp deleted file mode 100644 index bae93a23cd..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/trigger-inner-text.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/cancel-subscription/trigger-page-url.webp b/apps/docs/app/best-practices/cancel-subscription/trigger-page-url.webp deleted file mode 100644 index 71f03ec7d5..0000000000 Binary files a/apps/docs/app/best-practices/cancel-subscription/trigger-page-url.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/add-question.webp b/apps/docs/app/best-practices/contact-form/images/add-question.webp deleted file mode 100644 index 2e5fd8b6a1..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/add-question.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/email-field.webp b/apps/docs/app/best-practices/contact-form/images/email-field.webp deleted file mode 100644 index 9ccd33683e..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/email-field.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/embed.webp b/apps/docs/app/best-practices/contact-form/images/embed.webp deleted file mode 100644 index 1be2dae3e1..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/embed.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/message-field.webp b/apps/docs/app/best-practices/contact-form/images/message-field.webp deleted file mode 100644 index a96d778c4b..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/message-field.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/name-field.webp b/apps/docs/app/best-practices/contact-form/images/name-field.webp deleted file mode 100644 index ce60346972..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/name-field.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/query-form.webp b/apps/docs/app/best-practices/contact-form/images/query-form.webp deleted file mode 100644 index 206e6fe5f9..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/query-form.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/single-select-questionare.webp b/apps/docs/app/best-practices/contact-form/images/single-select-questionare.webp deleted file mode 100644 index f273729ab9..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/single-select-questionare.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/images/welcome1.webp b/apps/docs/app/best-practices/contact-form/images/welcome1.webp deleted file mode 100644 index 6dee4dbeaf..0000000000 Binary files a/apps/docs/app/best-practices/contact-form/images/welcome1.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/contact-form/page.mdx b/apps/docs/app/best-practices/contact-form/page.mdx deleted file mode 100644 index d932e0898d..0000000000 --- a/apps/docs/app/best-practices/contact-form/page.mdx +++ /dev/null @@ -1,174 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; -import AddQuestion from "./images/add-question.webp"; -import EmailField from "./images/email-field.webp"; -import EmbedImage from "./images/embed.webp"; -import MessageField from "./images/message-field.webp"; -import NameField from "./images/name-field.webp"; -import QueryImage from "./images/query-form.webp"; -import SingleSelect from "./images/single-select-questionare.webp"; -import ToggleButton from "./images/welcome1.webp"; - -export const metadata = { - title: "Creating a Contact Form with Formbricks: A Step-by-Step Guide", - description: - "Learn how to easily create a professional contact form using Formbricks, perfect for beginners and experts alike.", -}; - -# Creating a Contact Form with Formbricks: A Step-by-Step Guide - -Welcome to this comprehensive guide on creating a contact form using Formbricks. Whether you're just starting out or you're a seasoned developer, this tutorial will walk you through every step of building an engaging and effective contact form. - -## What We’ll Build - -By the end of this tutorial, you'll have created a simple contact form featuring: - -1. A welcoming introduction. -2. Fields for collecting the user's name and email. -3. A question to find out why they’re contacting you. -4. A message field for users to share their queries. - -### Setting Up Your Form - -First, let's lay the groundwork for your form: - -1. Head to the Surveys page and click on **New Survey**. -2. Select **Start from Scratch** to create a new form. -3. In the form editor, click the three dots next to a question, then select **Change Question Type** and choose **Statement (Call to Action)**. - - - -4. Add a welcoming statement to greet your users and explain the form's purpose. -5. Personalize the greeting to make it inviting and encourage engagement. - -A warm welcome sets the tone for your form. Make it friendly to encourage users to participate. - -### Adding the Name Field - -Next, let's capture the user's name: - -1. Click **Add Question**. - -2. Enter the prompts for the name field. -3. Turn off the **Long Answer** option at the bottom right. -4. Adjust any **settings**, such as making the field required. - - - -### Adding the Email Field - -Now, let’s add a field to collect the user's email address: - -1. Click **Add Question** again. -2. Select Email as the input type. -3. Enter a prompt for the email field. - - - -### Adding a Reason for Contact - -Let’s now understand why the user is contacting you: - -1. Click **Add Question** once again. -2. Select **Change Question** Type and choose **Single Select**. -3. Add the question "Why are you contacting us today?" - - - -Predefined options help categorize inquiries, making it easier for you to respond appropriately. - -4. Add options like "General Inquiry," "Support," and "Feedback." - - - -### Adding a Message Field - -Finally, let’s provide a space for the user’s message: - -1. Click **Add Question** for the last time. -2. Add the question: "Your Message." -3. Set the placeholder text to something like "Please write your message here." - - - -4. Consider setting a minimum character count to ensure detailed messages. - -### Finalizing Your Form - -Once your form is complete, follow these final steps: - -1. Review and rearrange the questions if necessary. -2. Test the form by filling it out as a user. -3. Customize the **Thank You** message for submissions. -4. Publish the form to get a shareable link. -5. Enable submission notifications: - - Go to your Formbricks account settings. - - Verify your email address. - - Ensure that **Survey** notifications are enabled. - -### Integrating the Contact Form into Your Website - -After publishing the form, follow these steps to integrate it into your site: - -1. **Copy the Shareable Link** - - - Find your form in the Formbricks dashboard, and click Share. - - Select Embed in a Web Page. - - - -2. **Embed the Code** - - Copy the provided code and paste it into your website where you want the form to appear. - - - Note: There is an options toggle button called "Embed Mode." When enabled, it updates the `src` to `"?embed=true"` and displays your survey in a minimalist design, removing padding and background for a cleaner look. - - -3. **Test the Integration** - - Check if the form displays correctly on your site. - - Submit a test entry to ensure everything works and notifications are received. - -## Conclusion - -Congratulations! You’ve successfully created and integrated a professional contact form using Formbricks. This form will help you collect valuable information from your visitors in an efficient, user-friendly way. - -A great contact form strikes the balance between collecting necessary details and being simple enough to encourage submissions. **You’ve achieved just that!** diff --git a/apps/docs/app/best-practices/docs-feedback/add-action.webp b/apps/docs/app/best-practices/docs-feedback/add-action.webp deleted file mode 100644 index 04ccbf56ac..0000000000 Binary files a/apps/docs/app/best-practices/docs-feedback/add-action.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/docs-feedback/change-id.webp b/apps/docs/app/best-practices/docs-feedback/change-id.webp deleted file mode 100644 index 92b914ce15..0000000000 Binary files a/apps/docs/app/best-practices/docs-feedback/change-id.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/docs-feedback/copy-ids.webp b/apps/docs/app/best-practices/docs-feedback/copy-ids.webp deleted file mode 100644 index 6a3ac7b7e4..0000000000 Binary files a/apps/docs/app/best-practices/docs-feedback/copy-ids.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/docs-feedback/docs-navi.webp b/apps/docs/app/best-practices/docs-feedback/docs-navi.webp deleted file mode 100644 index 527244613b..0000000000 Binary files a/apps/docs/app/best-practices/docs-feedback/docs-navi.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/docs-feedback/docs-template.webp b/apps/docs/app/best-practices/docs-feedback/docs-template.webp deleted file mode 100644 index 0cc8fab9d3..0000000000 Binary files a/apps/docs/app/best-practices/docs-feedback/docs-template.webp and /dev/null differ diff --git a/apps/docs/app/best-practices/docs-feedback/page.mdx b/apps/docs/app/best-practices/docs-feedback/page.mdx deleted file mode 100644 index 18bace87c1..0000000000 --- a/apps/docs/app/best-practices/docs-feedback/page.mdx +++ /dev/null @@ -1,439 +0,0 @@ -import { MdxImage } from "@/components/mdx-image"; - -import AddAction from "./add-action.webp"; -import ChangeId from "./change-id.webp"; -import CopyIds from "./copy-ids.webp"; -import DocsNavi from "./docs-navi.webp"; -import DocsTemplate from "./docs-template.webp"; -import SelectAction from "./select-action.webp"; -import SurveyTrigger from "./survey-trigger.webp"; -import SwitchToDev from "./switch-to-dev.webp"; - -export const metadata = { - title: - "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks", - description: - "Learn the step-by-step process to effectively measure the clarity of your documentation using Formbricks Cloud. Dive into best practices, setting up cloud environments, integrating feedback widgets on your frontend, and connecting to the Formbricks API for a seamless user experience.", -}; - -#### Best Practices - -# Docs Feedback - -Docs Feedback allows you to measure how clear your documentation is. - -## Purpose - -Unlike yourself, your users don't spend 5-7 days per week thinking about your product. To fight the "Curse of Knowledge" you have to measure how clear your docs are. - -## Installation - -To get this running, you'll need a bit of time. Here are the steps we're going through: - -1. Set up Formbricks Cloud -2. Build the frontend -3. Connect to API -4. Test - -## 1. Setting up Formbricks Cloud - -1. To get started, create an account for the [Formbricks Cloud](https://app.formbricks.com/auth/signup). - -2. In the Menu (top right) you see that you can toggle switch between a “Development” and a “Production” environment. These are two separate environments so your test data doesn’t mess up the insights from prod. Switch to “Development”: - - - -3. Then, create a survey using the template “Docs Feedback”: - - - -4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉 - - - -5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**. - - - Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need to update the choices accordingly. They have to be identical to the frontend we're building in the next step. - - -6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “Survey Trigger” and create a new Action: - - - -7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot: - - - -8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝 - - - -**You’re all setup in Formbricks Cloud for now 👍** - -## 2. Build the frontend - - - Your frontend might work differently Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate what you should consider building yours 😊 - - -Before we start, lets talk about the widget. It works like this: - -- Once the user selects yes/no, a partial response is sent to the Formbricks API. It includes the feedback and the current page url. -- Then the user is presented with an additional open text field to further explain their choice. Once it's submitted, the previous response is updated with the additional feedback. - -This allows us to capture and analyze partial feedback where the user is not willing to provide additional information. - -**Let's do this 👇** - -1. Open the code editor where you handle your docs page. - -2. Likely, you have a template file or similar which renders the navigation at the bottom of the page: - - - -Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. - -3. Write the frontend code for the widget. Here is the full component (we break it down right below): - - - - -```tsx -import { Button } from "@/modules/ui/components/Button"; -import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/popover"; -import { useRouter } from "next/router"; -import { useState } from "react"; -import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit"; - -export const DocsFeedback = () => { - const router = useRouter(); - const [isOpen, setIsOpen] = useState(false); - const [sharedFeedback, setSharedFeedback] = useState(false); - const [responseId, setResponseId] = useState(null); - const [freeText, setFreeText] = useState(""); - - if ( - !process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID || - !process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST || - !process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID - ) { - return null; - } - - return ( -
- {!sharedFeedback ? ( -
- Was this page helpful? - -
- {["Yes 👍", " No 👎"].map((option) => ( - { - const id = await handleFeedbackSubmit(option, router.asPath); - setResponseId(id); - }}> - {option} - - ))} -
- -
-