mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-05 02:58:36 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

updated feedback box docs, pmf page, typos in blog

Browse Source
This commit is contained in:
knugget
2023-02-13 11:13:02 +01:00
parent 113a573573
commit db55f29231
7 changed files with 82 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/formbricks-com/components/shared/BreakerCTA.tsx
View File

@@ -19,7 +19,7 @@ export default function BreakerCTA({ inverted = false, teaser, headline, subhead
inverted
? "from-slate-800 via-slate-800 to-slate-700 dark:from-slate-200 dark:to-slate-300"
: "from-slate-200 to-slate-300 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700",
"xs:mx-auto xs:w-full mx-4 mb-12 max-w-5xl rounded-xl bg-gradient-to-br md:mb-0 "
"xs:mx-auto xs:w-full mx-4 my-4 max-w-6xl rounded-xl bg-gradient-to-br md:mb-0 "
)}>
<div className="relative px-4 py-8 sm:px-6 sm:pt-8 sm:pb-12 lg:px-8 lg:pt-12">
<div className="xs:block xs:absolute xs:right-10 hidden md:top-1/2 md:-translate-y-1/2">

BIN
apps/formbricks-com/images/docs/create-feedback-box.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
apps/formbricks-com/images/docs/fb-id.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

22
apps/formbricks-com/pages/blog/weekly-update-100223/index.mdx
View File

@@ -14,26 +14,26 @@ import DemoDashboard from "./demo-dashboard.png";
export const meta = {
title: "Weekly Summary - 10th Feb 2023",
description:
"We converted one more customer and continued to productize Formbricks. Check out our new demo dashboard 🕺",
"We converted another customer and continued to productize the Product-Market Fit survey. Check out our new demo dashboard 🕺",
date: "2023-02-10",
};
_We converted one more customer and continued to productize Formbricks. Check out our new demo dashboard 🕺_
_We converted another customer and continued to productize the Product-Market Fit survey. Check out our new demo dashboard 🕺_
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
## TLDR:
- We got a new paying customer 🎉
- We acquired a new paying customer 🎉
- New Onboarding Survey embedded in Formbricks
- New integration survey to learn what to build next
- New inline survey to learn what integration to build first
- Try before you buy with our new demo dashboard
- New docs are online 📗
## New Onboarding Survey embedded in Formbricks
We are staying true to our approach to using Formbricks and our best practices in Formbricks itself to learn more about our users and how to build the best possible product for them.
This week, we embedded an onboarding survey that gives us insights about every user who signs up for Formbricks and notifies us in our team's Slack workspace.
We are staying true to our approach to using Formbricks to learn more about our users.
This week, we embedded an Onboarding Survey that gives us insights about every user who signs up to Formbricks and surfaces these insights us in our team's Slack workspace.
<Image src={OnboadingSurvey} alt="New Formbricks Onboarding Survey" className="rounded-lg" />
@@ -43,10 +43,10 @@ This week, we embedded an onboarding survey that gives us insights about every u
className="rounded-lg"
/>
## New integration survey to learn what to build next
## New inline survey to learn what integration to build first
The next big step for Formbricks is to make it fit perfectly into your existing technology and analytics stack. So you can integrate Corhorts and analytics data from Posthog, enrich it with results from targeted micro-surveys you run with Formbricks, and sync your customers with Hubspot to optimize your sales process.
To learn what tools our customers are using and what integrations we need to build first, we are building an inline survey in the integrations tab in Formbricks. The results are neatly summarized by Formbricks and also sent to our team's Slack workspace.
One of the next big steps for Formbricks is to make it fit perfectly into existing tech and analytics stack. It should be possible to import user corhorts and other analytics data from tools like Posthog, enrich it with results from targeted micro-surveys you run with Formbricks, and sync your user profile with Hubspot to optimize your sales process.
To learn what tools our customers are using and what integrations we need to build first, we built an inline survey in the integrations tab. The results are neatly summarized by Formbricks and also sent to our team's Slack workspace.
<Image src={IntegrationSurvey} alt="New Formbricks Integration Survey" className="rounded-lg" />
@@ -58,11 +58,11 @@ We want to show our users the power of Formbricks before they start a survey on
## New docs are online
We have rewritten our docs to help our users embed Formbricks into their apps step by step. Formbricks supports all major frontends with it's simple javascript widgets, but also lets you customize it the way you want. Check out our new documentation at [https://formbricks.com/docs](https://formbricks.com/docs)
We have rewritten our docs to help users embed Formbricks into their apps. Formbricks supports all major frontends with it's plain javascript widgets, but also supports customization. Check out our new documentation at [https://formbricks.com/docs](https://formbricks.com/docs)
## What's next?
In the last two weeks we have come a long way in finishing Formbricks and we are ready to onboard more users. Next week we will be onboarding most of our current waitlist subscribers to the Product Market Fit survey. It has been a long journey to get here and we are very excited to show the world what they can do with the new Formbricks.
In the last two weeks we have come a long way in polishing Formbricks and we are ready to onboard more users. Next week we will be onboarding most of our current waitlist subscribers to the Product Market Fit survey - we are super excited to gather more feedback on the current product.
## Enjoy your weekends! 🍰

65
apps/formbricks-com/pages/docs/best-practices/feedback-box/index.mdx
View File

@@ -1,6 +1,10 @@
import { Layout } from "@/components/docs/Layout";
import { Fence } from "@/components/shared/Fence";
import Link from "next/link";
import NewFB from "@/images/docs/create-feedback-box.png";
import FBID from "@/images/docs/fb-id.png";
import ResponsiveEmbed from "react-responsive-embed";
import Image from "next/image";
export const meta = {
title: "Feedback Box",
@@ -14,7 +18,7 @@ Allow users to share feedback with 2 clicks. A low friction way to gather feedba
## Formbricks Approach
- Make it **easy**: 2 clicks
- Make it **easy**: 2 clicks to share feedback
- Keep it **personal**: Founder faces
- **Pre-sort** feedback:
- Bug → Pipe into Bug channel for devs
@@ -23,33 +27,60 @@ Allow users to share feedback with 2 clicks. A low friction way to gather feedba
## Preview
<div className="max-w-md">
<ResponsiveEmbed
src="/docs/wrappers/slide-out/demo"
allowFullScreen
className="rounded-lg border-2 border-gray-200"
ratio="8:10"
/>
</div>
## Installation
To add the Feedback Box to your app, you need to perform three steps:
To add the Feedback Box to your app, you need to perform these steps:
1. Install
2. Configure
3. Embed
1. Create new Feedback Box at app.formbricks.com
2. Embed JS snippet in `<head>`
3. Configure
4. Render in-app
### 1. Install
### 1. Create new Feedback Box
There are two ways to install the Feedback Box: npm and JavaScript embed.
Create an account at [app.formbricks.com](https://app.formbricks.com/auth/signup)
**NPM Install**
Then, create a new Feedback Box:
```tsx
npm install @formbricks/feedback
```
<Image src={NewFB} alt="new feedback box" quality="100" />
**JavaScript Embed**
Go to the "Setup instructions" tab and locate your Feedback Box ID. You'll need it in a minute:
You can also embed the Feedback Box in your HTML `<head>` tag:
<Image src={FBID} alt="copy feedback box id" quality="100" />
### 2. Embed Formbricks snippet in `<head>`
Embed the following Feedback Box script in your HTML `<head>` tag.
```tsx
<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2" defer></script>
<script>
window.formbricks = {
...window.formbricks,
config: {
hqUrl: "https://app.formbricks.com",
formId: "YOUR FEEDBACK BOX ID HERE", // copy from Formbricks dashboard
contact: {
name: "Matti",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
},
},
}
</script>
```
### 2. Setting up the config
### 3. Configure Feedback Box
You can change the content behaviour of the Feedback Box with the config object.
@@ -79,9 +110,9 @@ window.formbricks = {
config: {
// ...
contact: {
name: "Johannes",
name: "Matti",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
},
},
};
@@ -171,7 +202,7 @@ window.formbricks = {
};
```
### 3. Embed
### 4. Render survey in your app
To add the Feedback Box to your UI, you can use different wrappers. Please follow the instructions linked below:

12
apps/formbricks-com/pages/docs/best-practices/pmf-survey/index.mdx
View File

@@ -57,13 +57,15 @@ Then, create a new Product-Market Fit Survey:
<Image src={NewPMF} alt="create pmf survey" quality="100" />
Go to the "Setup instructions" tab and copy the ID:
Go to the "Setup instructions" tab and locate your survey ID. You'll need it in a minute:
<Image src={ID} alt="copy survey id" quality="100" />
### 2. Embed Formbricks snippet in `<head>`
Embed the Product-Market Fit Survey script in your HTML `<head>` tag and replace survey ID:
Embed the following Product-Market Fit Survey script in your HTML `<head>` tag.
Replace the `formId` with survey Id from the Formbricks dashboard:
```tsx
<script src="https://cdn.jsdelivr.net/npm/@formbricks/pmf@0.0.9" defer></script>
@@ -80,13 +82,13 @@ Embed the Product-Market Fit Survey script in your HTML `<head>` tag and replace
</script>
```
All you have to do now is assigning the `containerId` to the div where you want to render your survey (detailed instructions at the bottom):
All you have to do now is assigning the `containerId` to the div where you want to render your survey (detailed instructions linked at the bottom):
```html
<div id="formbricks-pmf"></div>
```
### 4. Configure
### 3. Configure survey
**Sending user metadata with submission**
@@ -168,7 +170,7 @@ window.formbricksPmf = {
};
```
### 3. Embed
### 4. Render survey in your app
To add the Product-Market Fit Survey to your UI, you can use different wrappers. Please follow the instructions linked below:

25
apps/formbricks-com/pages/pmf.tsx
View File

@@ -50,16 +50,21 @@ export default function GetStartedPage() {
</Button>
</div>
</div>
{/* Video */}
<BreakerCTA
teaser="No sign up required"
headline="Experience what you're missing"
subheadline="Play around with out Demo - no sign up needed."
cta="Try Demo"
href="https://app.formbricks.com/demo"
inverted
/>
<div className="px-32 pb-4">
<div className="relative pb-[56.25%]">
<iframe
className="absolute top-0 left-0 h-full w-full border-0"
src="https://www.tella.tv/video/cle2kq9yi00ej0fjse13havy2/embed"></iframe>
</div>
<BreakerCTA
teaser="No sign up required"
headline="Experience what you're missing"
subheadline="Play around with the demo - no sign up needed."
cta="Try Demo"
href="https://app.formbricks.com/demo"
inverted
/>{" "}
</div>
{/* Steps */}
<div id="howitworks" className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">