diff --git a/apps/docs/app/link-surveys/market-research-panel/copy-survey-link.webp b/apps/docs/app/link-surveys/market-research-panel/copy-survey-link.webp new file mode 100644 index 0000000000..f994d21f67 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/copy-survey-link.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/create-study.webp b/apps/docs/app/link-surveys/market-research-panel/create-study.webp new file mode 100644 index 0000000000..969bc3616d Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/create-study.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/hidden-fields.webp b/apps/docs/app/link-surveys/market-research-panel/hidden-fields.webp new file mode 100644 index 0000000000..4c4545ca21 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/hidden-fields.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/page.mdx b/apps/docs/app/link-surveys/market-research-panel/page.mdx new file mode 100644 index 0000000000..d21ba337e0 --- /dev/null +++ b/apps/docs/app/link-surveys/market-research-panel/page.mdx @@ -0,0 +1,131 @@ +import { MdxImage } from "@/components/MdxImage"; + +import CopySurveyLink from "./copy-survey-link.webp"; +import CreateStudy from "./create-study.webp"; +import HiddenFields from "./hidden-fields.webp"; +import PreviewComplete from "./preview-complete.webp"; +import PreviewStudy from "./preview-study.webp"; +import AddRedirectUrl from "./redirect-url-formbricks.webp"; +import RedirectUrl from "./redirect-url.webp"; +import ScreeningOut from "./screening-out.webp"; +import UrlParameters from "./url-parameters.webp"; + + +export const metadata = { + title: "Creating a Research Panel with Prolific", + description: + "Formbricks surveys can be integrated with Prolifics participant panel easily. This tutorial walks you through the steps on how to access a pool of over 200.000 participants for your research.", +}; + +#### Research Panel + +# Creating a Research Panel with Prolific + +You need a lot of research participants that match your target audience fast? + +Formbricks integrates well with Prolific. Prolific provides a pool of over 200.000 research participants you can choose from. Run market research with Formbricks within hours, not days. + + + Prolific is a paid service. You need to fund your account to access the pool of participants. The cost depends on the number of participants you want to reach and the demographics you're targeting. You can get an estimate of the cost with the [Prolific price calculator](https://www.prolific.com/calculator) + + +## Purpose + +External research panels are useful when: + +- You don't have access to enough people who match your target audience +- You want to reach a specific demographic +- You want to reach a large number of people quickly + +## Steps to Follow + +### Step 1: Add hidden fields to the Formbricks survey +To be able to attribute a completed answer to a research participant, you need to add hidden fields to your Formbricks survey. To do so, edit your survey and scroll down to the Hidden Fields card. + +Add three fields with the IDs `PROLIFIC_PID`, `STUDY_ID`, and `SESSION_ID`. + + + +### Step 2: Create an account on Prolific +Go to [Prolific](https://app.prolific.co/) and create an account. + +### Step 3: Create a study on Prolific +Once you're logged in to Prolific, create a new study. + + + +### Step 4: Copy the Formbricks survey link to the Prolific study +We connect the Formbricks survey with the Prolific study by copying the survey link from Formbricks and pasting it into the Prolific study: + + + +### Step 5: Choose URL parameters for attribution +To attribute responses to the correct participant, you need to add URL parameters to the Formbricks survey link. The parameters are `PROLIFIC_PID`, `STUDY_ID`, and `SESSION_ID`, exactly like the hidden fields you added. + + +### Step 6: Update the Formbricks Redirect URL +To ensure that participants are redirected back to Prolific after completing the survey, add the redirect URL provided in the Prolific study setup (e.g. `https://app.prolific.co/submissions/complete?cc=I2PWSFRG`) + +Copy from Prolific: + + +Set it up as Redirect URL in the Response Options in Formbricks: + + +### Step 7: Preview the study +Preview the study using Prolific's [Preview-functionality](https://researcher-help.prolific.com/hc/en-gb/articles/360009222853-Previewing-your-study) + + + +Got to the success screen? Then you're ready to publish your study! + + +### Step 8: Publish the study +After you've published the study, you'll get the first responses within a few hours. + + + Prolific is a paid service. You need to fund your account to publish your study. + + +### That's it! 🎉 +Once you've published the survey, you can sit back and watch the responses come in. Prolific will take care of the rest. \ No newline at end of file diff --git a/apps/docs/app/link-surveys/market-research-panel/preview-complete.webp b/apps/docs/app/link-surveys/market-research-panel/preview-complete.webp new file mode 100644 index 0000000000..7e7120d926 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/preview-complete.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/preview-study.webp b/apps/docs/app/link-surveys/market-research-panel/preview-study.webp new file mode 100644 index 0000000000..6b665e8954 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/preview-study.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/redirect-url-formbricks.webp b/apps/docs/app/link-surveys/market-research-panel/redirect-url-formbricks.webp new file mode 100644 index 0000000000..eda709578c Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/redirect-url-formbricks.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/redirect-url.webp b/apps/docs/app/link-surveys/market-research-panel/redirect-url.webp new file mode 100644 index 0000000000..3f106f1bf3 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/redirect-url.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/screening-out.webp b/apps/docs/app/link-surveys/market-research-panel/screening-out.webp new file mode 100644 index 0000000000..7d8dee37f2 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/screening-out.webp differ diff --git a/apps/docs/app/link-surveys/market-research-panel/url-parameters.webp b/apps/docs/app/link-surveys/market-research-panel/url-parameters.webp new file mode 100644 index 0000000000..2215eb11f0 Binary files /dev/null and b/apps/docs/app/link-surveys/market-research-panel/url-parameters.webp differ diff --git a/apps/docs/lib/navigation.ts b/apps/docs/lib/navigation.ts index 07197496ce..292897d9f2 100644 --- a/apps/docs/lib/navigation.ts +++ b/apps/docs/lib/navigation.ts @@ -84,6 +84,7 @@ export const navigation: Array = [ { title: "Hidden Fields", href: "/link-surveys/hidden-fields" }, { title: "Start At Question", href: "/link-surveys/start-at-question" }, { title: "Embed Surveys Anywhere", href: "/link-surveys/embed-surveys" }, + { title: "Market Research Panel", href: "/link-surveys/market-research-panel" }, { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, { title: "User Metadata", href: "/global/metadata" }, { title: "Custom Styling", href: "/global/overwrite-styling" }, // global diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx index afe7090732..c99d6fd778 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx @@ -1,18 +1,16 @@ "use client"; -import { ArrowLeftIcon, BellRing, BlocksIcon, Code2Icon, LinkIcon, MailIcon } from "lucide-react"; +import { BellRing, BlocksIcon, Code2Icon, LinkIcon, MailIcon, UsersRound } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useState } from "react"; -import { cn } from "@formbricks/lib/cn"; import { TSurvey } from "@formbricks/types/surveys"; import { TUser } from "@formbricks/types/user"; -import { Button } from "@formbricks/ui/Button"; +import { Badge } from "@formbricks/ui/Badge"; import { Dialog, DialogContent } from "@formbricks/ui/Dialog"; import { ShareSurveyLink } from "@formbricks/ui/ShareSurveyLink"; -import { EmailTab } from "./shareEmbedTabs/EmailTab"; -import { LinkTab } from "./shareEmbedTabs/LinkTab"; -import { WebpageTab } from "./shareEmbedTabs/WebpageTab"; +import { EmbedView } from "./shareEmbedModal/EmbedView"; +import { PanelInfoView } from "./shareEmbedModal/PanelInfoView"; interface ShareEmbedSurveyProps { survey: TSurvey; @@ -21,6 +19,7 @@ interface ShareEmbedSurveyProps { webAppUrl: string; user: TUser; } + export const ShareEmbedSurvey = ({ survey, open, setOpen, webAppUrl, user }: ShareEmbedSurveyProps) => { const router = useRouter(); const environmentId = survey.environmentId; @@ -34,26 +33,26 @@ export const ShareEmbedSurvey = ({ survey, open, setOpen, webAppUrl, user }: Sha ]; const [activeId, setActiveId] = useState(tabs[0].id); - const [showInitialPage, setShowInitialPage] = useState(true); + const [showView, setShowView] = useState("start"); const [surveyUrl, setSurveyUrl] = useState(""); const handleOpenChange = (open: boolean) => { setActiveId(tabs[0].id); setOpen(open); - setShowInitialPage(open); // Reset to initial page when modal opens + setShowView(open ? "start" : ""); // Reset to initial page when modal opens or closes // fetch latest responses router.refresh(); }; const handleInitialPageButton = () => { - setShowInitialPage(!showInitialPage); + setShowView("start"); }; return ( - {showInitialPage ? ( + {showView === "start" ? (

Your survey is public 🎉

@@ -66,10 +65,10 @@ export const ShareEmbedSurvey = ({ survey, open, setOpen, webAppUrl, user }: Sha

What's next?

-
+
- ) : ( -
-
- -
-
-
- {tabs.map((tab) => ( - - ))} -
-
-
- {activeId === "email" ? ( - - ) : activeId === "webpage" ? ( - - ) : activeId === "link" ? ( - - ) : null} -
-
- {tabs.slice(0, 2).map((tab) => ( - - ))} -
-
-
-
- )} + ) : showView === "embed" ? ( + + ) : showView === "panel" ? ( + + ) : null}
); diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmailTab.tsx similarity index 100% rename from apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx rename to apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmailTab.tsx diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.tsx new file mode 100644 index 0000000000..2015af8ec0 --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { ArrowLeftIcon } from "lucide-react"; +import { cn } from "@formbricks/lib/cn"; +import { Button } from "@formbricks/ui/Button"; +import { EmailTab } from "./EmailTab"; +import { LinkTab } from "./LinkTab"; +import { WebpageTab } from "./WebpageTab"; + +interface EmbedViewProps { + handleInitialPageButton: () => void; + tabs: Array<{ id: string; label: string; icon: any }>; + activeId: string; + setActiveId: React.Dispatch>; + survey: any; + email: string; + surveyUrl: string; + setSurveyUrl: React.Dispatch>; + webAppUrl: string; +} + +export const EmbedView = ({ + handleInitialPageButton, + tabs, + activeId, + setActiveId, + survey, + email, + surveyUrl, + setSurveyUrl, + webAppUrl, +}: EmbedViewProps) => { + return ( +
+
+ +
+
+
+ {tabs.map((tab) => ( + + ))} +
+
+
+ {activeId === "email" ? ( + + ) : activeId === "webpage" ? ( + + ) : activeId === "link" ? ( + + ) : null} +
+
+ {tabs.slice(0, 2).map((tab) => ( + + ))} +
+
+
+
+ ); +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/LinkTab.tsx similarity index 100% rename from apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx rename to apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/LinkTab.tsx diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/PanelInfoView.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/PanelInfoView.tsx new file mode 100644 index 0000000000..e1df16d34f --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/PanelInfoView.tsx @@ -0,0 +1,96 @@ +"use client"; + +import ProlificLogo from "@/images/prolific-logo.webp"; +import ProlificUI from "@/images/prolific-screenshot.webp"; +import { ArrowLeftIcon } from "lucide-react"; +import Image from "next/image"; +import { Button } from "@formbricks/ui/Button"; + +interface PanelInfoViewProps { + handleInitialPageButton: () => void; +} + +export const PanelInfoView = ({ handleInitialPageButton }: PanelInfoViewProps) => { + return ( +
+
+ +
+
+
+ Prolific panel selection UI +
+

What is a panel?

+

+ A panel is a group of participants selected based on characteristics such as age, profession, + gender, etc. +

+
+
+

When do I need it?

+

+ If you don’t have access to enough people who match your target audience, it makes sense to pay + for access to a panel. +

+
+
+

What is Prolific?

+

+ We’re partnering with Prolific to offer you access to a pool of 200.000 participant to do + research with. +

+
+
+
+ Prolific panel selection UI +
+

How to create a panel

+
+
+

Step 1: Create an account with Prolific

+

+ We partner with Prolific to give you access to a pool of over 200.000 vetted participants. +

+
+
+

Step 2: Create a study

+

+ At Prolific, you create a new study where you can pick your preferred audience based on hundreds + of characteristics. +

+
+
+

Step 3: Connect your survey

+

+ Set up hidden fields in your Formbricks survey to track which participant provided which answer. +

+
+
+

Step 4: Launch your study

+

+ Once everything is setup, you can launch your study. Within a few hours you’ll receive the first + responses. +

+
+ +
+
+
+ ); +}; diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebpageTab.tsx similarity index 100% rename from apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx rename to apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebpageTab.tsx diff --git a/apps/web/images/prolific-logo.webp b/apps/web/images/prolific-logo.webp new file mode 100644 index 0000000000..6ec07371ee Binary files /dev/null and b/apps/web/images/prolific-logo.webp differ diff --git a/apps/web/images/prolific-screenshot.webp b/apps/web/images/prolific-screenshot.webp new file mode 100644 index 0000000000..e6555cd3a4 Binary files /dev/null and b/apps/web/images/prolific-screenshot.webp differ