mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 02:10:12 -06:00
add components, images and pages
This commit is contained in:
Matthias Nannt
@@ -1,25 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Code Actions",
|
||||
description:
|
||||
"Integrate code actions in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
|
||||
};
|
||||
|
||||
Actions can also be set in the code base. You can fire an action using `formbricks.track()`
|
||||
|
||||
```javascript
|
||||
formbricks.track("Action Name");
|
||||
```
|
||||
|
||||
Here is an example of how to fire an action when a user clicks a button:
|
||||
|
||||
```javascript
|
||||
const handleClick = () => {
|
||||
formbricks.track("Button Clicked");
|
||||
};
|
||||
|
||||
return <button onClick={handleClick}>Click Me</button>;
|
||||
```
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "No-Code Actions",
|
||||
description:
|
||||
"Utilize Formbricks' No-Code Actions like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
|
||||
};
|
||||
|
||||
No-Code actions can be set up within Formbricks with just a few clicks. There are three types of No-Code actions:
|
||||
|
||||
## Page URL Action
|
||||
|
||||
The page URL action is triggered, when a user visits a specific page in your application. There are several match conditions:
|
||||
|
||||
- `exactMatch`: The URL should exactly match the provided string.
|
||||
- `contains`: The URL should contain the specified string as a substring.
|
||||
- `startsWith`: The URL should start with the specified string.
|
||||
- `endsWith`: The URL should end with the specified string.
|
||||
- `notMatch`: The URL should not match the specified condition.
|
||||
- `notContains`: The URL should not contain the specified string as a substring.
|
||||
|
||||
## innerText Action
|
||||
|
||||
The innerText action checks if the `innerText` of a clicked HTML element matches a specific text, e.g. the label of a button. Display a survey on any button click!
|
||||
|
||||
## CSS Selector Action
|
||||
|
||||
The CSS Selector action checks if the provided CSS selector matches the selector of a clicked HTML element. The CSS selector can be a class, id or any other CSS selector within your website. Display a survey on any element click!
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "What are actions and why are they useful?",
|
||||
description:
|
||||
"Actions in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking actions for granular surveying.",
|
||||
};
|
||||
|
||||
You want to understand what your users think and feel during specific moments in the user journey. To be able to ask at exactly the right point in time, you need actions.
|
||||
|
||||
## What are actions?
|
||||
|
||||
Actions are a little notification sent from your application to Formbricks. You decide which actions are sent either in your [Code](/docs/actions/code) or by setting up a [No-Code](/docs/actions/no-code) action within Formbricks.
|
||||
|
||||
## How do actions work?
|
||||
|
||||
When a predefined action happens in your app, the Formbricks widget notices. This action can then trigger a survey to be shown to the user and is stored in the database.
|
||||
|
||||
## Why are actions useful?
|
||||
|
||||
Actions help you to display your surveys at the right time. Later on, you will be able to segment your users based on the actions they have triggered in the past. This way, you can create much more granular user segments, e.g. only target users that already have used a specific feature.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
@@ -1,41 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
|
||||
import AddApiKey from "./add-api-key.png";
|
||||
import ApiKeySecret from "./api-key-secret.png";
|
||||
|
||||
export const meta = {
|
||||
title: "API Key Setup",
|
||||
description:
|
||||
"Generate, store, and delete personal API keys for secure Formbricks access. Ensure safekeeping to prevent unauthorized account control.",
|
||||
};
|
||||
|
||||
## Auth: Personal API key
|
||||
|
||||
The API requests are authorized with a personal API key. This API key gives you the same rights as if you were logged in at formbricks.com - **don't share it around!**
|
||||
|
||||
### How to generate an API key
|
||||
|
||||
1. Go to your settings on [app.formbricks.com](https://app.formbricks.com).
|
||||
2. Go to page “API keys”
|
||||
<Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg" />
|
||||
3. Create a key for the development or production environment.
|
||||
4. Copy the key immediately. You won’t be able to see it again.
|
||||
<Image src={ApiKeySecret} alt="API Key Secret" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Store API key safely" type="warning">
|
||||
Anyone who has your API key has full control over your account. For security reasons, you cannot view the
|
||||
API key again.
|
||||
</Callout>
|
||||
|
||||
### Delete a personal API key
|
||||
|
||||
1. Go to settings on [app.formbricks.com](https://app.formbricks.com/).
|
||||
2. Go to page “API keys”.
|
||||
3. Find the key you wish to revoke and select “Delete”.
|
||||
4. Your API key will stop working immediately.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API Overview",
|
||||
description:
|
||||
"Explore Formbricks' APIs: Public Client API for client-side tasks, and User API for account management with secure API Key authentication.",
|
||||
};
|
||||
|
||||
Formbricks offers two types of APIs: the Public Client API and the User API. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
|
||||
|
||||
## Public Client API
|
||||
|
||||
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
|
||||
|
||||
## User API
|
||||
|
||||
The User API provides access to all data and settings that are visible in the Formbricks App. This API requires a personal API Key for authentication, which can be generated in the Settings section of the Formbricks App. With the User API, you can manage your Formbricks account programmatically, accessing and modifying data and settings as needed.
|
||||
|
||||
**Auth:** Personal API Key
|
||||
|
||||
API requests made to the User API are authorized using a personal API key. This key grants the same rights and access as if you were logged in at formbricks.com. It's essential to keep your API key secure and not share it with others.
|
||||
|
||||
To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/api-key-setup).
|
||||
|
||||
By understanding the differences between these two APIs, you can choose the appropriate one for your needs, ensuring a secure and efficient integration with the Formbricks platform.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting attributes with code",
|
||||
description:
|
||||
"Set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. All open-source.",
|
||||
};
|
||||
|
||||
One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
|
||||
|
||||
### Setting Custom User Attributes
|
||||
|
||||
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("Plan", "Pro");
|
||||
```
|
||||
|
||||
Generally speaking, the setAttribute function works like this:
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("attribute_key", "attribute_value");
|
||||
```
|
||||
|
||||
Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,45 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Identifying Users",
|
||||
description:
|
||||
"Identify users with Formbricks by setting User ID, email, and custom attributes. Enhance survey targeting and recontacting while maintaining user privacy.",
|
||||
};
|
||||
|
||||
At Formbricks, we value user privacy. By default, Formbricks doesn't collect or store any personal information from your users. However, we understand that it can be helpful for you to know which user submitted the feedback and also functionality like recontacting users and controlling the waiting period between surveys requires identifying the users. That's why we provide a way for you to share existing user data from your app, so you can view it in our dashboard.
|
||||
|
||||
Once the Formbricks widget is loaded on your web app, our SDK exposes methods for identifying user attributes. Let's set it up!
|
||||
|
||||
## Setting User ID
|
||||
|
||||
You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
|
||||
|
||||
```javascript
|
||||
formbricks.setUserId("USER_ID");
|
||||
```
|
||||
|
||||
## Setting User Email
|
||||
|
||||
You can use the setEmail function to set the user's email:
|
||||
|
||||
```javascript
|
||||
formbricks.setEmail("user@example.com");
|
||||
```
|
||||
|
||||
### Setting Custom User Attributes
|
||||
|
||||
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("attribute_key", "attribute_value");
|
||||
```
|
||||
|
||||
### Logging Out Users
|
||||
|
||||
When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
|
||||
|
||||
```javascript
|
||||
formbricks.logout();
|
||||
```
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "What are attributes and why are they useful?",
|
||||
description:
|
||||
"How to use attributes for user segmentation, enhancing survey targeting & results. Improve feedback quality and make data-driven decisions.",
|
||||
};
|
||||
|
||||
Surveying your user base without segmentation leads to weak results and survey fatigue. Attributes help you segment your users into groups.
|
||||
|
||||
## What are attributes?
|
||||
|
||||
Attributes are key-value pairs that you can set for each person individually. For example, the attribute "Plan" can be set to "Free" or "Paid".
|
||||
|
||||
## How do attributes work?
|
||||
|
||||
Attributes are sent from your application to Formbricks and are associated with the current user. We store it in our database and allow you to use it the next time you create a survey.
|
||||
|
||||
## Why are attributes useful?
|
||||
|
||||
Attributes help show surveys to the right group of people. For example, you can show a survey to all users who have a "Plan" attribute set to "Paid".
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
@@ -1,125 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
|
||||
import CreateChurnFlow from "./create-cancel-flow.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import TriggerInnerText from "./trigger-inner-text.png";
|
||||
import TriggerCSS from "./trigger-css-selector.png";
|
||||
import TriggerPageUrl from "./trigger-page-url.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import PublishSurvey from "./publish-survey.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Learn from Churn",
|
||||
description: "To know how to decrease churn, you have to understand it. Use a micro-survey.",
|
||||
};
|
||||
|
||||
Churn is hard, but can teach you a lot. Whenever a user decides that your product isn’t worth it anymore, you have a unique opportunity to get deep insights. These insights are pure gold to reduce churn.
|
||||
|
||||
## Purpose
|
||||
|
||||
The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Churn Survey" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Ask at exactly the right point in time
|
||||
- Follow-up to prevent bad reviews
|
||||
- Coming soon: Make survey mandatory
|
||||
|
||||
## Overview
|
||||
|
||||
To run the Churn Survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Churn Survey at [app.formbricks.com](http://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!
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="note">
|
||||
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)
|
||||
</Callout>
|
||||
|
||||
### 1. Create new Churn Survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Churn Survey”:
|
||||
|
||||
<Image src={CreateChurnFlow} alt="Create churn survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings._
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience
|
||||
|
||||
In this case, you don’t really need to pre-segment your audience. You likely want to ask everyone who hits the “Cancel subscription” button.
|
||||
|
||||
### 4. Set up a trigger
|
||||
|
||||
To create the trigger for your Churn Survey, you have two options to choose from:
|
||||
|
||||
1. **Trigger by innerText:** You likely have a “Cancel Subscription” button in your app. You can setup a user Action with the according `innerText` to trigger the survey, like so:
|
||||
|
||||
<Image src={TriggerInnerText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
|
||||
|
||||
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:
|
||||
|
||||
<Image src={TriggerCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
|
||||
|
||||
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:
|
||||
|
||||
<Image src={TriggerPageUrl} alt="Set the trigger by page URL" quality="100" className="rounded-lg" />
|
||||
|
||||
Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅
|
||||
|
||||
Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
|
||||
|
||||
<Callout title="Pre-churn flow coming soon" type="note">
|
||||
|
||||
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 🤷
|
||||
|
||||
</Callout>
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you milk these super valuable insights. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
These settings make sure the survey is always displayed, when a user wants to Cancel their subscription.
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="warning">
|
||||
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) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights! 🎉
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,385 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
|
||||
import DocsFeedback from "@/components/docs/DocsFeedback";
|
||||
import AddAction from "./add-action.png";
|
||||
import ChangeId from "./change-id.png";
|
||||
import DocsNavi from "./docs-navi.png";
|
||||
import DocsTemplate from "./docs-template.png";
|
||||
import SelectNonevent from "./select-nonevent.png";
|
||||
import SwitchToDev from "./switch-to-dev.png";
|
||||
import WhenToAsk from "./when-to-ask.png";
|
||||
import CopyIds from "./copy-ids.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Docs Feedback",
|
||||
description: "Docs Feedback allows you to measure how clear your documentation is.",
|
||||
};
|
||||
|
||||
Docs Feedback allows you to measure how clear your documentation is.
|
||||
|
||||
## Purpose
|
||||
|
||||
Unlike yourself, your users don't spend 5-7 days per week thinking about your product. To fight the "Curse of Knowledge" you have to measure how clear your docs are.
|
||||
|
||||
## Preview
|
||||
|
||||
<DocsFeedback />
|
||||
|
||||
## Installation
|
||||
|
||||
To get this running, you'll need a bit of time. Here are the steps we're going through:
|
||||
|
||||
1. Set up Formbricks Cloud
|
||||
2. Build the frontend
|
||||
3. Connect to API
|
||||
4. Test
|
||||
|
||||
### 1. Setting up Formbricks Cloud
|
||||
|
||||
1. To get started, create an account for the [Formbricks Cloud](https://app.formbricks.com/auth/signup).
|
||||
|
||||
2. In the Menu (top right) you see that you can switch between a “Development” and a “Production” environment. These are two separate environments so your test data doesn’t mess up the insights from prod. Switch to “Development”:
|
||||
|
||||
<Image src={SwitchToDev} alt="switch to dev environment" quality="100" className="rounded-lg" />
|
||||
|
||||
3. Then, create a survey using the template “Docs Feedback”:
|
||||
|
||||
<Image src={DocsTemplate} alt="select docs template" quality="100" className="rounded-lg" />
|
||||
|
||||
4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉
|
||||
|
||||
<Image src={ChangeId} alt="switch to dev environment" quality="100" className="rounded-lg" />
|
||||
|
||||
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”**.
|
||||
|
||||
<Callout title="Answers need to be identical" type="note">
|
||||
If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have
|
||||
to be identical to the frontend we're building in the next step.
|
||||
</Callout>
|
||||
|
||||
6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
|
||||
|
||||
<Image src={WhenToAsk} alt="set up when to ask card" quality="100" className="rounded-lg" />
|
||||
|
||||
7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:
|
||||
|
||||
<Image src={AddAction} alt="add action" quality="100" className="rounded-lg" className="rounded" />
|
||||
|
||||
8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
|
||||
|
||||
<Image src={SelectNonevent} alt="select nonevent" quality="100" className="rounded-lg" />
|
||||
|
||||
**You’re all setup in Formbricks Cloud for now 👍**
|
||||
|
||||
### 2. Build the frontend
|
||||
|
||||
<Callout title="Your frontend might work differently" type="note">
|
||||
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 😊
|
||||
</Callout>
|
||||
|
||||
Before we start, lets talk about the widget. It works like this:
|
||||
|
||||
- Once the user selects yes/no, a partial response is sent to the Formbricks API. It includes the feedback and the current page url.
|
||||
- Then the user is presented with an additional open text field to further explain their choice. Once it's submitted, the previous response is updated with the additional feedback.
|
||||
|
||||
This allows us to capture and analyze partial feedback where the user is not willing to provide additional information.
|
||||
|
||||
**Let's do this 👇**
|
||||
|
||||
1. Open the code editor where you handle your docs page.
|
||||
|
||||
2. Likely, you have a template file or similar which renders the navigation at the bottom of the page:
|
||||
|
||||
<Image src={DocsNavi} alt="doc navigation" quality="100" className="rounded-lg" className="rounded" />
|
||||
|
||||
Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
|
||||
|
||||
3. Write the frontend code for the widget. Here is the full component (we break it down right below):
|
||||
|
||||
```tsx
|
||||
import { useState } from "react";
|
||||
import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
|
||||
import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export default function DocsFeedback() {
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [sharedFeedback, setSharedFeedback] = useState(false);
|
||||
const [responseId, setResponseId] = useState(null);
|
||||
const [freeText, setFreeText] = useState("");
|
||||
|
||||
if (
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-6 inline-flex cursor-default items-center rounded-md border border-slate-200 bg-white p-4 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||||
{!sharedFeedback ? (
|
||||
<div>
|
||||
Was this page helpful?
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="ml-4 inline-flex space-x-3">
|
||||
{["Yes 👍", " No 👎"].map((option) => (
|
||||
<PopoverTrigger
|
||||
className="rounded border border-slate-200 bg-slate-50 px-4 py-2 text-slate-900 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-300"
|
||||
onClick={async () => {
|
||||
const id = await handleFeedbackSubmit(option, router.asPath);
|
||||
setResponseId(id);
|
||||
}}>
|
||||
{option}
|
||||
</PopoverTrigger>
|
||||
))}
|
||||
</div>
|
||||
<PopoverContent className="border-slate-300 bg-white dark:border-slate-500 dark:bg-slate-700">
|
||||
<form>
|
||||
<textarea
|
||||
value={freeText}
|
||||
onChange={(e) => setFreeText(e.target.value)}
|
||||
placeholder="Please explain why..."
|
||||
className="focus:border-brand-dark focus:ring-brand-dark mb-2 w-full rounded-md bg-white text-sm text-slate-900 dark:bg-slate-600 dark:text-slate-200 dark:placeholder:text-slate-200"
|
||||
/>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
updateFeedback(freeText, responseId);
|
||||
setIsOpen(false);
|
||||
setFreeText("");
|
||||
setSharedFeedback(true);
|
||||
}}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
) : (
|
||||
<div>Thanks a lot, boss! 🤝</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Let’s break it down!**
|
||||
|
||||
Setting the local states and getting the current URL:
|
||||
|
||||
```tsx
|
||||
const router = useRouter(); // to get the URL of the current docs page
|
||||
const [isOpen, setIsOpen] = useState(false); // to close Popover after
|
||||
const [sharedFeedback, setSharedFeedback] = useState(false); // to display Thank You message
|
||||
const [responseId, setResponseId] = useState(null); // to store responseID (will explain more)
|
||||
const [freeText, setFreeText] = useState(""); // to locally store the additional info provided by user
|
||||
```
|
||||
|
||||
Disabling feedback if config environment variables are not set properly:
|
||||
|
||||
```tsx
|
||||
// Disables feedback if key info like survey ID, API Host, or Formbricks environment ID are missing
|
||||
|
||||
if (
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
The actual frontend (read comments):
|
||||
|
||||
```tsx
|
||||
return (
|
||||
<div className="mt-6 inline-flex cursor-default items-center rounded-md border border-slate-200 bg-white p-4 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||||
{!sharedFeedback ? ( // displays Feedback buttons or Thank You message
|
||||
<div>
|
||||
Was this page helpful?
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="ml-4 inline-flex space-x-3">
|
||||
{["Yes 👍", " No 👎"].map((option) => ( // Popup Trigger is a button as well. This is a workaround to open the same form but send a different response to the API
|
||||
<PopoverTrigger
|
||||
className="rounded border border-slate-200 bg-slate-50 px-4 py-2 text-slate-900 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-300"
|
||||
onClick={async () => {
|
||||
const id = await handleFeedbackSubmit(option, router.asPath); // handleFeedbackSubmit sends the Yes / No choice as well as the current URL to Formbricks and returns the responseId
|
||||
setResponseId(id); // add responseId to local state so we can use it if user decides to add more feedback in free text field
|
||||
}}>
|
||||
{option} // "Yes 👍" or "No 👎" - they have to be identical with the choices in the survey on app.formbricks.com for it to work (!)
|
||||
</PopoverTrigger>
|
||||
))}
|
||||
</div>
|
||||
<PopoverContent className="border-slate-300 bg-white dark:border-slate-500 dark:bg-slate-700">
|
||||
<form> // Form to handle additional feedback by user
|
||||
<textarea
|
||||
value={freeText}
|
||||
onChange={(e) => setFreeText(e.target.value)}
|
||||
placeholder="Please explain why..."
|
||||
className="focus:border-brand-dark focus:ring-brand-dark mb-2 w-full rounded-md bg-white text-sm text-slate-900 dark:bg-slate-600 dark:text-slate-200 dark:placeholder:text-slate-200"
|
||||
/>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // prevent page from reloading (default HTML behaviour)
|
||||
updateFeedback(freeText, responseId); // update initial Yes / No response with free text feedback
|
||||
setIsOpen(false); // close Popover
|
||||
setFreeText(""); // remove feedback from free text field local state
|
||||
setSharedFeedback(true); // display Thank You message
|
||||
}}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
) : (
|
||||
<div>Thanks a lot, boss! 🤝</div> // Thank You message
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Connecting to the Formbricks API
|
||||
|
||||
The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
|
||||
|
||||
Here is the code for the `handleFeedbackSubmit` function with comments:
|
||||
|
||||
```tsx
|
||||
export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
|
||||
const response_data = {
|
||||
data: {
|
||||
isHelpful: YesNo, // the "Yes 👍" or "No 👎" response. Remember: They have to be identical with the choices in the survey on app.formbricks.com for it to work.
|
||||
pageUrl: pageUrl, // So you know which page the user gives feedback about.
|
||||
},
|
||||
};
|
||||
|
||||
const payload = {
|
||||
response: response_data,
|
||||
surveyId: process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID, // For testing, replace this with the survey ID of your survey (more info below)
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID}/responses`, // For testing, replace this with the API host and environemnt ID of your Development environment on app.formbricks.com
|
||||
};
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
if (res.ok) {
|
||||
const responseJson = await res.json();
|
||||
return responseJson.id; // Returns the response ID
|
||||
} else {
|
||||
console.error("Error submitting form");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
And this is the `updateFeedback` function with comments:
|
||||
|
||||
```tsx
|
||||
export const updateFeedback = async (freeText, responseId) => {
|
||||
if (!responseId) {
|
||||
console.error("No response ID available"); // If there is not response ID, no response can be updated.
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
response: {
|
||||
data: {
|
||||
additionalInfo: freeText,
|
||||
},
|
||||
finished: true, // Lets Formbricks calculate Completion Rate
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID}/responses/${responseId}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
console.error("Error updating response");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating response:", error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
That’s almost it! 🤸
|
||||
|
||||
## 4. Setting it up for testing
|
||||
|
||||
Before you roll it out in production, you want to test it. To do so, you need two things:
|
||||
|
||||
1. Environment ID (1) of the development environment on app.formbricks.com
|
||||
2. Survey ID (2) of your test survey
|
||||
|
||||
When you are on the survey detail page, you’ll find both of them in the URL:
|
||||
|
||||
<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg" />
|
||||
|
||||
Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
|
||||
|
||||
```tsx
|
||||
const payload = {
|
||||
response: response_data,
|
||||
surveyId: clgwfv4a7002el50ihyuss38x, // This is an example, replace with yours
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
// Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
`https:app.formbricks.com/api/v1/client/environments/clgwcwp4z000lpf0hur7uxbuv/responses`,
|
||||
};
|
||||
```
|
||||
|
||||
And lastly, in the `updateFeedback` function
|
||||
|
||||
```tsx
|
||||
try {
|
||||
const res = await fetch(
|
||||
// Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
`https:app.formbricks.com/api/v1/client/environments/clgwcwp4z000lpf0hur7uxbuv/responses/${responseId}`, // Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
}
|
||||
```
|
||||
|
||||
### You’re good to go! 🎉
|
||||
|
||||
Something doesn’t work? Check your browser console for the error.
|
||||
|
||||
Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
@@ -1,106 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionText from "./action-text.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Feature Chaser",
|
||||
description: "Follow up with users who used a specific feature. Gather feedback and improve your product.",
|
||||
};
|
||||
|
||||
Following up on specific features only makes sense with very targeted surveys. Formbricks is built for that.
|
||||
|
||||
## Purpose
|
||||
|
||||
Product analytics never tell you why a feature is used - and why not. Following up on specfic features with highly relevant questions is a great way to gather feedback and improve your product.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Feature Chaser" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Trigger survey at exactly the right point in the user journey
|
||||
- Never ask twice, keep your data clean
|
||||
- Prevent survey fatigue with global waiting period
|
||||
|
||||
## Overview
|
||||
|
||||
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/)
|
||||
2. Setup a user action to display survey at the right point in time
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="note">
|
||||
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)
|
||||
</Callout>
|
||||
|
||||
### 1. Create new Feature Chaser
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Feature Chaser”:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions
|
||||
|
||||
The questions you want to ask are dependent on your feature and can be very specific. In the template, we suggest a high-level check on how easy it was for the user to achieve their goal. We also add an opportunity to provide context:
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
Save, and move over to where the magic happens: The “Audience” tab.
|
||||
|
||||
### 3. Set up a trigger for the Feature Chaser survey:
|
||||
|
||||
Before setting the right trigger, you need to identify a user action in your app which signals, that they have just used the feature you want to understand better. In most cases, it is clicking a specific button in your product.
|
||||
|
||||
You can create [Code Actions](/docs/actions/code) and [No Code Actions](/docs/actions/no-code) to follow users through your app. In this example, we will create a No Code Action.
|
||||
|
||||
There are two ways to track a button:
|
||||
|
||||
1. **Trigger by innerText:** You might have a button with a unique text at the end of your feature e.g. "Export Report". You can setup a user Action with the according `innerText` to trigger the survey, like so:
|
||||
|
||||
<Image src={ActionText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
|
||||
|
||||
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:
|
||||
|
||||
<Image src={ActionCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
|
||||
|
||||
Please follow our [Actions manual](/docs/actions/why) for an in-depth description of how Actions work.
|
||||
|
||||
### 4. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 5. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have full freedom to decide who you want to ask. Generally, you only want to ask every user once and prevent survey fatigue. It's up to you to decide if you want to ask again, when the user did not yet reply:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="warning">
|
||||
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) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights! 🎉
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
@@ -1,105 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
|
||||
import AddAction from "./add-action.png";
|
||||
import AddCSSAction from "./add-css-action.png";
|
||||
import AddHTMLAction from "./add-html-action.png";
|
||||
import ChangeTextContent from "./change-text-content.png";
|
||||
import CreateFeedbackBox from "./create-feedback-box-by-template.png";
|
||||
import PublishSurvey from "./publish-survey.png";
|
||||
import SelectAction from "./select-feedback-button-action.png";
|
||||
import RecontactOptions from "./set-recontact-options.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Feedback Box",
|
||||
description: "The Feedback Box gives your users a direct channel to share their feedback and feel heard.",
|
||||
};
|
||||
|
||||
The Feedback Box gives your users a direct channel to share their feedback and feel heard.
|
||||
|
||||
## Purpose
|
||||
|
||||
A low friction way to gather feedback helps catching even the smallest points of frustration in user experiences. Use automations to react rapidly and make users feel heard.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Feedback Box" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Make it easy: 2 clicks to share feedback
|
||||
- Pipe insights where team can see them and react quickly
|
||||
|
||||
## Installation
|
||||
|
||||
To add the Feedback Box to your app, you need to perform these steps:
|
||||
|
||||
1. Create new Feedback Box at app.formbricks.com
|
||||
2. Add user action to trigger Feedback Box
|
||||
3. Update recontact settings to display correctly
|
||||
|
||||
### 1. Create new Feedback Box
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Then, create a new survey and look for the "Feedback Box" template:
|
||||
|
||||
<Image src={CreateFeedbackBox} alt="Create feedback box by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update question content
|
||||
|
||||
Change the questions and answer options according to your preference:
|
||||
|
||||
<Image src={ChangeTextContent} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
### 3. Create user action to trigger Feedback Box:
|
||||
|
||||
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" />
|
||||
|
||||
<Callout title="You can also add actions in your code" type="note">
|
||||
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.
|
||||
</Callout>
|
||||
|
||||
We have two options to track the Feedback Button in your application: innerText and CSS-Selector:
|
||||
|
||||
1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
|
||||
2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
|
||||
|
||||
<div className="grid grid-cols-2 space-x-2">
|
||||
<Image src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
|
||||
<Image src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 4. Select action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 5. Set Recontact Options correctly
|
||||
|
||||
Scroll down to “Recontact Options”. Here you have to choose the right settings so that the Feedback Box pops up every time the user action is performed. (Our default is that every user sees every survey only once):
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. You’re ready publish your survey!
|
||||
|
||||
<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
## Setting up the Widget
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="warning">
|
||||
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) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# That’s it! 🎉
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
@@ -1,114 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionText from "./action-innertext.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Improve Trial Conversion",
|
||||
description: "Understand how to improve the trial conversions to get more paying customers.",
|
||||
};
|
||||
|
||||
When a user doesn't convert, you want to know why. A micro-survey displayed at exactly the right time gives you a window into understanding the most relevant question: To pay or not to pay?
|
||||
|
||||
## Purpose
|
||||
|
||||
The better you understand why free users don’t convert to paid users, the higher your revenue. You can make an informed decision about what to change in your offering to make more people pay for your service.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Improve Trial Conversion" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Ask at exactly the right point in time
|
||||
- Ask to understand the problem, don’t ask for solutions
|
||||
|
||||
## Installation
|
||||
|
||||
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/)
|
||||
2. Set up the user action to display survey at right point in time
|
||||
3. Print that 💸
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="note">
|
||||
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)
|
||||
</Callout>
|
||||
|
||||
### 1. Create new Trial Conversion Survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Improve Trial Conversion”:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the questions and answer options. However, based on our experience, we suggest giving the provided template a go 😊
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Callout title="Filter by attribute coming soon" type="note">
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next days.
|
||||
</Callout>
|
||||
|
||||
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.
|
||||
|
||||
### 4. Set up a trigger for the Trial Conversion Survey:
|
||||
|
||||
How you trigger your survey depends on your product. There are two options:
|
||||
|
||||
1. **Trigger by pageURL:** Let’s say you have a page under “/trial-cancelled” where you forward users once they cancelled the trial subscription. You can then create an user Action with the type `pageURL` with the following settings:
|
||||
|
||||
<Image src={ActionPageurl} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
Whenever a user visits this page, the survey will be displayed ✅
|
||||
|
||||
2. **Trigger by Button Click:** In a different case, you have a “Cancel Trial button in your app. You can setup a user Action with the according `innerText` like so:
|
||||
|
||||
<Image src={ActionText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
Please have a look at our complete [Actions manual](/docs/actions/why) if you have questions.
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you gather as many insights as possible. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="warning">
|
||||
You need to have the Formbricks Widget installed to display the Improve Trial Conversion Survey in your app.
|
||||
Please follow [this tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# Go get 'em 🎉
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@@ -1,133 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionInner from "./action-innertext.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import AddAction from "./add-action.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreatePrompt from "./create-prompt.png";
|
||||
import InterviewExample from "./interview-example.png";
|
||||
import Publish from "./publish-survey.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "In-app Interview Prompt",
|
||||
description: "Invite only power users to schedule an interview with your product team.",
|
||||
};
|
||||
|
||||
The Interview Prompt allows you to pick a specific user segment (e.g. Power Users) and invite them to a user interview. Bye, bye spammy email invites, benefit from up to 6x more respondents.
|
||||
|
||||
## Purpose
|
||||
|
||||
Product analytics and in-app surveys are incomplete without user interviews. Set the scheduling on autopilot for a continuous stream of interviews.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Interview Prompt" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Pre-segment users with custom attributes. Only invite highly relevant users.
|
||||
- In-app prompts have a 6x higher conversion rate than email invites.
|
||||
- Set scheduling user interviews on auto pilot.
|
||||
- Soon: Integrate directly with your [Cal.com](http://Cal.com) account.
|
||||
|
||||
## Installation
|
||||
|
||||
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/)
|
||||
2. Adjust content and settings
|
||||
3. That’s it! 🎉
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="note">
|
||||
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)
|
||||
</Callout>
|
||||
|
||||
### 1. Create new Interview Prompt
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Interview Prompt”:
|
||||
|
||||
<Image src={CreatePrompt} alt="Create interview prompt by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update prompt and CTA
|
||||
|
||||
Update the prompt, description and button text to match your products tonality. You can also update the button color in the Product Settings.
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
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!
|
||||
|
||||
<Image src={InterviewExample} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Callout title="Filter by attribute coming soon" type="note">
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next few days.
|
||||
</Callout>
|
||||
|
||||
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.
|
||||
|
||||
In our case, we want to select users who we have assigned the attribute “Power User”. To learn how to assign attributes to your users, please [follow this guide](/docs/attributes/why).
|
||||
|
||||
Great, now only the “Power User” segment will see our Interview Prompt. But when will they see it?
|
||||
|
||||
### 4. Set up a trigger for the Interview Prompt:
|
||||
|
||||
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" />
|
||||
|
||||
<Callout title="You can also add actions in your code" type="note">
|
||||
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.
|
||||
</Callout>
|
||||
|
||||
Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display on a page visit since you already filter who sees the prompt by attributes.
|
||||
|
||||
1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.
|
||||
|
||||
<Image src={ActionPageurl} alt="Add page URL action" quality="100" className="rounded-lg" />
|
||||
|
||||
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="grid grid-cols-2 space-x-2">
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
<Image src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 5. Select action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Set Recontact Options correctly
|
||||
|
||||
Scroll down to “Recontact Options”. Here you have to choose the correct settings to strike the right balance between asking for user feedback and preventing survey fatigue. Your settings also depend on the size of your user base or segment. If you e.g. have thousands of “Power Users” you can easily afford to only display the prompt once. If you have a smaller user base you might want to ask twice to get a sufficient amount of bookings:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃 🤸
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Formbricks widget running?" type="note">
|
||||
You need to have the Formbricks Widget installed to display the Interview Prompt in your app. Please follow
|
||||
[this tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# Learn about them users! 🎉
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
@@ -1,116 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Product-Market Fit Survey",
|
||||
description: "The Product-Market Fit survey helps you measure, well, Product-Market Fit (PMF).",
|
||||
};
|
||||
|
||||
## Purpose
|
||||
|
||||
Measuring and understanding your PMF is essential to build a large, successful business. It helps you understand what users like, what they’re missing and what to build next. This survey is perfectly suited to measure PMF like [Superhuman](https://review.firstround.com/how-superhuman-built-an-engine-to-find-product-market-fit).
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Product Market Fit (Superhuman)" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Pre-segment users to only survey users who have experienced your products value
|
||||
- Never ask twice, keep your data clean
|
||||
- Run on autopilot: Set up once, keep surveying users continuously
|
||||
|
||||
## Overview
|
||||
|
||||
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/)
|
||||
2. Setup pre-segmentation to assure high data quality
|
||||
3. Setup the user action to display survey at good point in time
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="note">
|
||||
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)
|
||||
</Callout>
|
||||
|
||||
### 1. Create new PMF survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose one of the PMF survey templates. The first one is rather short, the latter builds on the ["Product-Market Fit Engine"](https://review.firstround.com/how-superhuman-built-an-engine-to-find-product-market-fit) developed by Superhuman:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊 Here is a very [detailed description](https://coda.io/@rahulvohra/superhuman-product-market-fit-engine) of what to do with the data you’re collecting.
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
|
||||
Save, and move over to where the magic happens: The “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Callout title="Filter by attribute coming soon" type="note">
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next days.
|
||||
</Callout>
|
||||
|
||||
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:
|
||||
|
||||
**Filter by attribute**: You can keep the logic to decide if a user has (or has not) experienced value in your application. This makes most sense if you want to use historic usage data to decide if a user qualifies or not. Create your logic and if it applies, send an attribute to Formbricks by e.g. `formbricks.setAttribute("Loyalty", "Experienced Value");` Here is the full manual on how to [set attributes](/docs/attributes/custom-attributes).
|
||||
|
||||
**Filter by actions (coming soon)**: Later, you can also segment users based on events tracked with Formbricks. However, this makes it impossible to use historic usage data (pre Formbricks usage). Here we will have a few options to achieve that:
|
||||
|
||||
- Check the time passed since sign-up (e.g. signed up 4 weeks ago)
|
||||
- User has performed a specific action a certain number of times or (e.g. created 5 reports)
|
||||
- User has performed a combination of actions (e.g. created a report **and** invited a team member)
|
||||
|
||||
This way you make sure that you separate potentially misleading opinions from valuable insights.
|
||||
|
||||
### 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:
|
||||
|
||||
<div className="grid grid-cols-2 space-x-2">
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
<Image src={ActionPageurl} alt="Add inner text action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Callout title="Formbricks Widget running?" type="warning">
|
||||
You need to have the Formbricks Widget installed to display the PMF Survey in your app. Please follow [this
|
||||
tutorial (Step 4 onwards)](/docs/getting-started/quickstart) to install the widget.
|
||||
</Callout>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights!
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@@ -1,95 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API: Create response",
|
||||
description: "Learn how to create a new response to a survey via API.",
|
||||
};
|
||||
|
||||
<APILayout
|
||||
method="POST"
|
||||
url="/api/v1/client/responses"
|
||||
description="Add a new response to a survey."
|
||||
headers={[]}
|
||||
bodies={[
|
||||
{
|
||||
label: "surveyId",
|
||||
type: "string",
|
||||
description: "The id of the survey the response belongs to.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "personId",
|
||||
type: "string",
|
||||
description: "Internal Formbricks id to identify the user sending the response (optional)",
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
label: "finished",
|
||||
type: "boolean",
|
||||
description: "Marks whether the response is complete or not.",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "data",
|
||||
type: "string",
|
||||
description: "The data of the response as JSON object (key: questionId, value: answer).",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
example={`{
|
||||
"personId": "clfqjny0v000ayzgsycx54a2c",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
|
||||
}
|
||||
}`}
|
||||
responses={[
|
||||
{
|
||||
color: "green",
|
||||
statusCode: "200",
|
||||
description: "success. Returns a response object as JSON.",
|
||||
example: `{
|
||||
"data": {
|
||||
"id": "clisyqeoi000219t52m5gopke",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"person": {
|
||||
id: "clfqjny0v000ayzgsycx54a2c",
|
||||
attributes: {
|
||||
"email": "me@johndoe.com"
|
||||
}
|
||||
},
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
|
||||
}
|
||||
}
|
||||
}`,
|
||||
},
|
||||
{
|
||||
color: "brown",
|
||||
statusCode: "400",
|
||||
description: "error. bad request",
|
||||
example: `{
|
||||
"code": "bad_request",
|
||||
"message": "surveyId was not provided.",
|
||||
"details": {
|
||||
"surveyId": "This field is required."
|
||||
}
|
||||
}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
| field name | required | default | description |
|
||||
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
|
||||
| personId | no | - | The person this response is connected to. |
|
||||
| surveyId | yes | - | The survey this response is connected to. |
|
||||
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
|
||||
export const meta = {
|
||||
title: "Client API Overview",
|
||||
description:
|
||||
"Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
|
||||
};
|
||||
|
||||
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,84 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API: Update submission",
|
||||
description: "Learn how to update a new response to a survey via API.",
|
||||
};
|
||||
|
||||
<APILayout
|
||||
method="POST"
|
||||
url="/api/v1/client/responses/[responseId]"
|
||||
description="Update an existing response in a survey."
|
||||
headers={[]}
|
||||
bodies={[
|
||||
{
|
||||
label: "data",
|
||||
type: "string",
|
||||
description: "The data of the response as JSON object (key: questionId, value: answer).",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
example={`{
|
||||
"personId: "clfqjny0v000ayzgsycx54a2c",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clggpvpvu0009n40g8ikawby8": 5,
|
||||
}
|
||||
}`}
|
||||
responses={[
|
||||
{
|
||||
color: "green",
|
||||
statusCode: "200",
|
||||
description: "success. Returns a response object as JSON.",
|
||||
example: `{
|
||||
"data": {
|
||||
"id": "clisyqeoi000219t52m5gopke",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"person": {
|
||||
id: "clfqjny0v000ayzgsycx54a2c",
|
||||
attributes: {
|
||||
"email": "me@johndoe.com"
|
||||
}
|
||||
},
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
|
||||
"clggpvpvu0009n40g8ikawby8": 5
|
||||
}
|
||||
}
|
||||
}`,
|
||||
},
|
||||
{
|
||||
color: "brown",
|
||||
statusCode: "400",
|
||||
description: "error. bad request",
|
||||
example: `{
|
||||
"code": "bad_request",
|
||||
"message": "data was not provided.",
|
||||
"details": {
|
||||
"data": "This field is required."
|
||||
}
|
||||
}`,
|
||||
},
|
||||
{
|
||||
color: "brown",
|
||||
statusCode: "404",
|
||||
description: "error. not found",
|
||||
example: `{
|
||||
"code": "not_found",
|
||||
"message": "Response not found"
|
||||
}`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
| field name | required | default | description |
|
||||
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
|
||||
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
@@ -1,67 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
|
||||
import DemoApp from "./demoapp.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Demo App",
|
||||
description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App.",
|
||||
};
|
||||
|
||||
To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).
|
||||
|
||||
<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg" />
|
||||
|
||||
## Functionality
|
||||
|
||||
### Code Action
|
||||
|
||||
This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
|
||||
|
||||
```tsx
|
||||
formbricks.track("Code Action");
|
||||
```
|
||||
|
||||
### No Code Action
|
||||
|
||||
This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
|
||||
|
||||
```tsx
|
||||
<button>No-Code Action</button>
|
||||
```
|
||||
|
||||
### Set Plan to "Free"
|
||||
|
||||
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
|
||||
|
||||
```tsx
|
||||
formbricks.setAttribute("Plan", "Free");
|
||||
```
|
||||
|
||||
### Set Plan to "Paid"
|
||||
|
||||
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
|
||||
|
||||
```tsx
|
||||
formbricks.setAttribute("Plan", "Paid");
|
||||
```
|
||||
|
||||
### Set Email
|
||||
|
||||
This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
|
||||
|
||||
```tsx
|
||||
formbricks.setEmail("test@web.com");
|
||||
```
|
||||
|
||||
### Set UserId
|
||||
|
||||
This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
|
||||
|
||||
```tsx
|
||||
formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
|
||||
```
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,40 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
export const meta = {
|
||||
title: "Contribution Guide",
|
||||
description: "How to contribute to Formbricks",
|
||||
};
|
||||
|
||||
We are so happy that you are interested in contributing to Formbricks 🤗
|
||||
|
||||
There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs.
|
||||
|
||||
## Issues
|
||||
|
||||
Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
|
||||
|
||||
... or pick up and fix an issue if you want to do a Pull Request.
|
||||
|
||||
## Feature requests
|
||||
|
||||
Raise an issue for these and tag it as an Enhancement. We love every idea. Please give us as much context on the why as possible.
|
||||
|
||||
## Creating a PR
|
||||
|
||||
Please fork the repository, make your changes and create a new pull request if you want to make an update.
|
||||
|
||||
If you want to speak to us before doing lots of work, please join our [Discord server](https://formbricks.com/discord) and tell us what you would like to work on - we're very responsive and friendly!
|
||||
|
||||
For QA of your Pull-Request, you can also get in touch with Matti on Discord. But we will also get to your PR without you taking additional action ;-)
|
||||
|
||||
## Features
|
||||
|
||||
We are currently working on having a clear [Roadmap](https://github.com/formbricks/formbricks) for the next steps ahead.
|
||||
|
||||
But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
|
||||
|
||||
If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,83 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setup Dev Environment",
|
||||
description: "Setup a development environment for Formbricks.",
|
||||
};
|
||||
|
||||
To get the project running locally on your machine you need to have the following development tools installed:
|
||||
|
||||
- Node.JS (we recommend v18)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
- [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
|
||||
|
||||
1. Clone the project:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/formbricks/formbricks
|
||||
```
|
||||
|
||||
and move into the directory
|
||||
|
||||
```bash
|
||||
cd formbricks
|
||||
```
|
||||
|
||||
1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
|
||||
|
||||
```bash
|
||||
pnpm go
|
||||
```
|
||||
|
||||
This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
|
||||
|
||||
- a `postgres` container for hosting your database,
|
||||
- a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)
|
||||
|
||||
**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.
|
||||
|
||||
For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)
|
||||
|
||||
### Build
|
||||
|
||||
To build all apps and packages and check for build errors, run the following command:
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Access Demo app
|
||||
|
||||
To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
|
||||
|
||||
```bash
|
||||
pnpm dev --filter=demo
|
||||
```
|
||||
|
||||
You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
|
||||
|
||||
### Access Formbricks website
|
||||
|
||||
If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
|
||||
|
||||
```bash
|
||||
pnpm dev --filter=formbricks-com
|
||||
```
|
||||
|
||||
You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,65 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
|
||||
import ClearAppData from "./clear-app-data.png";
|
||||
import UncaughtPromise from "./uncaught-promise.png";
|
||||
import Logout from "./logout.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Troubleshooting",
|
||||
description:
|
||||
"Formbricks is a complex application in constant development. Sometimes, things don't go as planned. Here are some tips to help you troubleshoot.",
|
||||
};
|
||||
|
||||
Here you'll find help with Frequently Recurring Problems
|
||||
|
||||
## "The app doesn't work after doing a prisma migration"
|
||||
|
||||
This can happen but fear not, the fix is easy: Delete the application storage of your browser and reload the page. This will force the app to re-fetch the data from the server:
|
||||
|
||||
<Image src={ClearAppData} alt="Demo App Preview" quality="100" className="rounded-lg" />
|
||||
|
||||
## "I ran 'pnpm i' but there seems to be an error with the packages"
|
||||
|
||||
If nothing helps, run `pnpm clean` and then `pnpm i` again. This solves a lot.
|
||||
|
||||
## "I get a full-screen error with cryptic strings"
|
||||
|
||||
This usually happens when the Formbricks Widget wasn't correctly or completely built.
|
||||
|
||||
```bash
|
||||
// Build formbricks-js first
|
||||
pnpm build --filter=js
|
||||
|
||||
// Run the app again
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## My machine struggles with the repository
|
||||
|
||||
Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
|
||||
|
||||
```bash
|
||||
// Only run the Formbricks app
|
||||
pnpm dev --filter=web...
|
||||
|
||||
// Only run the landing page app
|
||||
pnpm dev --filter=formbricks-com...
|
||||
|
||||
// Only run the demo app
|
||||
pnpm dev --filter=demo...
|
||||
```
|
||||
|
||||
However, in our experience it's better to run `pnpm dev` than having two terminals open (one with the Formbricks app and one with the demo).
|
||||
|
||||
## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON
|
||||
|
||||
<Image src={UncaughtPromise} alt="Uncaught promise" quality="100" className="rounded-lg" />
|
||||
|
||||
This happens when you're using the Demo App and delete the Person within the Formbricks app which the widget is currently connected with. We're fixing it, but you can also just logout your test person and reload the page to get rid of it.
|
||||
|
||||
<Image src={Logout} alt="Logout Person" quality="100" className="rounded-lg" />
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -1,95 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import Image from "next/image";
|
||||
|
||||
import SetupChecklist from "./env-id.png";
|
||||
import WidgetNotConnected from "./widget-not-connected.png";
|
||||
import WidgetConnected from "./widget-connected.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with Next.js App Directory",
|
||||
description:
|
||||
"Setting up Formbricks with the new Next.js 13 App Directory can be tricky. Follow this guide to make sure you get it right.",
|
||||
};
|
||||
|
||||
This guide will walk you through the process of integrating the Formbricks SDK into a Next.js application using the new app directory. As the Formbricks SDK only works on the client side, it's essential to ensure proper integration to avoid any issues.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before getting started, make sure you have:
|
||||
|
||||
1. A Next.js application set up and running.
|
||||
2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
|
||||
|
||||
<Image src={SetupChecklist} alt="Step 2 - Setup Checklist" quality="100" className="rounded-lg" />
|
||||
|
||||
## Installing Formbricks SDK
|
||||
|
||||
First, you need to install the Formbricks SDK using one of the following commands:
|
||||
|
||||
```bash
|
||||
npm install --save @formbricks/js
|
||||
# or
|
||||
yarn add @formbricks/js
|
||||
# or
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
## Integrating with Next.js 13 App Directory
|
||||
|
||||
The Next.js 13 app directory requires us to initialize Formbricks differently than the pages directory. Specifically, the app directory server-side renders components by default, and the formbricks-js library is a client-side library. To make these work together, create a `formbricks.tsx` file (or `formbricks.js` if you don't use Typescript) and set up the FormbricksProvider with the 'use client' directive:
|
||||
|
||||
```tsx
|
||||
// app/formbricks.tsx
|
||||
"use client";
|
||||
import formbricks from "@formbricks/js";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function FormbricksProvider() {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
formbricks.init({
|
||||
environmentId: "clj66eqzu00m5qu0g8leglrns",
|
||||
apiHost: "https://app.formbricks.com", // e.g. https://app.formbricks.com
|
||||
debug: true, // remove when in production
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
formbricks?.registerRouteChange();
|
||||
}, [pathname, searchParams]);
|
||||
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
Once we do this, we can then import the `formbricks.tsx` file in our `app/layout.tsx` file, and wrap our app in the Formbricks provider.
|
||||
|
||||
```tsx
|
||||
// app/layout.tsx
|
||||
import FormbricksProvider from "./formbricks";
|
||||
import "./globals.css";
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<FormbricksProvider />
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Validate your setup
|
||||
|
||||
Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
|
||||
|
||||
<Image src={WidgetNotConnected} alt="Widget isnt connected" quality="100" className="rounded-lg" />
|
||||
|
||||
To this:
|
||||
|
||||
<Image src={WidgetConnected} alt="Widget is connected" quality="100" className="rounded-lg" />
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -1,88 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import Image from "next/image";
|
||||
|
||||
import SetupChecklist from "./env-id.png";
|
||||
import WidgetNotConnected from "./widget-not-connected.png";
|
||||
import WidgetConnected from "./widget-connected.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with Next.js Pages Directory",
|
||||
description:
|
||||
"Setting up Formbricks with the new Next.js 13 Pages Directory can be tricky. Follow this guide to make sure you get it right.",
|
||||
};
|
||||
|
||||
This guide will walk you through the process of integrating the Formbricks SDK into a Next.js application using the Pages Directory. As the Formbricks SDK only works on the client side, it's essential to ensure proper integration to avoid any issues.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before getting started, make sure you have:
|
||||
|
||||
1. A Next.js application with Pages Directory set up and running.
|
||||
2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
|
||||
|
||||
<Image src={SetupChecklist} alt="Step 2 - Setup Checklist" quality="100" className="rounded-lg" />
|
||||
|
||||
## Installing Formbricks SDK
|
||||
|
||||
First, you need to install the Formbricks SDK using one of the following commands:
|
||||
|
||||
```bash
|
||||
npm install --save @formbricks/js
|
||||
# or
|
||||
yarn add @formbricks/js
|
||||
# or
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
## Integrating with Next.js 13 Pages Directory
|
||||
|
||||
Update your Pages component in the \_app.ts file like so:
|
||||
|
||||
```tsx
|
||||
import "@/styles/globals.css";
|
||||
import type { PagesProps } from "next/app";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import formbricks from "@formbricks/js";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
formbricks.init({
|
||||
environmentId: "your-environment-id",
|
||||
apiHost: "your-api-host", // e.g. https://app.formbricks.com
|
||||
debug: true, // remove when in production
|
||||
});
|
||||
}
|
||||
|
||||
export default function Pages({ Component, pageProps }: PagesProps) {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Connect next.js router to Formbricks
|
||||
const handleRouteChange = formbricks?.registerRouteChange;
|
||||
router.events.on("routeChangeComplete", handleRouteChange);
|
||||
|
||||
return () => {
|
||||
router.events.off("routeChangeComplete", handleRouteChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
```
|
||||
|
||||
## What are we doing here?
|
||||
|
||||
1. First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
|
||||
2. To connect the Next.js router to Formbricks and ensure the SDK can keep track of every page change, we are registering the route change event.
|
||||
|
||||
## Validate your setup
|
||||
|
||||
Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
|
||||
|
||||
<Image src={WidgetNotConnected} alt="Widget isnt connected" quality="100" className="rounded-lg" />
|
||||
|
||||
To this:
|
||||
|
||||
<Image src={WidgetConnected} alt="Widget is connected" quality="100" className="rounded-lg" />
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
@@ -1,95 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Quickstart",
|
||||
description:
|
||||
"Get started with Formbricks: Choose self-hosted or cloud, create an account, and follow our quickstart guide to set up in-product micro-surveys with ease.",
|
||||
};
|
||||
|
||||
Welcome to Formbricks! In this quickstart guide, we'll walk you through the initial steps to get up and running with our in-product micro-surveys. Choose between self-hosted and cloud options, create an account, and set up the JavaScript widget. Let's dive in!
|
||||
|
||||
## Step 1: Choose between self-hosted and cloud
|
||||
|
||||
First, you need to decide whether you want to use the self-hosted or cloud version of Formbricks.
|
||||
|
||||
- **Self-hosted**: If you prefer to host Formbricks on your own servers, check out the dedicated [Self-hosted Documentation](/docs/self-hosting/deployment) page.
|
||||
- **Cloud**: For a hassle-free experience, choose our cloud offering, which takes care of server maintenance and updates for you. [Sign Up now.](https://app.formbricks.com/auth/signup)
|
||||
|
||||
## Step 2: Create an account
|
||||
|
||||
1. Visit the Formbricks Sign up page.
|
||||
2. Enter your email address, choose a password, and click **Sign Up** to create your account. Alternatively you can sign up using your GitHub account.
|
||||
|
||||
## Step 3: Switch to the Development Environment
|
||||
|
||||
In Formbricks, you can work in different environments to manage your surveys and settings. We recommend using the **Development environment** for your local testing and staging environments to keep your Production environment and it's data clean. To get started, switch to the **Development Environment**:
|
||||
|
||||
1. Log in to your Formbricks dashboard.
|
||||
2. Click the your profile picture in the top right corner and in the dropdown under your current Environment select **Development**.
|
||||
3. Select **Development** from the list.
|
||||
|
||||
## Step 4: Set up the JavaScript widget
|
||||
|
||||
You can find all the setup instructions as well as a check if your installation was successful in the **Setup Checklist** in the Formbricks settings.
|
||||
|
||||
### HTML
|
||||
|
||||
Add the following script to the `<head>` tag of your HTML file:
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
!(function () {
|
||||
var t = document.createElement("script");
|
||||
(t.type = "text/javascript"),
|
||||
(t.async = !0),
|
||||
(t.src = "https://unpkg.com/@formbricks/js@^1.0.0/dist/index.umd.js");
|
||||
var e = document.getElementsByTagName("script")[0];
|
||||
e.parentNode.insertBefore(t, e),
|
||||
setTimeout(function () {
|
||||
window.formbricks = window.js;
|
||||
window.formbricks.init({
|
||||
environmentId: "your-environment-id",
|
||||
apiHost: "https://app.formbricks.com",
|
||||
});
|
||||
}, 500);
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
Replace your-environment-id with your actual environment ID. You can find your environment ID in the **Setup Checklist** in the Formbricks settings.
|
||||
|
||||
### Npm
|
||||
|
||||
1. Install the Formbricks package using npm:
|
||||
|
||||
```bash
|
||||
npm install -s @formbricks/js
|
||||
```
|
||||
|
||||
2. Import Formbricks and initialize the widget in your main component (e.g., App.tsx or App.js):
|
||||
|
||||
```javascript
|
||||
import formbricks from "@formbricks/js";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
formbricks.init({
|
||||
environmentId: "your-environment-id",
|
||||
apiHost: "https://app.formbricks.com",
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Replace your-environment-id with your actual environment ID. You can find your environment ID in the **Setup Checklist** in the Formbricks settings.
|
||||
|
||||
For more detailed guides for different frameworks, check out our [Next.js](/docs/getting-started/nextjs) and [Vue.js](/docs/getting-started/vuejs) guides.
|
||||
|
||||
## Step 5: Verify your setup
|
||||
|
||||
After setting up the widget, head back to the Formbricks dashboard:
|
||||
|
||||
1. Navigate to **Settings** in the top menubar.
|
||||
2. Check the **Setup Checklist** to ensure everything is working correctly.
|
||||
|
||||
If you see confetti and a green box saying "Receiving data" you've successfully set up Formbricks. You're ready to start creating and customizing your in-product surveys.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with Vue.js",
|
||||
description:
|
||||
"Easily integrate Formbricks SDK into your Vue.js app with our guide. Enhance user feedback and improve product experience with customizable in-product micro-surveys.",
|
||||
};
|
||||
|
||||
In this guide, we will go through the steps to set up the Formbricks SDK in a Vue.js application. This will allow you to create and customize in-product micro-surveys to gather valuable feedback from your users and improve your product experience.
|
||||
|
||||
## Introduction
|
||||
|
||||
Integrating the Formbricks SDK with Vue.js is a straightforward process. We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before proceeding, ensure you have the following:
|
||||
|
||||
1. A Vue.js application set up and ready to go.
|
||||
2. A Formbricks account with an `environmentId` and `apiHost` for your application. You can find these in the Setup Checklist in the Settings.
|
||||
|
||||
## Installation
|
||||
|
||||
To get started, install the Formbricks SDK using your preferred package manager:
|
||||
|
||||
```bash
|
||||
npm install --save @formbricks/js
|
||||
# or
|
||||
yarn add @formbricks/js
|
||||
# or
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
## Integration
|
||||
|
||||
1. Create a new file called \`formbricks.js\` inside the \`src\` folder of your Vue.js application, and add the following code to initialize the Formbricks SDK:
|
||||
|
||||
```javascript
|
||||
import formbricks from "@formbricks/js";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
formbricks.init({
|
||||
environmentId: "your-environment-id",
|
||||
apiHost: "your-api-host",
|
||||
});
|
||||
}
|
||||
|
||||
export default formbricks;
|
||||
```
|
||||
|
||||
2. In your main.js or main.ts file, import the formbricks.js module:
|
||||
|
||||
```javascript
|
||||
import formbricks from "@/formbricks";
|
||||
```
|
||||
|
||||
3. To make sure Formbricks SDK registers every page change in your Vue.js application, add a global navigation guard to your Vue Router configuration:
|
||||
|
||||
```javascript
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter({
|
||||
// Your router configuration here
|
||||
});
|
||||
|
||||
// Add a global navigation guard
|
||||
router.afterEach((to, from) => {
|
||||
if (typeof formbricks !== "undefined") {
|
||||
formbricks.registerRouteChange();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Now, the Formbricks SDK is set up and ready to use in your Vue.js application. You can start creating and customizing in-product micro-surveys for your users.
|
||||
|
||||
For more information on how to use Formbricks SDK, check the rest of the documentation.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "Formbricks – Experience Management for B2B SaaS",
|
||||
};
|
||||
|
||||
Natively embed qualitative user research into your B2B SaaS. Leverage Best Practices for user discovery to increase Product-Market Fit.
|
||||
|
||||
<HeroAnimation />
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
@@ -1,102 +0,0 @@
|
||||
import { Layout } from "@/components/docs/Layout";
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Image from "next/image";
|
||||
|
||||
import AddNewZap from "./add-new-zap.png";
|
||||
import ChooseEvent from "./choose-event.png";
|
||||
import ConnectWithFB1 from "./connect-with-formbricks-1.png";
|
||||
import ConnectWithFB2 from "./connect-with-formbricks-2.png";
|
||||
import DuplicateSurvey from "./duplicate-survey.png";
|
||||
import SelectSurvey from "./select-survey.png";
|
||||
import SlackChannelMsg from "./slack-channel-msg.png";
|
||||
import SlackMsg from "./slack-message.png";
|
||||
import SubmitTestResponse from "./submit-test-response.png";
|
||||
import SuccessConnection from "./success-connected.png";
|
||||
import TestSubmission from "./test-submission.png";
|
||||
import UpdateQuestionId from "./update-question-id.png";
|
||||
import ZapierMessage from "./zapier-message.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Zapier Setup",
|
||||
description: "Wire up Formbricks with Zapier and 5000+ other apps",
|
||||
};
|
||||
|
||||
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.
|
||||
|
||||
<Callout title="Nail down your survey first" type="note">
|
||||
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.
|
||||
</Callout>
|
||||
|
||||
## Step 1: Setup your survey incl. `questionId` for every question
|
||||
|
||||
When setting up the Zap 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.
|
||||
|
||||
<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg" />
|
||||
|
||||
_In every question card in the Advanced Settings you find the Question ID field. Update it so that you’ll recognize the response tied to this question._
|
||||
|
||||
<Callout title="Already published? Duplicate survey" type="note">
|
||||
You can only update the questionId when the survey was not yet published. Already published it? Just
|
||||
**duplicate it** to update the questionIds.
|
||||
<Image src={DuplicateSurvey} alt="Duplicate Survey" quality="100" className="rounded-lg" />
|
||||
</Callout>
|
||||
|
||||
## Step 3: Send a test response
|
||||
|
||||
In order to set up Zapier you’ll need a test response. This allows you to select the individual values of each response in your Zap. If you have Formbricks running locally and you want to set up an in-app survey, you can use our [Demo App](/docs/contributing/demo) to trigger a survey and submit a response.
|
||||
|
||||
<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg" />
|
||||
|
||||
## Step 4: Setup your Zap
|
||||
|
||||
Go to [zapier.com](https://zapier.com) and create a new Zap. Search for “Formbricks” to get started:
|
||||
|
||||
<Image src={AddNewZap} alt="Add New Zap" quality="100" className="rounded-lg" />
|
||||
|
||||
Then, choose the event you want to trigger the Zap on:
|
||||
|
||||
<Image src={ChooseEvent} alt="Choose Event" quality="100" className="rounded-lg" />
|
||||
|
||||
## Step 5: Connect Formbricks with Zapier
|
||||
|
||||
Now, you have to connect Zapier with Formbricks via an API Key:
|
||||
|
||||
<Image src={ConnectWithFB1} alt="Connect with Formbricks - 1" quality="100" className="rounded-lg" />
|
||||
<Image src={ConnectWithFB2} alt="Connect with Formbricks - 2" quality="100" className="rounded-lg" />
|
||||
|
||||
Now you need an API key. Please refer to the [API Key Setup](/docs/api/api-key-setup) page to learn how to create one.
|
||||
|
||||
Once you copied it in the newly opened Zapier window, you will be connected:
|
||||
|
||||
<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg" />
|
||||
|
||||
## Step 6: Select Survey
|
||||
|
||||
Next, you can choose from all the surveys you have created in this environment:
|
||||
|
||||
<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg" />
|
||||
|
||||
## Step 7: Test your trigger
|
||||
|
||||
Once you hit “Test” you will see the three most recent submissions for this survey. If you don’t have any submissions in the survey, submit one to continue setting up your Zap:
|
||||
|
||||
<Image src={TestSubmission} alt="Test Submission" quality="100" className="rounded-lg" />
|
||||
_Now you're happy that you updated the questionId's_
|
||||
|
||||
## Step 8: Set up your Zap
|
||||
|
||||
Now you have all the data you need at hand. The next steps depend on what you want to do with it. In this tutorial, we will send submissions to a Slack channel:
|
||||
|
||||
<Image src={SlackChannelMsg} alt="Slack Channel Message" quality="100" className="rounded-lg" />
|
||||
|
||||
In the action itself we can determine the data and layout of the message. Here, we only choose the submission data. You can also refer to the meta data of the submission and the [attributes](/docs/attributes/why) of the person who submitted the survey.
|
||||
|
||||
<Image src={SlackMsg} alt="Slack Message" quality="100" className="rounded-lg" />
|
||||
|
||||
We now receive a notifcation in our Slack channel whenever a Churn survey is completed:
|
||||
|
||||
<Image src={ZapierMessage} alt="Zapier Message" quality="100" className="rounded-lg" />
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user