diff --git a/apps/docs/.eslintrc.js b/apps/docs/.eslintrc.js index 64a6e29852..d9af5f8202 100644 --- a/apps/docs/.eslintrc.js +++ b/apps/docs/.eslintrc.js @@ -1,3 +1,20 @@ module.exports = { - extends: ["@formbricks/eslint-config/legacy-next.js"], + 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", + }, + caseSensitive: false, + }, + }, }; diff --git a/apps/docs/app/[survey-type]/global/access-roles/page.mdx b/apps/docs/app/[survey-type]/global/access-roles/page.mdx index 0af1b489b5..741d362571 100644 --- a/apps/docs/app/[survey-type]/global/access-roles/page.mdx +++ b/apps/docs/app/[survey-type]/global/access-roles/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddMember from "./images/add-member.webp"; import BulkInvite from "./images/bulk-invite.webp"; @@ -20,8 +20,7 @@ Learn about the different organization-level and team-level roles and how they a 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`. + 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 @@ -133,8 +132,7 @@ There are two ways to invite organization members: One by one or in bulk. /> - 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`. + 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. 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 index dc8cc4527c..ca588519b0 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +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"; @@ -29,6 +29,7 @@ Upload an image by clicking the upload icon or dragging the file: /> ## How to Add Videos + Toggle to add a video via link: **YouTube Privacy Mode**: This option reduces tracking by converting YouTube URLs to no-cookie URLs. It only works with YouTube. \ No newline at end of file + + **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/page.mdx b/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx index 3df9d80e3a..d4952e1011 100644 --- a/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx +++ b/apps/docs/app/[survey-type]/global/conditional-logic/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +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"; @@ -38,8 +38,7 @@ Create complex survey logic with the Logic Editor. Use conditions, actions, and - 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. + 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. @@ -87,8 +86,7 @@ Conditons can be based on: /> - - 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. + - 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. - This feature is a white-label feature. It is only available for users on paid plans or have an enterprise - license. + 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 diff --git a/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx b/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx index cd1db03bf5..f2e3ba1f07 100644 --- a/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx +++ b/apps/docs/app/[survey-type]/global/hidden-fields/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import FilledHiddenFields from "./filled-hidden-fields.webp"; import HiddenFieldResponses from "./hidden-field-responses.webp"; @@ -74,6 +74,7 @@ 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: @@ -106,4 +107,4 @@ These hidden fields will now be visible in the responses tab just like other fie - **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. \ No newline at end of file +- **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/StepOne.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/limit-submissions/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/limit-submissions/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/images/StepThree.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-three.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/limit-submissions/images/StepThree.webp rename to apps/docs/app/[survey-type]/global/limit-submissions/images/step-three.webp diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/limit-submissions/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/limit-submissions/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/limit-submissions/images/step-two.webp diff --git a/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx b/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx index 1c2e698a78..f59b3cc858 100644 --- a/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx +++ b/apps/docs/app/[survey-type]/global/limit-submissions/page.mdx @@ -1,13 +1,12 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepOne from "./images/StepOne.webp"; -import StepThree from "./images/StepThree.webp"; -import StepTwo from "./images/StepTwo.webp"; +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.", + description: "Limit the number of responses your survey can receive.", }; # Limit by Number of Submissions @@ -20,7 +19,7 @@ Automatically close your survey after a specific number of responses with Formbr src={StepTwo} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> - **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/page.mdx b/apps/docs/app/[survey-type]/global/metadata/page.mdx index 2d89344c50..e3249ff5df 100644 --- a/apps/docs/app/[survey-type]/global/metadata/page.mdx +++ b/apps/docs/app/[survey-type]/global/metadata/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import { TellaVideo } from "@/components/TellaVideo"; +import { MdxImage } from "@/components/mdx-image"; +import { TellaVideo } from "@/components/tella-video"; import Filters from "./filters.webp"; import MetadataCard from "./metadata-card.webp"; 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 index 096dec66a4..3e572dcd7f 100644 --- a/apps/docs/app/[survey-type]/global/multi-language-surveys/page.mdx +++ b/apps/docs/app/[survey-type]/global/multi-language-surveys/page.mdx @@ -1,6 +1,6 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import { ResponsiveVideo } from "@/components/ResponsiveVideo"; +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"; @@ -137,8 +137,7 @@ Formbricks.init({ - 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. + 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. diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/Doggo.jpg b/apps/docs/app/[survey-type]/global/overwrite-styling/images/Doggo.jpg deleted file mode 100644 index d93640141c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/Doggo.jpg and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/HipsterLiving.jpg b/apps/docs/app/[survey-type]/global/overwrite-styling/images/HipsterLiving.jpg deleted file mode 100644 index c4ae05148c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/HipsterLiving.jpg and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/WindowsXp.jpg b/apps/docs/app/[survey-type]/global/overwrite-styling/images/WindowsXp.jpg deleted file mode 100644 index b6ebf85070..0000000000 Binary files a/apps/docs/app/[survey-type]/global/overwrite-styling/images/WindowsXp.jpg 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 new file mode 100644 index 0000000000..65096ccd59 Binary files /dev/null and b/apps/docs/app/[survey-type]/global/overwrite-styling/images/doggo.webp 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 new file mode 100644 index 0000000000..c83c00ed3e Binary files /dev/null and b/apps/docs/app/[survey-type]/global/overwrite-styling/images/hipster-living.webp 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 similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/Mario.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/mario.webp 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 similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/Pre-requisite.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/pre-requisite.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepEight.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eight.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepEight.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eight.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepEleven.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eleven.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepEleven.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-eleven.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepFive.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-five.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepFive.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-five.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepFour.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-four.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepFour.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-four.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepNine.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-nine.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepNine.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-nine.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepOne.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepSeven.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-seven.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepSeven.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-seven.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepSix.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-six.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepSix.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-six.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepTen.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-ten.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepTen.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-ten.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepThree.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-three.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepThree.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-three.webp diff --git a/apps/docs/app/[survey-type]/global/overwrite-styling/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/overwrite-styling/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/overwrite-styling/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/overwrite-styling/images/step-two.webp 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 new file mode 100644 index 0000000000..45f588a285 Binary files /dev/null and b/apps/docs/app/[survey-type]/global/overwrite-styling/images/windows-xp.webp 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 index 7519c8371b..284c01d1ea 100644 --- a/apps/docs/app/[survey-type]/global/overwrite-styling/page.mdx +++ b/apps/docs/app/[survey-type]/global/overwrite-styling/page.mdx @@ -1,13 +1,13 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepEleven from "./images/StepEleven.webp"; -import StepNine from "./images/StepNine.webp"; -import StepTen from "./images/StepTen.webp"; +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.jpg"; -import HipsterLiving from "./images/HipsterLiving.jpg"; -import Mario from "./images/Mario.webp"; -import WindowsXp from "./images/WindowsXp.jpg"; +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", @@ -20,7 +20,7 @@ export const metadata = { 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.{" "} + To set a styling theme for all surveys, please see the [Styling Theme](/core-features/global/styling-theme) manual. ### Overwrite Styling Theme diff --git a/apps/docs/app/[survey-type]/global/partial-submissions/images/StepOne.webp b/apps/docs/app/[survey-type]/global/partial-submissions/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/partial-submissions/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/partial-submissions/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx b/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx index 02cabdf596..1a57fb83f2 100644 --- a/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx +++ b/apps/docs/app/[survey-type]/global/partial-submissions/page.mdx @@ -1,6 +1,6 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepOne from "./images/StepOne.webp"; +import StepOne from "./images/step-one.webp"; export const metadata = { title: "Collect Partial Submissions with Formbricks", @@ -39,7 +39,7 @@ Formbricks provides detailed analytics for partial submissions, including a per- src={StepOne} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> ### **Survey Summary Analytics** 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 index e065575669..4561280954 100644 --- a/apps/docs/app/[survey-type]/global/question-type/address/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/address/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Address from "./images/address.webp"; #### Question Type @@ -20,17 +20,20 @@ The Address question type allows respondents to input their address details, inc /> ### 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 +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx index 224b5fed05..b94bb9ae9b 100644 --- a/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/consent/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Consent from "./images/consent.webp"; #### Question Type @@ -11,6 +11,7 @@ The Consent card is used to obtain user agreement regarding a product, service, ## 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. \ No newline at end of file + +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx index df4c555a59..59cc2273c4 100644 --- a/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/contact/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Contact from "./images/contact.webp"; #### Question Type @@ -11,6 +11,7 @@ The Contact Info question type allows respondents to provide their basic contact ## Elements + ## 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 +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/file-upload/page.mdx index 0b2e3e6d6a..7c804b2e38 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import FileUpload from "./images/file-upload.webp"; #### Questions Type @@ -11,6 +11,7 @@ The File Upload question type allows respondents to upload files related to your ## 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. \ No newline at end of file + +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/free-text/page.mdx index 2b0b4aaf89..84a296acf6 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import FreeText from "./images/free-text.webp"; export const metadata = { @@ -16,6 +16,7 @@ Free text questions allow respondents to enter a custom answer. Displays a title ## 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 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 index 883c30fa08..5b6ba5c937 100644 --- a/apps/docs/app/[survey-type]/global/question-type/matrix/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/matrix/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Matrix from "./images/matrix.webp"; #### Question Type 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 index 41a20c2763..6e1e73e4d7 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import MultiSelect from "./images/multi-select.webp"; export const metadata = { @@ -16,6 +16,7 @@ Multi select questions allow respondents to select several answers from a list. ## 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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/net-promoter-score/page.mdx index 20262502c9..21731ff322 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import NetPromoterScore from "./images/net-promoter-score.webp"; #### Question Type @@ -11,6 +11,7 @@ Net Promoter Score questions allow respondents to rate a question on a scale fro ## 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. \ No newline at end of file + +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/picture-selection/page.mdx index 9b5f1087ad..a1c64a46b9 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import PictureSelection from "./images/picture-selection.webp"; export const metadata = { @@ -16,6 +16,7 @@ Picture selection questions allow respondents to select one or more images 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. \ No newline at end of file + +This option allows user to select more than one image. 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 index 9ad52617d4..a5d74893f5 100644 --- a/apps/docs/app/[survey-type]/global/question-type/ranking/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/ranking/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Ranking from "./images/ranking.webp"; #### Question Type @@ -11,6 +11,7 @@ Ranking questions let respondents select options in order from 1 to the total nu ## 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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx index 27b7d8b263..ea82d3cb47 100644 --- a/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/rating/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import Rating from "./images/rating.webp"; export const metadata = { @@ -16,6 +16,7 @@ Rating questions allow respondents to rate questions on a scale. Displays a titl ## 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". \ No newline at end of file + +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx index 329c75defa..d5abd856e2 100644 --- a/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx +++ b/apps/docs/app/[survey-type]/global/question-type/schedule/page.mdx @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import ScheduleCall from "./images/schedule-call.webp"; #### Question Type @@ -11,6 +11,7 @@ The Schedule A Meeting question type allows respondents to book a meeting by sel ## 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). \ No newline at end of file + +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/page.mdx b/apps/docs/app/[survey-type]/global/question-type/single-select/page.mdx index 2d501145d2..9e62572626 100644 --- 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 @@ -1,5 +1,5 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; import SingleSelect from "./images/single-select.webp"; export const metadata = { @@ -16,6 +16,7 @@ Single select questions allow respondents to select one answer from a list. Disp ## 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 @@ -41,4 +45,4 @@ The list of answers the respondent can choose from. - 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. \ No newline at end of file + - 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 similarity index 100% rename from apps/docs/app/[survey-type]/global/question-type/statement-cta/images/statement-CTA.webp rename to apps/docs/app/[survey-type]/global/question-type/statement-cta/images/statement-cta.webp 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 index 2a1c4c4762..f5da195606 100644 --- 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 @@ -1,6 +1,6 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; -import StatementCTA from "./images/statement-CTA.webp"; +import { MdxImage } from "@/components/mdx-image"; +import SurveyEmbed from "@/components/survey-embed"; +import StatementCTA from "./images/statement-cta.webp"; #### Question Type @@ -11,6 +11,7 @@ The Statement question type allows you to display descriptive information in you ## 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/StepOne.webp b/apps/docs/app/[survey-type]/global/recall/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/recall/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/recall/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/recall/images/StepThree.webp b/apps/docs/app/[survey-type]/global/recall/images/step-three.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/recall/images/StepThree.webp rename to apps/docs/app/[survey-type]/global/recall/images/step-three.webp diff --git a/apps/docs/app/[survey-type]/global/recall/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/recall/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/recall/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/recall/images/step-two.webp diff --git a/apps/docs/app/[survey-type]/global/recall/page.mdx b/apps/docs/app/[survey-type]/global/recall/page.mdx index b19b3950ef..d141a88fb9 100644 --- a/apps/docs/app/[survey-type]/global/recall/page.mdx +++ b/apps/docs/app/[survey-type]/global/recall/page.mdx @@ -1,19 +1,21 @@ -import { MdxImage } from "@/components/MdxImage"; -import SurveyEmbed from "@/components/SurveyEmbed"; -import StepOne from "./images/StepOne.webp"; -import StepThree from "./images/StepThree.webp"; -import StepTwo from "./images/StepTwo.webp"; +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."}; + "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 @@ -23,8 +25,7 @@ You can recall data from the following sources: ## 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. + The recall functionality is disabled on the first question of the survey since there’s no preceding question to recall data from. ### **Pre-requisite** @@ -35,7 +36,7 @@ Ensure the answer you wish to recall precedes the question in which it will be r src={StepThree} alt="Survey setup example with link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> ### **Step 1: Recall Data** @@ -46,7 +47,7 @@ Type **`@`** in the question or description field where you want to insert a rec src={StepTwo} alt="Dropdown menu for recalling data in survey" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> ### **Step 2: Set a Fallback** @@ -57,10 +58,11 @@ To ensure the survey remains coherent when a response is missing (or the questio src={StepOne} alt="Setting fallback option in survey question" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> ## 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 diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepOne.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepThree.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-three.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepThree.webp rename to apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-three.webp diff --git a/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/schedule-start-end-dates/images/step-two.webp 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 index cc2663450d..375e9ec5bb 100644 --- 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 @@ -1,13 +1,12 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepOne from "./images/StepOne.webp"; -import StepThree from "./images/StepThree.webp"; -import StepTwo from "./images/StepTwo.webp"; +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.", + description: "Automatically release and close surveys based on specific dates.", }; # Schedule Start & End Dates @@ -24,7 +23,7 @@ Configure your surveys to open and close based on specific criteria. Here’s ho src={StepOne} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> - **Details**: Choose the date and time when the survey should become available to respondents. All times follow UTC timezone. @@ -38,11 +37,11 @@ Configure your surveys to open and close based on specific criteria. Here’s ho src={StepThree} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> -- **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. +- **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** diff --git a/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx b/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx index ef4a741f12..097caad745 100644 --- a/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx +++ b/apps/docs/app/[survey-type]/global/shareable-dashboards/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import StepOne from "./images/1-publish-to-web.webp"; import StepTwo from "./images/2-warning-publish.webp"; @@ -6,8 +6,7 @@ import StepThree from "./images/3-share-link.webp"; export const metadata = { title: "Shareable Dashboards", - description: - "Create shareable links to dashboards of specific surveys.", + description: "Create shareable links to dashboards of specific surveys.", }; # Shareable Dashboards diff --git a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/StepOne.webp b/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/show-survey-to-percent-of-users/images/step-two.webp 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 index f1001caef9..0276f02361 100644 --- 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 @@ -1,7 +1,7 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepOne from "./images/StepOne.webp"; -import StepTwo from "./images/StepTwo.webp"; +import StepOne from "./images/step-one.webp"; +import StepTwo from "./images/step-two.webp"; export const metadata = { title: "Show Survey to % of Users", @@ -14,8 +14,7 @@ export const metadata = { 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. + This feature is applicable for website surveys and app surveys, where managing participant engagement and response volume is crucial. ## **Enabling Percentage-Based Visibility** @@ -34,7 +33,7 @@ Set up this feature to control how many users see your survey, using a simple sl src={StepOne} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> - Select **`Survey Trigger`** from the menu options. @@ -51,12 +50,11 @@ Set up this feature to control how many users see your survey, using a simple sl src={StepTwo} alt="Choose a link survey template" quality="100" - className="max-w-full rounded-lg sm:max-w-3xl " + className="max-w-full rounded-lg sm:max-w-3xl" /> - 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.{" "} + 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** diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/Doggo.jpg b/apps/docs/app/[survey-type]/global/styling-theme/images/Doggo.jpg deleted file mode 100644 index d93640141c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/Doggo.jpg and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/HipsterLiving.jpg b/apps/docs/app/[survey-type]/global/styling-theme/images/HipsterLiving.jpg deleted file mode 100644 index c4ae05148c..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/HipsterLiving.jpg and /dev/null differ diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/WindowsXp.jpg b/apps/docs/app/[survey-type]/global/styling-theme/images/WindowsXp.jpg deleted file mode 100644 index b6ebf85070..0000000000 Binary files a/apps/docs/app/[survey-type]/global/styling-theme/images/WindowsXp.jpg 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 new file mode 100644 index 0000000000..65096ccd59 Binary files /dev/null and b/apps/docs/app/[survey-type]/global/styling-theme/images/doggo.webp 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 new file mode 100644 index 0000000000..c83c00ed3e Binary files /dev/null and b/apps/docs/app/[survey-type]/global/styling-theme/images/hipster-living.webp 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 similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/Mario.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/mario.webp 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 similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/Pre-requisite.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/pre-requisite.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepEight.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-eight.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepEight.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-eight.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepEleven.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-eleven.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepEleven.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-eleven.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepFive.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-five.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepFive.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-five.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepFour.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-four.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepFour.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-four.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepNine.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-nine.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepNine.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-nine.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepOne.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-one.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepOne.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-one.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepSeven.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-seven.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepSeven.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-seven.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepSix.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-six.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepSix.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-six.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepTen.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-ten.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepTen.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-ten.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepThree.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-three.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepThree.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-three.webp diff --git a/apps/docs/app/[survey-type]/global/styling-theme/images/StepTwo.webp b/apps/docs/app/[survey-type]/global/styling-theme/images/step-two.webp similarity index 100% rename from apps/docs/app/[survey-type]/global/styling-theme/images/StepTwo.webp rename to apps/docs/app/[survey-type]/global/styling-theme/images/step-two.webp 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 new file mode 100644 index 0000000000..45f588a285 Binary files /dev/null and b/apps/docs/app/[survey-type]/global/styling-theme/images/windows-xp.webp 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 index f5b9544c34..a74f6f6dc4 100644 --- a/apps/docs/app/[survey-type]/global/styling-theme/page.mdx +++ b/apps/docs/app/[survey-type]/global/styling-theme/page.mdx @@ -1,23 +1,23 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepEight from "./images/StepEight.webp"; -import StepEleven from "./images/StepEleven.webp"; -import StepFive from "./images/StepFive.webp"; -import StepFour from "./images/StepFour.webp"; -import StepNine from "./images/StepNine.webp"; -import StepSeven from "./images/StepSeven.webp"; -import StepSix from "./images/StepSix.webp"; -import StepTen from "./images/StepTen.webp"; 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.jpg"; -import HipsterLiving from "./images/HipsterLiving.jpg"; -import Mario from "./images/Mario.webp"; -import WindowsXp from "./images/WindowsXp.jpg"; +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", diff --git a/apps/docs/app/[survey-type]/global/variables/page.mdx b/apps/docs/app/[survey-type]/global/variables/page.mdx index 7a97b4542a..a76b032dec 100644 --- a/apps/docs/app/[survey-type]/global/variables/page.mdx +++ b/apps/docs/app/[survey-type]/global/variables/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import CreatedVariables from "./images/created-variables.webp"; import InputVariables from "./images/input-variables.webp"; @@ -84,6 +84,5 @@ Variables are different from hidden fields in the following ways: /> - To know more about how to use logic in Formbricks, check out the [Conditional - Logic](/global/conditional-logic). + 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 index dfde3ebedb..29a4bc3bb0 100644 --- a/apps/docs/app/api-docs/components/api-docs.tsx +++ b/apps/docs/app/api-docs/components/api-docs.tsx @@ -1,13 +1,13 @@ "use client"; -import { Button } from "@/components/Button"; -import { LoadingSpinner } from "@/components/icons/LoadingSpinner"; import { useTheme } from "next-themes"; import { useState } from "react"; import { RedocStandalone } from "redoc"; +import { LoadingSpinner } from "@/components/icons/loading-spinner"; +import { Button } from "@/components/button"; import "./style.css"; -export const ApiDocs = () => { +export function ApiDocs() { const { resolvedTheme } = useTheme(); const redocTheme = { @@ -61,8 +61,8 @@ export const ApiDocs = () => { - setLoading(false)} options={redocTheme} /> - {loading && } + { setLoading(false); }} options={redocTheme} /> + {loading ? : null} ); -}; +} diff --git a/apps/docs/app/app-surveys/actions/images/I1.webp b/apps/docs/app/app-surveys/actions/images/i1.webp similarity index 100% rename from apps/docs/app/app-surveys/actions/images/I1.webp rename to apps/docs/app/app-surveys/actions/images/i1.webp diff --git a/apps/docs/app/app-surveys/actions/images/I2.webp b/apps/docs/app/app-surveys/actions/images/i2.webp similarity index 100% rename from apps/docs/app/app-surveys/actions/images/I2.webp rename to apps/docs/app/app-surveys/actions/images/i2.webp diff --git a/apps/docs/app/app-surveys/actions/page.mdx b/apps/docs/app/app-surveys/actions/page.mdx index 8d3bf1b33c..69002b8aa9 100644 --- a/apps/docs/app/app-surveys/actions/page.mdx +++ b/apps/docs/app/app-surveys/actions/page.mdx @@ -1,7 +1,7 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import I1 from "./images/I1.webp"; -import I2 from "./images/I2.webp"; +import I1 from "./images/i1.webp"; +import I2 from "./images/i2.webp"; export const metadata = { title: "Using Actions in Formbricks", diff --git a/apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx b/apps/docs/app/app-surveys/framework-guides/components/libraries.tsx similarity index 90% rename from apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx rename to apps/docs/app/app-surveys/framework-guides/components/libraries.tsx index 33d8f064e5..f3c0597516 100644 --- a/apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx +++ b/apps/docs/app/app-surveys/framework-guides/components/libraries.tsx @@ -1,45 +1,45 @@ -import { Button } from "@/components/Button"; +import Image from "next/image"; +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, + 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, + 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, + logo: logoNextjs as string, }, { href: "#vue-js", name: "Vue.js", description: "Simply add us to your router change and sit back!", - logo: logoVueJs, + 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, + logo: logoReactJs as string, }, ]; -export const Libraries = () => { +export function Libraries() { return (
@@ -63,4 +63,4 @@ export const Libraries = () => {
); -}; +} diff --git a/apps/docs/app/app-surveys/framework-guides/page.mdx b/apps/docs/app/app-surveys/framework-guides/page.mdx index 758ea916d4..deca5bbcf8 100644 --- a/apps/docs/app/app-surveys/framework-guides/page.mdx +++ b/apps/docs/app/app-surveys/framework-guides/page.mdx @@ -1,6 +1,6 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import { Libraries } from "./components/Libraries"; +import { Libraries } from "./components/libraries"; import ReactApp from "./images/react-in-app-survey-app-popup-form.webp"; import WidgetConnected from "./images/widget-connected.webp"; diff --git a/apps/docs/app/app-surveys/quickstart/images/I1.webp b/apps/docs/app/app-surveys/quickstart/images/i1.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I1.webp rename to apps/docs/app/app-surveys/quickstart/images/i1.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I2.webp b/apps/docs/app/app-surveys/quickstart/images/i2.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I2.webp rename to apps/docs/app/app-surveys/quickstart/images/i2.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I3.webp b/apps/docs/app/app-surveys/quickstart/images/i3.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I3.webp rename to apps/docs/app/app-surveys/quickstart/images/i3.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I3_1.webp b/apps/docs/app/app-surveys/quickstart/images/i3_1.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I3_1.webp rename to apps/docs/app/app-surveys/quickstart/images/i3_1.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I4.webp b/apps/docs/app/app-surveys/quickstart/images/i4.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I4.webp rename to apps/docs/app/app-surveys/quickstart/images/i4.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I5.webp b/apps/docs/app/app-surveys/quickstart/images/i5.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I5.webp rename to apps/docs/app/app-surveys/quickstart/images/i5.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I6.webp b/apps/docs/app/app-surveys/quickstart/images/i6.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I6.webp rename to apps/docs/app/app-surveys/quickstart/images/i6.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I7.webp b/apps/docs/app/app-surveys/quickstart/images/i7.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I7.webp rename to apps/docs/app/app-surveys/quickstart/images/i7.webp diff --git a/apps/docs/app/app-surveys/quickstart/images/I8.webp b/apps/docs/app/app-surveys/quickstart/images/i8.webp similarity index 100% rename from apps/docs/app/app-surveys/quickstart/images/I8.webp rename to apps/docs/app/app-surveys/quickstart/images/i8.webp diff --git a/apps/docs/app/app-surveys/quickstart/page.mdx b/apps/docs/app/app-surveys/quickstart/page.mdx index a0a4d462d8..7a0f32db1b 100644 --- a/apps/docs/app/app-surveys/quickstart/page.mdx +++ b/apps/docs/app/app-surveys/quickstart/page.mdx @@ -1,14 +1,14 @@ -import { MdxImage } from "@/components/MdxImage"; +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"; +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", diff --git a/apps/docs/app/app-surveys/recontact/page.mdx b/apps/docs/app/app-surveys/recontact/page.mdx index 286602fd55..8bb45df6ca 100644 --- a/apps/docs/app/app-surveys/recontact/page.mdx +++ b/apps/docs/app/app-surveys/recontact/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AppSurvey from "./app-survey.webp"; import GlobalWaitTime from "./global-wait-time.webp"; diff --git a/apps/docs/app/app-surveys/user-identification/page.mdx b/apps/docs/app/app-surveys/user-identification/page.mdx index e6cde9106b..9fb7ccb67b 100644 --- a/apps/docs/app/app-surveys/user-identification/page.mdx +++ b/apps/docs/app/app-surveys/user-identification/page.mdx @@ -74,8 +74,7 @@ formbricks.init({ 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. + Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently limited to 150 attributes per environment. diff --git a/apps/docs/app/best-practices/cancel-subscription/page.mdx b/apps/docs/app/best-practices/cancel-subscription/page.mdx index 570690a91f..8aa9958afa 100644 --- a/apps/docs/app/best-practices/cancel-subscription/page.mdx +++ b/apps/docs/app/best-practices/cancel-subscription/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ChangeText from "./change-text.webp"; import CreateChurnFlow from "./create-cancel-flow.webp"; @@ -112,9 +112,7 @@ Whenever a user visits this page, matches the filter conditions above and the re 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 🤷 + ## 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 @@ -149,8 +147,7 @@ These settings make sure the survey is always displayed, when a user wants to Ca /> - ## 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. + ## 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. ### diff --git a/apps/docs/app/best-practices/contact-form/page.mdx b/apps/docs/app/best-practices/contact-form/page.mdx index b2296b2bbe..d932e0898d 100644 --- a/apps/docs/app/best-practices/contact-form/page.mdx +++ b/apps/docs/app/best-practices/contact-form/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +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"; @@ -21,6 +21,7 @@ Welcome to this comprehensive guide on creating a contact form using Formbricks. ## 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. @@ -44,9 +45,7 @@ First, let's lay the groundwork for your form: 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. - +A warm welcome sets the tone for your form. Make it friendly to encourage users to participate. ### Adding the Name Field @@ -145,7 +144,8 @@ Once your form is complete, follow these final steps: After publishing the form, follow these steps to integrate it into your site: -1. **Copy the Shareable Link** +1. **Copy the Shareable Link** + - Find your form in the Formbricks dashboard, and click Share. - Select Embed in a Web Page. @@ -156,16 +156,19 @@ After publishing the form, follow these steps to integrate it into your site: className="max-w-full rounded-lg sm:max-w-3xl" /> -2. **Embed the Code** +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. + + 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** +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!** \ No newline at end of file +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/page.mdx b/apps/docs/app/best-practices/docs-feedback/page.mdx index 2226436c28..18bace87c1 100644 --- a/apps/docs/app/best-practices/docs-feedback/page.mdx +++ b/apps/docs/app/best-practices/docs-feedback/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddAction from "./add-action.webp"; import ChangeId from "./change-id.webp"; @@ -69,8 +69,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t 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. + 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: @@ -100,8 +99,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t ## 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 😊 + 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: diff --git a/apps/docs/app/best-practices/feature-chaser/page.mdx b/apps/docs/app/best-practices/feature-chaser/page.mdx index c270726a82..3b33d14607 100644 --- a/apps/docs/app/best-practices/feature-chaser/page.mdx +++ b/apps/docs/app/best-practices/feature-chaser/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ActionCSS from "./action-css.webp"; import ActionText from "./action-innertext.webp"; @@ -38,10 +38,7 @@ To run the Feature Chaser survey in your app you want to proceed as follows: 2. Setup a user action to display survey at the right point in time - ## Formbricks Widget running? - We assume that you have already installed the Formbricks Widget in your web - wapp. 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) + ## 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 Feature Chaser @@ -123,8 +120,7 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de - ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser - in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. + ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. ### diff --git a/apps/docs/app/best-practices/feedback-box/page.mdx b/apps/docs/app/best-practices/feedback-box/page.mdx index 3584d54aad..6b71242e23 100644 --- a/apps/docs/app/best-practices/feedback-box/page.mdx +++ b/apps/docs/app/best-practices/feedback-box/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import Link from "next/link"; import ActionCSS from "./action-css.webp"; @@ -110,8 +110,7 @@ Scroll down to “Recontact Options”. Here you have to choose the right settin ## Setting up the Widget - ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box - in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. + ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. ###   diff --git a/apps/docs/app/best-practices/improve-email-content/page.mdx b/apps/docs/app/best-practices/improve-email-content/page.mdx index ba5862a0ac..3a63d68ebe 100644 --- a/apps/docs/app/best-practices/improve-email-content/page.mdx +++ b/apps/docs/app/best-practices/improve-email-content/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import NewsletterSurveyType from "./choose-survey-type.webp"; import NewsletterSurveyEmbedCode from "./embed-survey-code-in-your-email.webp"; @@ -100,9 +100,7 @@ And you're done! Send a test email to yourself and try it out 🤓 ## Learn about data prefilling - ## How does data prefilling work? Learn about how link prefilling and user identification maximize your - insights in [this detailed - guide](/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content). + ## How does data prefilling work? Learn about how link prefilling and user identification maximize your insights in [this detailed guide](/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content). ###   diff --git a/apps/docs/app/best-practices/improve-trial-cr/page.mdx b/apps/docs/app/best-practices/improve-trial-cr/page.mdx index 9a29df30fb..b704e500a3 100644 --- a/apps/docs/app/best-practices/improve-trial-cr/page.mdx +++ b/apps/docs/app/best-practices/improve-trial-cr/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ActionText from "./action-innertext.webp"; import ActionPageurl from "./action-pageurl.webp"; @@ -72,8 +72,7 @@ Save, and move over to the “Audience” tab. ### 3. Pre-segment your audience (coming soon) - ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this - manual in the next days. + ## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this manual in the next days. Pre-segmentation isn't relevant for this survey because you likely want to solve all people who cancel their trial. You probably have a specific user action e.g. clicking on "Cancel Trial" you can use to only display the survey to users trialing your product. @@ -129,8 +128,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr - ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box - in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. + ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. ### diff --git a/apps/docs/app/best-practices/interview-prompt/page.mdx b/apps/docs/app/best-practices/interview-prompt/page.mdx index 0f014c84da..e32e3dd36c 100644 --- a/apps/docs/app/best-practices/interview-prompt/page.mdx +++ b/apps/docs/app/best-practices/interview-prompt/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ActionCSS from "./action-css.webp"; import ActionInner from "./action-innertext.webp"; @@ -43,8 +43,7 @@ To display an Interview Prompt in your app you want to proceed as follows: 3. That’s it! 🎉 - ## 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 (15mins).](/app-surveys/quickstart) + ## 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 (15mins)](/app-surveys/quickstart) ### 1. Create new Interview Prompt diff --git a/apps/docs/app/best-practices/pmf-survey/page.mdx b/apps/docs/app/best-practices/pmf-survey/page.mdx index bf0dd49e50..bf61a0405e 100644 --- a/apps/docs/app/best-practices/pmf-survey/page.mdx +++ b/apps/docs/app/best-practices/pmf-survey/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ActionCSS from "./action-css.webp"; import ActionPageurl from "./action-pageurl.webp"; @@ -37,9 +37,7 @@ To display the Product-Market Fit survey in your app you want to proceed as foll 3. Setup the user action to display survey at good point in time - ## 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 - (15mins).](/app-surveys/quickstart) + ## 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 (15mins)](/app-surveys/quickstart) ### 1. Create new PMF survey @@ -122,8 +120,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr - ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box - in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. + ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget. ### diff --git a/apps/docs/app/best-practices/quiz-time/page.mdx b/apps/docs/app/best-practices/quiz-time/page.mdx index 23caa778cc..aa1cf39163 100644 --- a/apps/docs/app/best-practices/quiz-time/page.mdx +++ b/apps/docs/app/best-practices/quiz-time/page.mdx @@ -1,178 +1,125 @@ -import { MdxImage } from "@/components/MdxImage"; -import SingleSelect from "./single-select.webp"; -import Quiz from "./quiz.webp"; -import Score from "./score.webp" +import { MdxImage } from "@/components/mdx-image"; import AddLogic from "./conditional-logic.webp"; -import WhenThen from "./when-then.webp"; import EndingLogic from "./ending-logic.webp"; import PassFail from "./pass-fail.webp"; - +import Quiz from "./quiz.webp"; +import Score from "./score.webp"; +import SingleSelect from "./single-select.webp"; +import WhenThen from "./when-then.webp"; export const metadata = { - title: "How to Create a Quiz Using Formbricks - Step-by-Step Guide", - description: - "Learn to leverage Formbricks to create Quizzes. Follow our detailed step-by-step guide to build quizzes with custom logic and multiple endings.", + title: "How to Create a Quiz Using Formbricks - Step-by-Step Guide", + description: + "Learn to leverage Formbricks to create Quizzes. Follow our detailed step-by-step guide to build quizzes with custom logic and multiple endings.", }; - # Creating a quiz with Formbricks - Step-by-step Guide - Welcome to this guide on creating engaging quizzes with Formbricks! Quizzes help you capture customer insights, explore user personalities, or simply add fun for your team. With Formbricks, you can personalize quizzes in minutes add scores, customize backgrounds, and more, all without any technical skills! - ## What we'll build - By the end of this tutorial, you'll have created a simple trivia Quiz featuring: - 1. Score calculations. 2. Multiple endings depending on the score. - ## Setting up the form - First, make sure you have a Formbricks account. If not, you can create one [here](https://app.formbricks.com): - 1. Head to the Surveys page and click on **New Survey**. 2. Select Start from Scratch to create a new form. 3. Go to the settings and select form type as **Link Survey** 4. In the form editor, click the three dots next to a question, then select Change Question Type and choose **Single-Select**. - - 5. Add a welcoming statement to greet your users and explain the Quiz's purpose. 6. Personalize the greeting to make it inviting and encourage engagement. - - - **Note:** While we’re creating a Link Survey here, the process is similar for Web and App surveys. - ## Adding the questions - Next, let's create a question for example with multiple options: - What country has the longest coastline in the world? A) Canada B) Japan C) India D) Nepal - - - + ## Calculate Score - Now that we have our question ready, let’s add the logic to calculate scores. - 1. Scroll down in the editor and click on variables. 2. Create a new variable named `score` with a default value of 0 - - 3. Now go back to the question and expand the advanced settings by clicking on `> Show Advanced Settings`. 4. Under the conditional logic you should see the option to `Add Logic`. Click on that. - - - + 5. Now you should see conditional logic. Customize the logic to match your needs for example: - **When** `question` equals `YOUR_ANSWER_HERE` **Then** `Calculate` `score` `Add +` `01`. So it should look something like this. - - - - 6. Let's duplicate and customize these questions. Click on the duplicate icon at the top of the question. 7. Now edit the questions, options, and answers in the **conditional logic** - ## Creating Multiple Endings Based on Scores - Once you have all the questions and the calculation logic in place, it’s time to customize the endings. Scroll down to the Ending Card section. We will create two cards for this quiz: one for when the user fails the quiz and another for when the user passes. - 1. Customize the ending card. 2. Display the score by typing `@score`. ( You can address all the variables or questions by just typing @ ). 3. Add logic to the last question. ( this is necessary to redirect the user based on the score ). Kind of like this: - **When** `score` >= `03` **Then** `Jump to` `Pass`. So it should look something like this. - - 4. Ensure that the Fail card is positioned above the Pass card. This allows any condition that does not meet the criteria of being greater than or equal to 3 to jump to the Fail card. - - 5. That's it! Now you can save and publish the quiz. - # Wrapping Up - Congratulations! You’ve successfully created a Quiz with Formbricks. You can play around with the quiz that we just created [here](https://app.formbricks.com/s/cm2wwt3vu0001ir8o7ys0bezz). - -A great quiz can serve as an excellent lead generator, a job fit checker, or just a fun icebreaker for your team. You now have the skills to build that! If you want to read more about building quizzes and how you can create a Job Fit Quiz check this article [here](https://www.harshbhat.me/blog/formbricks-quiz). - - +A great quiz can serve as an excellent lead generator, a job fit checker, or just a fun icebreaker for your team. You now have the skills to build that! If you want to read more about building quizzes and how you can create a Job Fit Quiz check this article [here](https://www.harshbhat.me/blog/formbricks-quiz). diff --git a/apps/docs/app/developer-docs/api-sdk/page.mdx b/apps/docs/app/developer-docs/api-sdk/page.mdx index 98b124558e..9675c9136d 100644 --- a/apps/docs/app/developer-docs/api-sdk/page.mdx +++ b/apps/docs/app/developer-docs/api-sdk/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; export const metadata = { title: "Formbricks API SDK", diff --git a/apps/docs/app/developer-docs/contributing/codespaces/page.mdx b/apps/docs/app/developer-docs/contributing/codespaces/page.mdx index 7a6dce6016..164db7fc22 100644 --- a/apps/docs/app/developer-docs/contributing/codespaces/page.mdx +++ b/apps/docs/app/developer-docs/contributing/codespaces/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import GithubCodespaceLoading from "./images/loading.webp"; import GithubCodespaceNew from "./images/new.webp"; diff --git a/apps/docs/app/developer-docs/contributing/get-started/page.mdx b/apps/docs/app/developer-docs/contributing/get-started/page.mdx index e69c5fe768..594070e69e 100644 --- a/apps/docs/app/developer-docs/contributing/get-started/page.mdx +++ b/apps/docs/app/developer-docs/contributing/get-started/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; export const metadata = { title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks", @@ -149,8 +149,7 @@ pnpm go **WSL2 users**: If you encounter connection issues with Prisma, ensure your WSL2 instance's PostgreSQL - service is stopped before running `pnpm go`. Use the command `sudo systemctl stop postgresql` to stop the - service. + service is stopped before running `pnpm go`. Use the command `sudo systemctl stop postgresql` to stop the service. **You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account. diff --git a/apps/docs/app/developer-docs/contributing/troubleshooting/page.mdx b/apps/docs/app/developer-docs/contributing/troubleshooting/page.mdx index 3d97d73b2c..d6b7298ed1 100644 --- a/apps/docs/app/developer-docs/contributing/troubleshooting/page.mdx +++ b/apps/docs/app/developer-docs/contributing/troubleshooting/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ClearAppData from "./images/clear-app-data.webp"; import Logout from "./images/logout.webp"; diff --git a/apps/docs/app/developer-docs/integrations/airtable/deleteIntegration.webp b/apps/docs/app/developer-docs/integrations/airtable/delete-integration.webp similarity index 100% rename from apps/docs/app/developer-docs/integrations/airtable/deleteIntegration.webp rename to apps/docs/app/developer-docs/integrations/airtable/delete-integration.webp diff --git a/apps/docs/app/developer-docs/integrations/airtable/page.mdx b/apps/docs/app/developer-docs/integrations/airtable/page.mdx index 67e85df2f8..e2efcdeaf3 100644 --- a/apps/docs/app/developer-docs/integrations/airtable/page.mdx +++ b/apps/docs/app/developer-docs/integrations/airtable/page.mdx @@ -1,9 +1,9 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AirtableConnected from "./airtable-connected.webp"; import ConnectWithAirtable from "./connect-with-airtable.webp"; import CreateNewIntegration from "./create-new-integration.webp"; -import DeleteIntegration from "./deleteIntegration.webp"; +import DeleteIntegration from "./delete-integration.webp"; import IntegrationTab from "./integrations-tab.webp"; import LinkSurveyWithTable from "./link-survey-with-table.webp"; import LinkWithQuestions from "./link-with-questions.webp"; @@ -24,8 +24,7 @@ export const metadata = { The Airtable integration allows you to automatically send responses to an Airtable of your choice. - If you are on a self-hosted instance, you will need to configure this integration separately. Please follow - the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. + If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. ## Formbricks Cloud @@ -121,8 +120,7 @@ To remove the integration with Airtable, /> - We do not store any other information of yours! We value Privacy more than you and rest assured you're safe - with us! + We do not store any other information of yours! We value Privacy more than you and rest assured you're safe with us! Still struggling or something not working as expected? [Join our Github Discussions](https://github.com/formbricks/formbricks/discussions) and we'd be glad to assist you! diff --git a/apps/docs/app/developer-docs/integrations/google-sheets/page.mdx b/apps/docs/app/developer-docs/integrations/google-sheets/page.mdx index 26be99f35c..274b39b947 100644 --- a/apps/docs/app/developer-docs/integrations/google-sheets/page.mdx +++ b/apps/docs/app/developer-docs/integrations/google-sheets/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ConnectWithGoogle from "./connect-with-google.webp"; import DeleteConnection from "./delete-connection.webp"; @@ -21,8 +21,7 @@ export const metadata = { The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice. - If you are on a self-hosted instance, you will need to configure this integration separately. Please follow - the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. + If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. ## Connect Google Sheets diff --git a/apps/docs/app/developer-docs/integrations/make/page.mdx b/apps/docs/app/developer-docs/integrations/make/page.mdx index e7c196df4d..39def46c7a 100644 --- a/apps/docs/app/developer-docs/integrations/make/page.mdx +++ b/apps/docs/app/developer-docs/integrations/make/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddModule from "./add-module.webp"; import CreateNewScenario from "./create-new-scenario.webp"; @@ -27,8 +27,7 @@ export const metadata = { Make is a powerful tool to send information between Formbricks and thousands of apps. Here's how to set it up. - Nailed down your survey?? Any changes in the survey cause additional work in the _Scenario_. It makes sense - to first settle on the survey you want to run and then get to setting up Make. + Nailed down your survey?? Any changes in the survey cause additional work in the _Scenario_. It makes sense to first settle on the survey you want to run and then get to setting up Make. ## Step 1: Setup your survey incl. `questionId` for every question @@ -45,8 +44,7 @@ Set up the `questionId`s of your survey questions before publishing. _Update the Question ID field in every question card under Advanced Settings._ - ### Already published? Duplicate survey You can only update the questionId before publishing the survey. If - already published, simply duplicate it. + ### Already published? Duplicate survey You can only update the questionId before publishing the survey. If already published, simply duplicate it. - The Formbricks n8n node is currently only available in the n8n self-hosted version as a community node. To - install it go to "Settings" -> "Community Nodes" and install @formbricks/n8n-nodes-formbricks. + The Formbricks n8n node is currently only available in the n8n self-hosted version as a community node. To install it go to "Settings" -> "Community Nodes" and install @formbricks/n8n-nodes-formbricks. n8n allows you to build flexible workflows focused on deep data integration. And with sharable templates and a user-friendly UI, the less technical people on your team can collaborate on them too. Unlike other tools, complexity is not a limitation. So you can build whatever you want — without stressing over budget. Hook up Formbricks with n8n and you can send your data to 350+ other apps. Here is how to do it. @@ -36,8 +35,7 @@ n8n allows you to build flexible workflows focused on deep data integration. And ## Step 1: Setup your survey incl. `questionId` for every question - Nailed down your survey? Any changes in the survey cause additional work in the n8n node. It makes sense to - first settle on the survey you want to run and then get to setting up n8n. + Nailed down your survey? Any changes in the survey cause additional work in the n8n node. It makes sense to first settle on the survey you want to run and then get to setting up n8n. When setting up the node your life will be easier when you change the `questionId`s of your survey questions. You can only do so **before** you publish your survey. diff --git a/apps/docs/app/developer-docs/integrations/notion/page.mdx b/apps/docs/app/developer-docs/integrations/notion/page.mdx index 797189c95e..01baccc20b 100644 --- a/apps/docs/app/developer-docs/integrations/notion/page.mdx +++ b/apps/docs/app/developer-docs/integrations/notion/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import ConnectWithNotion from "./images/connect-with-notion.webp"; import DeleteConnection from "./images/delete-connection.webp"; @@ -21,8 +21,7 @@ export const metadata = { The notion integration allows you to automatically send responses to a Notion database of your choice. - If you are on a self-hosted instance, you will need to configure this integration separately. Please follow - the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. + If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. ## Formbricks Cloud @@ -57,8 +56,7 @@ The notion integration allows you to automatically send responses to a Notion da /> - Before the next step, make sure that you have a Formbricks Survey with at least one question and a Notion - database in the Notion account you integrated. + Before the next step, make sure that you have a Formbricks Survey with at least one question and a Notion database in the Notion account you integrated. 5. Now click on the "Link New Database" button to link a Notion database with Formbricks and a modal will open up. diff --git a/apps/docs/app/developer-docs/integrations/overview/page.mdx b/apps/docs/app/developer-docs/integrations/overview/page.mdx index 23e310b570..b76774597e 100644 --- a/apps/docs/app/developer-docs/integrations/overview/page.mdx +++ b/apps/docs/app/developer-docs/integrations/overview/page.mdx @@ -10,8 +10,7 @@ export const metadata = { At Formbricks, we understand the importance of integrating with third-party applications. We have step-by-step guides to configure our third-party integrations with a your Formbricks instance. We currently support the below integrations, click on them to see their individual guides: - If you are on a self-hosted instance, you will need to configure these integrations manually. Please follow - the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. + If you are on a self-hosted instance, you will need to configure these integrations manually. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. - [Airtable](/developer-docs/integrations/airtable): Automatically send responses to an Airtable of your choice. diff --git a/apps/docs/app/developer-docs/integrations/slack/page.mdx b/apps/docs/app/developer-docs/integrations/slack/page.mdx index 3a5d73be50..8799631536 100644 --- a/apps/docs/app/developer-docs/integrations/slack/page.mdx +++ b/apps/docs/app/developer-docs/integrations/slack/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddSlackBot1 from "./images/add-slack-bot-1.webp"; import AddSlackBot2 from "./images/add-slack-bot-2.webp"; @@ -26,8 +26,7 @@ export const metadata = { The slack integration allows you to automatically send responses to a Slack channel of your choice. - If you are on a self-hosted instance, you will need to configure this integration separately. Please follow - the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. + If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance. ## Formbricks Cloud @@ -69,8 +68,7 @@ The slack integration allows you to automatically send responses to a Slack chan /> - Before the next step, make sure that you have a Formbricks Survey with at least one question and a Slack - channel in the Slack workspace you integrated. + Before the next step, make sure that you have a Formbricks Survey with at least one question and a Slack channel in the Slack workspace you integrated. 5. In order to make your channel available in channel dropdown, you need to add formbricks integration bot to the channel you want to link. You can do this by going to channel settings -> Integrations -> Add apps -> Search for "Formbricks" -> Select the bot -> Add. diff --git a/apps/docs/app/developer-docs/integrations/wordpress/page.mdx b/apps/docs/app/developer-docs/integrations/wordpress/page.mdx index 0b3077ec26..0b956f209b 100644 --- a/apps/docs/app/developer-docs/integrations/wordpress/page.mdx +++ b/apps/docs/app/developer-docs/integrations/wordpress/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import Img1 from "./1-wordpress-targeted-survey-on-website-free.webp"; import Img2 from "./2-run-website-survey-wordpress-targeted-for-free.webp"; diff --git a/apps/docs/app/developer-docs/integrations/zapier/page.mdx b/apps/docs/app/developer-docs/integrations/zapier/page.mdx index 1914258980..cf44575a6b 100644 --- a/apps/docs/app/developer-docs/integrations/zapier/page.mdx +++ b/apps/docs/app/developer-docs/integrations/zapier/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddNewZap from "./add-new-zap.webp"; import ChooseEvent from "./choose-event.webp"; @@ -27,8 +27,7 @@ export const metadata = { Zapier is a powerful ally. Hook up Formbricks with Zapier and you can send your data to 5000+ other apps. Here is how to do it. - ### Nail down your survey first? Any changes in the survey cause additional work in the Zap. It makes sense - to first settle on the survey you want to run and then get to setting up Zapier. + ### Nail down your survey first? Any changes in the survey cause additional work in the Zap. It makes sense to first settle on the survey you want to run and then get to setting up Zapier. ## Step 1: Setup your survey incl. `questionId` for every question diff --git a/apps/docs/app/developer-docs/js-sdk/page.mdx b/apps/docs/app/developer-docs/js-sdk/page.mdx index 4c1e163f07..659fd3cc8e 100644 --- a/apps/docs/app/developer-docs/js-sdk/page.mdx +++ b/apps/docs/app/developer-docs/js-sdk/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import I1 from "./images/1-set-up-in-app-micro-survey-popup.webp"; import I2 from "./images/2-micro-survey-pop-up-in-app.webp"; @@ -148,9 +148,7 @@ formbricks.reset(); Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks app: - {" "} - This is only needed when your framework has a custom routing system and you want to trigger surveys on route - changes. For example: NextJs + This is only needed when your framework has a custom routing system and you want to trigger surveys on route changes. For example: NextJs diff --git a/apps/docs/app/developer-docs/react-native-in-app-surveys/page.mdx b/apps/docs/app/developer-docs/react-native-in-app-surveys/page.mdx index 2f0a571d8c..08fab4b9b9 100644 --- a/apps/docs/app/developer-docs/react-native-in-app-surveys/page.mdx +++ b/apps/docs/app/developer-docs/react-native-in-app-surveys/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; export const metadata = { title: "React Native: Formbricks App SDK", diff --git a/apps/docs/app/developer-docs/rest-api/page.mdx b/apps/docs/app/developer-docs/rest-api/page.mdx index 956a7cd3e9..3c1b0a8bff 100644 --- a/apps/docs/app/developer-docs/rest-api/page.mdx +++ b/apps/docs/app/developer-docs/rest-api/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import AddApiKey from "./images/add-api-key.webp"; import ApiKeySecret from "./images/api-key-secret.webp"; @@ -58,8 +58,7 @@ The API requests are authorized with a personal API key. This API key gives you /> - ### Store API key safely! Anyone who has your API key has full control over your account. For security - reasons, you cannot view the API key again. + ### Store API key safely! Anyone who has your API key has full control over your account. For security reasons, you cannot view the API key again. ### Test your API Key diff --git a/apps/docs/app/developer-docs/webhooks/images/StepFive.webp b/apps/docs/app/developer-docs/webhooks/images/step-five.webp similarity index 100% rename from apps/docs/app/developer-docs/webhooks/images/StepFive.webp rename to apps/docs/app/developer-docs/webhooks/images/step-five.webp diff --git a/apps/docs/app/developer-docs/webhooks/images/StepFour.webp b/apps/docs/app/developer-docs/webhooks/images/step-four.webp similarity index 100% rename from apps/docs/app/developer-docs/webhooks/images/StepFour.webp rename to apps/docs/app/developer-docs/webhooks/images/step-four.webp diff --git a/apps/docs/app/developer-docs/webhooks/images/StepOne.webp b/apps/docs/app/developer-docs/webhooks/images/step-one.webp similarity index 100% rename from apps/docs/app/developer-docs/webhooks/images/StepOne.webp rename to apps/docs/app/developer-docs/webhooks/images/step-one.webp diff --git a/apps/docs/app/developer-docs/webhooks/images/StepThree.webp b/apps/docs/app/developer-docs/webhooks/images/step-three.webp similarity index 100% rename from apps/docs/app/developer-docs/webhooks/images/StepThree.webp rename to apps/docs/app/developer-docs/webhooks/images/step-three.webp diff --git a/apps/docs/app/developer-docs/webhooks/images/StepTwo.webp b/apps/docs/app/developer-docs/webhooks/images/step-two.webp similarity index 100% rename from apps/docs/app/developer-docs/webhooks/images/StepTwo.webp rename to apps/docs/app/developer-docs/webhooks/images/step-two.webp diff --git a/apps/docs/app/developer-docs/webhooks/page.mdx b/apps/docs/app/developer-docs/webhooks/page.mdx index 9e2e3b0d3e..89e7ed3e04 100644 --- a/apps/docs/app/developer-docs/webhooks/page.mdx +++ b/apps/docs/app/developer-docs/webhooks/page.mdx @@ -1,10 +1,10 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; -import StepFive from "./images/StepFive.webp"; -import StepFour from "./images/StepFour.webp"; -import StepOne from "./images/StepOne.webp"; -import StepThree from "./images/StepThree.webp"; -import StepTwo from "./images/StepTwo.webp"; +import StepFive from "./images/step-five.webp"; +import StepFour from "./images/step-four.webp"; +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: "Formbricks Webhooks Overview", diff --git a/apps/docs/app/developer-docs/website-survey-sdk/page.mdx b/apps/docs/app/developer-docs/website-survey-sdk/page.mdx index 4d42429070..e048f3342f 100644 --- a/apps/docs/app/developer-docs/website-survey-sdk/page.mdx +++ b/apps/docs/app/developer-docs/website-survey-sdk/page.mdx @@ -1,4 +1,4 @@ -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; import I1 from "./images/1-set-up-website-micro-survey-popup.webp"; export const metadata = { @@ -119,8 +119,7 @@ formbricks.reset(); Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks website: - This is only needed when your framework has a custom routing system and you want to trigger surveys on route - changes. For example: NextJs + This is only needed when your framework has a custom routing system and you want to trigger surveys on route changes. For example: NextJs diff --git a/apps/docs/app/introduction/how-it-works/page.mdx b/apps/docs/app/introduction/how-it-works/page.mdx index 80e88fa5c8..b2adef789a 100644 --- a/apps/docs/app/introduction/how-it-works/page.mdx +++ b/apps/docs/app/introduction/how-it-works/page.mdx @@ -4,7 +4,7 @@ import integrations from "./integrations.webp"; import Targeting from "./targeting.webp"; import Trigger from "./trigger.webp"; -import { MdxImage } from "@/components/MdxImage"; +import { MdxImage } from "@/components/mdx-image"; export const metadata = { title: "Formbricks Components Overview", diff --git a/apps/docs/app/introduction/what-is-formbricks/components/GettingStarted.tsx b/apps/docs/app/introduction/what-is-formbricks/components/getting-started.tsx similarity index 91% rename from apps/docs/app/introduction/what-is-formbricks/components/GettingStarted.tsx rename to apps/docs/app/introduction/what-is-formbricks/components/getting-started.tsx index 3a2ac0a009..89eae15fa5 100644 --- a/apps/docs/app/introduction/what-is-formbricks/components/GettingStarted.tsx +++ b/apps/docs/app/introduction/what-is-formbricks/components/getting-started.tsx @@ -1,5 +1,5 @@ -import { Button } from "@/components/Button"; -import { Heading } from "@/components/Heading"; +import { Button } from "@/components/button"; +import { Heading } from "@/components/heading"; const gettingStarted = [ { @@ -26,7 +26,7 @@ const gettingStarted = [ }, ]; -export const GettingStarted = () => { +export function GettingStarted(): React.JSX.Element { return (
@@ -47,4 +47,4 @@ export const GettingStarted = () => {
); -}; +} diff --git a/apps/docs/app/introduction/what-is-formbricks/page.mdx b/apps/docs/app/introduction/what-is-formbricks/page.mdx index 649e750247..f69b5c053d 100644 --- a/apps/docs/app/introduction/what-is-formbricks/page.mdx +++ b/apps/docs/app/introduction/what-is-formbricks/page.mdx @@ -1,7 +1,7 @@ -import { Button } from "@/components/Button"; -import { HeroPattern } from "@/components/HeroPattern"; +import { Button } from "@/components/button"; +import { HeroPattern } from "@/components/hero-pattern"; -import { GettingStarted } from "./components/GettingStarted"; +import { GettingStarted } from "./components/getting-started"; export const metadata = { title: "Formbricks: Open Source Experience Management", @@ -23,7 +23,7 @@ Welcome to Formbricks! Formbricks is a versatile open source survey platform wit ## Formbricks - The Open Source Survey Platform -The foundation of Formbricks is an open source (AGPLv3) survey platform. Our objective is to built a survey tool which can be used to survey any stakeholder of an organisation (user, customer, employee, etc.) at any point on any platform. +The foundation of Formbricks is an open source (AGPLv3) survey platform. Our objective is to built a survey tool which can be used to survey any stakeholder of an organisation (user, customer, employee, etc.) at any point on any platform. Today, you can already replace many of the existing surveying solutions with Formbricks: diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index b9d7fd72e7..ef1611cb21 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -1,6 +1,6 @@ import { Providers } from "@/app/providers"; -import { Layout } from "@/components/Layout"; -import { type Section } from "@/components/SectionProvider"; +import { Layout } from "@/components/layout"; +import { type Section } from "@/components/section-provider"; import "@/styles/tailwind.css"; import glob from "fast-glob"; import { type Metadata } from "next"; @@ -16,29 +16,27 @@ export const metadata: Metadata = { const jost = Jost({ subsets: ["latin"] }); -const RootLayout = async ({ children }: { children: React.ReactNode }) => { - let pages = await glob("**/*.mdx", { cwd: "src/app" }); - let allSectionsEntries = (await Promise.all( +async function RootLayout({ children }: { children: React.ReactNode }) { + const pages = await glob("**/*.mdx", { cwd: "src/app" }); + const allSectionsEntries: [string, Section[]][] = (await Promise.all( pages.map(async (filename) => [ - "/" + filename.replace(/(^|\/)page\.mdx$/, ""), - (await import(`./${filename}`)).sections, + `/${filename.replace(/(?:^|\/)page\.mdx$/, "")}`, + (await import(`./${filename}`) as { sections: Section[] }).sections, ]) - )) as Array<[string, Array
]>; - let allSections = Object.fromEntries(allSectionsEntries); + )); + const allSections = Object.fromEntries(allSectionsEntries); return ( - {process.env.NEXT_PUBLIC_LAYER_API_KEY && ( -