mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-29 11:30:11 -05:00
fix: linked to http instead of https (#1865)
This commit is contained in:
@@ -1,18 +1,19 @@
|
||||
import Image from "next/image";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import CreateChurnFlow from "./create-cancel-flow.webp";
|
||||
import ChangeText from "./change-text.webp";
|
||||
import TriggerInnerText from "./trigger-inner-text.webp";
|
||||
import TriggerCSS from "./trigger-css-selector.webp";
|
||||
import TriggerPageUrl from "./trigger-page-url.webp";
|
||||
import RecontactOptions from "./recontact-options.webp";
|
||||
import CreateChurnFlow from "./create-cancel-flow.webp";
|
||||
import PublishSurvey from "./publish-survey.webp";
|
||||
import RecontactOptions from "./recontact-options.webp";
|
||||
import SelectAction from "./select-action.webp";
|
||||
import TriggerCSS from "./trigger-css-selector.webp";
|
||||
import TriggerInnerText from "./trigger-inner-text.webp";
|
||||
import TriggerPageUrl from "./trigger-page-url.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "Mastering Churn Surveys with Formbricks | Essential Tips & Steps",
|
||||
description: "Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
|
||||
description:
|
||||
"Learn how to effectively utilize Formbricks' Churn Surveys to gain deeper insights into user departures. Dive into a step-by-step guide to craft, trigger, and optimize your churn surveys, ensuring you capture invaluable feedback at critical junctures",
|
||||
};
|
||||
|
||||
#### Best Practices
|
||||
@@ -39,15 +40,15 @@ The Churn Survey is among the most effective ways to identify weaknesses in your
|
||||
|
||||
To run the Churn Survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Churn Survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
1. Create new Churn Survey at [app.formbricks.com](https://app.formbricks.com/)
|
||||
2. Set up the user action to display survey at right point in time
|
||||
3. Choose correct recontact options to never miss a feedback
|
||||
4. Prevent that churn!
|
||||
|
||||
<Note>
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Churn Survey
|
||||
@@ -60,7 +61,7 @@ Click on "Create Survey" and choose the template “Churn Survey”:
|
||||
src={CreateChurnFlow}
|
||||
alt="Create churn survey by template"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
@@ -71,7 +72,7 @@ You’re free to update the question and answer options. However, based on our e
|
||||
src={ChangeText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
_Want to change the button color? You can do so in the product settings._
|
||||
@@ -92,7 +93,7 @@ To create the trigger for your Churn Survey, you have two options to choose from
|
||||
src={TriggerInnerText}
|
||||
alt="Set the trigger by inner Text"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
2. **Trigger by CSS Selector:** In case you have more than one button saying “Cancel Subscription” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“cancel-subscription”` and set your user action up like so:
|
||||
@@ -101,7 +102,7 @@ To create the trigger for your Churn Survey, you have two options to choose from
|
||||
src={TriggerCSS}
|
||||
alt="Set the trigger by CSS Selector"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
3. **Trigger by pageURL:** Lastly, you could also display your survey on a subpage “/subscription-cancelled” where you forward users once they cancelled the trial subscription. You can then create a user Action with the type `pageURL` with the following settings:
|
||||
@@ -110,7 +111,7 @@ To create the trigger for your Churn Survey, you have two options to choose from
|
||||
src={TriggerPageUrl}
|
||||
alt="Set the trigger by page URL"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅
|
||||
@@ -118,10 +119,9 @@ Whenever a user visits this page, matches the filter conditions above and the re
|
||||
Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
|
||||
|
||||
<Note>
|
||||
## 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 🤷
|
||||
</Note>
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
@@ -130,7 +130,7 @@ Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/a
|
||||
src={SelectAction}
|
||||
alt="Select feedback button action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
@@ -141,7 +141,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
|
||||
src={RecontactOptions}
|
||||
alt="Set recontact options"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
These settings make sure the survey is always displayed, when a user wants to Cancel their subscription.
|
||||
@@ -152,13 +152,13 @@ These settings make sure the survey is always displayed, when a user wants to Ca
|
||||
src={PublishSurvey}
|
||||
alt="Publish survey"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
<Note>
|
||||
## 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)](/docs/getting-started/quickstart-in-app-survey) 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)](/docs/getting-started/quickstart-in-app-survey)
|
||||
to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
@@ -11,7 +11,8 @@ import SelectAction from "./select-action.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "Setting Up Feature Chaser Surveys with Formbricks: A Comprehensive Guide",
|
||||
description: "Learn how to harness the power of Formbricks to gather targeted user feedback on specific features. Dive deep into creating, triggering, and publishing the Feature Chaser survey to enhance your product with actionable insights for specific users.",
|
||||
description:
|
||||
"Learn how to harness the power of Formbricks to gather targeted user feedback on specific features. Dive deep into creating, triggering, and publishing the Feature Chaser survey to enhance your product with actionable insights for specific users.",
|
||||
};
|
||||
|
||||
#### Best Practices
|
||||
@@ -38,13 +39,13 @@ Product analytics never tell you why a feature is used - and why not. Following
|
||||
|
||||
To run the Feature Chaser survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Feature Chaser survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
1. Create new Feature Chaser survey at [app.formbricks.com](https://app.formbricks.com/)
|
||||
2. Setup a user action to display survey at the right point in time
|
||||
|
||||
<Note>
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Feature Chaser
|
||||
@@ -57,7 +58,7 @@ Click on "Create Survey" and choose the template “Feature Chaser”:
|
||||
src={CreateSurvey}
|
||||
alt="Create survey by template"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 2. Update questions
|
||||
@@ -68,7 +69,7 @@ The questions you want to ask are dependent on your feature and can be very spec
|
||||
src={ChangeText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Save, and move over to where the magic happens: The “Audience” tab.
|
||||
@@ -87,7 +88,7 @@ There are two ways to track a button:
|
||||
src={ActionText}
|
||||
alt="Set the trigger by inner Text"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
2. **Trigger by CSS Selector:** In case you have more than one button saying “Export Report” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“export-report-featurename”` and set your user action up like so:
|
||||
@@ -96,7 +97,7 @@ There are two ways to track a button:
|
||||
src={ActionCSS}
|
||||
alt="Set the trigger by CSS Selector"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Please follow our [Actions manual](/docs/actions/why) for an in-depth description of how Actions work.
|
||||
@@ -107,7 +108,7 @@ Please follow our [Actions manual](/docs/actions/why) for an in-depth descriptio
|
||||
src={SelectAction}
|
||||
alt="Select PMF trigger button action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 5. Last step: Set Recontact Options correctly
|
||||
@@ -118,17 +119,17 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
|
||||
src={RecontactOptions}
|
||||
alt="Set recontact options"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
|
||||
<Note>
|
||||
## 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)](/docs/getting-started/quickstart-in-app-survey) 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)](/docs/getting-started/quickstart-in-app-survey)
|
||||
to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
@@ -11,7 +11,8 @@ import SelectAction from "./select-action.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "Boost Your Trial Conversion Rates with Formbricks: Comprehensive Guide",
|
||||
description: "Unlock the secret to converting more trial users into paying customers using Formbricks. Understand insights behind trial cancellations and tailor your offering to fit user needs. Dive into our step-by-step tutorial and improve your conversion strategy today",
|
||||
description:
|
||||
"Unlock the secret to converting more trial users into paying customers using Formbricks. Understand insights behind trial cancellations and tailor your offering to fit user needs. Dive into our step-by-step tutorial and improve your conversion strategy today",
|
||||
};
|
||||
|
||||
#### Best Practices
|
||||
@@ -37,14 +38,14 @@ The better you understand why free users don’t convert to paid users, the high
|
||||
|
||||
To display the Trial Conversion Survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Trial Conversion Survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
1. Create new Trial Conversion Survey at [app.formbricks.com](https://app.formbricks.com/)
|
||||
2. Set up the user action to display survey at right point in time
|
||||
3. Print that 💸
|
||||
|
||||
<Note>
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
## 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.)](/docs/getting-started/quickstart-in-app-survey)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Trial Conversion Survey
|
||||
@@ -57,7 +58,7 @@ Click on "Create Survey" and choose the template “Improve Trial Conversion”:
|
||||
src={CreateSurvey}
|
||||
alt="Create survey by template"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
@@ -68,7 +69,7 @@ You’re free to update the questions and answer options. However, based on our
|
||||
src={ChangeText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
@@ -78,8 +79,8 @@ Save, and move over to the “Audience” tab.
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Note>
|
||||
## 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.
|
||||
</Note>
|
||||
|
||||
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.
|
||||
@@ -94,7 +95,7 @@ How you trigger your survey depends on your product. There are two options:
|
||||
src={ActionPageurl}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Whenever a user visits this page, the survey will be displayed ✅
|
||||
@@ -105,7 +106,7 @@ Whenever a user visits this page, the survey will be displayed ✅
|
||||
src={ActionText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Please have a look at our complete [Actions manual](/docs/actions/why) if you have questions.
|
||||
@@ -116,7 +117,7 @@ Please have a look at our complete [Actions manual](/docs/actions/why) if you ha
|
||||
src={SelectAction}
|
||||
alt="Select feedback button action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
@@ -127,17 +128,17 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
|
||||
src={RecontactOptions}
|
||||
alt="Set recontact options"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
|
||||
<Note>
|
||||
## 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)](/docs/getting-started/quickstart-in-app-survey) 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)](/docs/getting-started/quickstart-in-app-survey)
|
||||
to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
@@ -14,7 +14,8 @@ import SelectAction from "./select-action.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "Maximize User Interview Participation with In-app Interview Prompts",
|
||||
description: "Engage with your power users seamlessly using Formbricks' In-app Interview Prompt. Ditch traditional email invites and experience way more more respondents. Dive into our comprehensive guide on setting up auto-scheduled interviews today and enhance your user understanding",
|
||||
description:
|
||||
"Engage with your power users seamlessly using Formbricks' In-app Interview Prompt. Ditch traditional email invites and experience way more more respondents. Dive into our comprehensive guide on setting up auto-scheduled interviews today and enhance your user understanding",
|
||||
};
|
||||
|
||||
#### Best Practices
|
||||
@@ -42,14 +43,14 @@ Product analytics and in-app surveys are incomplete without user interviews. Set
|
||||
|
||||
To display an Interview Prompt in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Interview Prompt at [app.formbricks.com](http://app.formbricks.com/)
|
||||
1. Create new Interview Prompt at [app.formbricks.com](https://app.formbricks.com/)
|
||||
2. Adjust content and settings
|
||||
3. That’s it! 🎉
|
||||
|
||||
<Note>
|
||||
## 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).](/docs/getting-started/quickstart-in-app-survey)
|
||||
## 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).](/docs/getting-started/quickstart-in-app-survey)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Interview Prompt
|
||||
@@ -62,7 +63,7 @@ Click on "Create Survey" and choose the template “Interview Prompt”:
|
||||
src={CreatePrompt}
|
||||
alt="Create interview prompt by template"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 2. Update prompt and CTA
|
||||
@@ -73,7 +74,7 @@ Update the prompt, description and button text to match your products tonality.
|
||||
src={ChangeText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
In the button settings you have to make sure it is set to “External URL”. In the URL field, copy your booking link (e.g. https://cal.com/company/user-interview). If you don’t have a booking link yet, head over to [cal.com](http://cal.com) and get one - they have the best free plan out there!
|
||||
@@ -82,7 +83,7 @@ In the button settings you have to make sure it is set to “External URL”. In
|
||||
src={InterviewExample}
|
||||
alt="Add CSS action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
@@ -90,8 +91,8 @@ Save, and move over to the “Audience” tab.
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Note>
|
||||
## Filter by attribute coming soon
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next few days.
|
||||
## Filter by attribute coming soon We're working on pre-segmenting users by attributes. We will update this
|
||||
manual in the next few days.
|
||||
</Note>
|
||||
|
||||
Once you clicked over to the “Audience” tab you can change the settings. In the **Who To Send** card, select “Filter audience by attribute”. This allows you to only show the prompt to a specific segment of your user base.
|
||||
@@ -104,12 +105,12 @@ Great, now only the “Power User” segment will see our Interview Prompt. But
|
||||
|
||||
To create the trigger to show your Interview Prompt, go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool No-Code User Action Tracker:
|
||||
|
||||
<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
|
||||
<Note>
|
||||
## You can also add actions in your code
|
||||
You can also create [Code Actions](/docs/actions/code) using `formbricks.track("Eventname")` - they will automatically
|
||||
appear in your Actions overview as long as the SDK is embedded.
|
||||
## You can also add actions in your code You can also create [Code Actions](/docs/actions/code) using
|
||||
`formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
|
||||
is embedded.
|
||||
</Note>
|
||||
|
||||
Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
|
||||
@@ -120,18 +121,18 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
|
||||
src={ActionPageurl}
|
||||
alt="Add page URL action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
|
||||
|
||||
<div className="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
<Image
|
||||
src={ActionInner}
|
||||
alt="Add inner text action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -141,7 +142,7 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
|
||||
src={SelectAction}
|
||||
alt="Select feedback button action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 6. Set Recontact Options correctly
|
||||
@@ -152,17 +153,17 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
|
||||
src={RecontactOptions}
|
||||
alt="Set recontact options"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃 🤸
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
|
||||
<Note>
|
||||
## 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)](/docs/getting-started/quickstart-in-app-survey) 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)](/docs/getting-started/quickstart-in-app-survey)
|
||||
to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
@@ -11,7 +11,8 @@ import SelectAction from "./select-action.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "How to Set Up a Product-Market Fit Survey Using Formbricks - Step-by-Step Guide",
|
||||
description: "Learn to leverage Formbricks to create and implement a Product-Market Fit survey in your web app. Follow our detailed step-by-step guide to measure and understand your PMF effectively. Ensure high data quality, efficient triggers, and actionable insights.",
|
||||
description:
|
||||
"Learn to leverage Formbricks to create and implement a Product-Market Fit survey in your web app. Follow our detailed step-by-step guide to measure and understand your PMF effectively. Ensure high data quality, efficient triggers, and actionable insights.",
|
||||
};
|
||||
|
||||
#### Best Practices
|
||||
@@ -36,14 +37,14 @@ Measuring and understanding your PMF is essential to build a large, successful b
|
||||
|
||||
To display the Product-Market Fit survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Product-Market Fit survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
1. Create new Product-Market Fit survey at [app.formbricks.com](https://app.formbricks.com/)
|
||||
2. Setup pre-segmentation to assure high data quality
|
||||
3. Setup the user action to display survey at good point in time
|
||||
|
||||
<Note>
|
||||
## 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).](/docs/getting-started/quickstart-in-app-survey)
|
||||
## 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).](/docs/getting-started/quickstart-in-app-survey)
|
||||
</Note>
|
||||
|
||||
### 1. Create new PMF survey
|
||||
@@ -56,7 +57,7 @@ Click on "Create Survey" and choose one of the PMF survey templates. The first o
|
||||
src={CreateSurvey}
|
||||
alt="Create survey by template"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
@@ -67,7 +68,7 @@ You’re free to update the question and answer options. However, based on our e
|
||||
src={ChangeText}
|
||||
alt="Change text content"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
@@ -77,8 +78,8 @@ Save, and move over to where the magic happens: The “Audience” tab.
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Note>
|
||||
## 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.
|
||||
</Note>
|
||||
|
||||
To run this survey properly, you should pre-segment your user base. As touched upon earlier: if you ask every user you’ll get lots of opinions which are often misleading. You only want to gather feedback from people who invested the time to get to know and use your product:
|
||||
@@ -96,25 +97,31 @@ This way you make sure that you separate potentially misleading opinions from va
|
||||
### 4. Set up a trigger for the Product-Market Fit survey:
|
||||
|
||||
You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/docs/actions/why) if you are not sure how to set them up:
|
||||
|
||||
<Col>
|
||||
<div>
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image
|
||||
src={ActionPageurl}
|
||||
alt="Add inner text action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Image
|
||||
src={ActionCSS}
|
||||
alt="Add CSS action"
|
||||
quality="100"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
<Image
|
||||
src={ActionPageurl}
|
||||
alt="Add inner text action"
|
||||
quality="100"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
### 5. Select Action in the “When to ask” card
|
||||
<Col>
|
||||
<Image
|
||||
src={SelectAction}
|
||||
alt="Select PMF trigger button action"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
<Image
|
||||
src={SelectAction}
|
||||
alt="Select PMF trigger button action"
|
||||
quality="100"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
</Col>
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
@@ -124,17 +131,17 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
|
||||
src={RecontactOptions}
|
||||
alt="Set recontact options"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
|
||||
|
||||
<Note>
|
||||
## 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)](/docs/getting-started/quickstart-in-app-survey) 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)](/docs/getting-started/quickstart-in-app-survey)
|
||||
to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import AuthorBox from "@/components/shared/AuthorBox";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import Image from "next/image";
|
||||
|
||||
import Appcues from "./best-feedback-app-2024-appcues-feedback-app.png";
|
||||
import Header from "./best-feedback-app-2024-free-in-app-header-image.webp";
|
||||
import Formbricks from "./formbricks-best-open-source-feedback-app.png";
|
||||
@@ -90,7 +91,7 @@ Among the plethora of tools available in today’s market, this section will gui
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
|
||||
[Formbricks](http://formbricks.com/) is an open-source micro-survey solution designed to gather specific user feedback at the perfect moment in their journey. It allows you to create and deploy targeted surveys within your app without disrupting the user experience.
|
||||
[Formbricks](https://formbricks.com/) is an open-source micro-survey solution designed to gather specific user feedback at the perfect moment in their journey. It allows you to create and deploy targeted surveys within your app without disrupting the user experience.
|
||||
|
||||
Formbricks boasts a user-friendly interface, making it easy for both technical and non-technical users to create and deploy micro-surveys. The no-code editor removes the need for coding knowledge, while the intuitive design guides you through the process. Being the only open-source feedback app out there, privacy-focused users will love this!
|
||||
|
||||
|
||||
+1
-1
@@ -68,7 +68,7 @@ Let's have a look at the best HotJar alternatives in 2024, including open source
|
||||
className="w-full rounded-lg"
|
||||
/>
|
||||
|
||||
[Formbricks](http://formbricks.com/) is an open source micro-survey solution designed to gather specific user feedback at the perfect moment in the journey. It allows you to create and deploy **targeted surveys within your app or on public websites** without disrupting the user experience.
|
||||
[Formbricks](https://formbricks.com/) is an open source micro-survey solution designed to gather specific user feedback at the perfect moment in the journey. It allows you to create and deploy **targeted surveys within your app or on public websites** without disrupting the user experience.
|
||||
|
||||
It's super good at one thing: making your forms and survey experiences awesome. It shows you why people abandon your forms, which questions cause churn, and how to fix them to get more people to finish. No heatmaps or fancy recordings, just laser focus on surveys.
|
||||
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@ export default function HowToAddAttributesButton() {
|
||||
return (
|
||||
<Button
|
||||
variant="secondary"
|
||||
href="http://formbricks.com/docs/attributes/custom-attributes"
|
||||
href="https://formbricks.com/docs/attributes/custom-attributes"
|
||||
target="_blank">
|
||||
<QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
|
||||
How to add attributes
|
||||
|
||||
Reference in New Issue
Block a user