mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 10:19:51 -06:00
Merge branch 'feature/new-docs' of github.com:formbricks/formbricks into feature/new-docs
This commit is contained in:
Matthias Nannt
@@ -3,6 +3,7 @@ import Image from "next/image";
|
||||
import SetupChecklist from "./env-id.webp";
|
||||
import WidgetNotConnected from "./widget-not-connected.webp";
|
||||
import WidgetConnected from "./widget-connected.webp";
|
||||
import ReactApp from "./react-in-app-survey-app-popup-form.webp";
|
||||
|
||||
export const metadata = {
|
||||
title: "Framework Overview",
|
||||
@@ -51,10 +52,12 @@ Before getting started, make sure you have:
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
<CodeGroup title="HTML">
|
||||
```html {{ title: 'HTML' }}
|
||||
```html {{ title: '<your-main-file>.html' }}
|
||||
<script type="text/javascript">
|
||||
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="./dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("<environment-id>","<api-host>")},500)}();
|
||||
</script>
|
||||
@@ -67,6 +70,9 @@ Before getting started, make sure you have:
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.<br/>
|
||||
Now, update your App.js/ts file to initialise Formbricks.
|
||||
|
||||
### Required Customizations to be Made
|
||||
|
||||
@@ -83,17 +89,34 @@ Before getting started, make sure you have:
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
For detailed setup, please visit our [VueJs Setup Guide](/docs/getting-started/vuejs) page.
|
||||
### What are we doing here?
|
||||
|
||||
The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content.
|
||||
|
||||
<Image
|
||||
src={ReactApp}
|
||||
alt="In app survey in React app for micro surveys"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-lg"
|
||||
/>
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
<CodeGroup title="Install Formbricks JS library">
|
||||
```shell {{ title: 'JS lib from npm' }}
|
||||
npm install @formbricks/js
|
||||
<CodeGroup title="Install Formbricks">
|
||||
```sh {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
```sh {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
```sh {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
</CodeGroup>
|
||||
<CodeGroup title="Initialise Formbricks in your App">
|
||||
```js {{ title: 'ReactJs' }}
|
||||
```js {{ title: 'app.js' }}
|
||||
// other imports
|
||||
import formbricks from "@formbricks/js";
|
||||
|
||||
@@ -121,8 +144,15 @@ Before getting started, make sure you have:
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This is a quick setup for the App directory structure of Nextjs, if you have the Pages directory,
|
||||
refer to this [NextJs Pages Directory Setup Guide](/docs/getting-started/nextjs-pages).
|
||||
NextJs projects typically follow two main conventions: the App Directory and the Pages Directory.
|
||||
To ensure smooth integration with the Formbricks SDK, which operates solely on the client side, follow the
|
||||
guidelines for each convention below:
|
||||
|
||||
- App directory: You will have to define a new component in `app/formbricks.tsx` file and call it in your `app/layout.tsx` file.
|
||||
- Pages directory: You will have to visit your `_app.tsx` and just initialise Formbricks there.
|
||||
|
||||
Code snippets for the integration for both conventions are provided to further assist you.
|
||||
|
||||
|
||||
### Required Customizations to be Made
|
||||
|
||||
@@ -147,7 +177,12 @@ Before getting started, make sure you have:
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
For detailed setup, please visit our [NextJs App Directory Setup Guide](/docs/getting-started/nextjs-app).
|
||||
### What are we doing here?
|
||||
|
||||
First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
|
||||
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.
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
@@ -163,7 +198,7 @@ Before getting started, make sure you have:
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
<CodeGroup title="Initialise Formbricks">
|
||||
<CodeGroup title="NextJs Structure: App Directory">
|
||||
```tsx {{ title: 'app/formbricks.tsx' }}
|
||||
"use client";
|
||||
import formbricks from "@formbricks/js";
|
||||
@@ -206,6 +241,40 @@ Before getting started, make sure you have:
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
<CodeGroup title="NextJs Structure: Pages Directory">
|
||||
```tsx {{ title: '_app.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} />;
|
||||
}
|
||||
```
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -214,6 +283,9 @@ Before getting started, make sure you have:
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
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.
|
||||
|
||||
### Required Customizations to be Made
|
||||
|
||||
<Properties>
|
||||
@@ -237,7 +309,7 @@ Before getting started, make sure you have:
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
For detailed setup, please visit our [NextJs App Directory Setup Guide](/docs/getting-started/nextjs-app).
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
@@ -312,3 +384,6 @@ To this:
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,125 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import SetupChecklist from "./env-id.webp";
|
||||
import WidgetNotConnected from "./widget-not-connected.webp";
|
||||
import WidgetConnected from "./widget-connected.webp";
|
||||
|
||||
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.",
|
||||
};
|
||||
|
||||
[Getting Started](#)
|
||||
|
||||
# Setting up Formbricks SDK with Next.js App Directory
|
||||
|
||||
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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 1. Installing Formbricks SDK
|
||||
|
||||
First, you need to install the Formbricks SDK using one of the following commands:
|
||||
|
||||
<CodeGroup title="Install Formbricks">
|
||||
|
||||
```sh {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 2. 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:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: app/formbricks.tsx">
|
||||
|
||||
```tsx {{ title: '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;
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
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.
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: app/layout.tsx">
|
||||
|
||||
```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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 3. 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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
To this:
|
||||
|
||||
<Image
|
||||
src={WidgetConnected}
|
||||
alt="Widget is connected"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,116 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import SetupChecklist from "./env-id.webp";
|
||||
import WidgetNotConnected from "./widget-not-connected.webp";
|
||||
import WidgetConnected from "./widget-connected.webp";
|
||||
|
||||
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.",
|
||||
};
|
||||
|
||||
[Getting Started](#)
|
||||
|
||||
# Setting up Formbricks SDK with Next.js Pages Directory
|
||||
|
||||
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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 1. Installing Formbricks SDK
|
||||
|
||||
First, you need to install the Formbricks SDK using one of the following commands:
|
||||
|
||||
<CodeGroup title="Install Formbricks">
|
||||
|
||||
```sh {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 2. Integrating with Next.js 13 Pages Directory
|
||||
|
||||
Update your Pages component in the \_app.ts file like so:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: _app.ts">
|
||||
|
||||
```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} />;
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 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.
|
||||
|
||||
## 3. 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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
To this:
|
||||
|
||||
<Image
|
||||
src={WidgetConnected}
|
||||
alt="Widget is connected"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -11,7 +11,7 @@ import I8 from "./8-pop-up-form-in-web-app-survey.webp";
|
||||
import I9 from "./9-set-up-in-app-micro-survey-popup.webp";
|
||||
import I10 from "./10-micro-survey-pop-up-in-app.webp";
|
||||
import I11 from "./11-survey-logs-in-app-survey-popup.webp";
|
||||
import ReactApp from "../react/1-in-app-survey-react-app-popup-form.webp";
|
||||
import ReactApp from "../framework-guides/react-in-app-survey-app-popup-form.webp";
|
||||
|
||||
export const meta = {
|
||||
title: "Collect in app survey responses in 10 minutes",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,120 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import ReactApp from "./1-in-app-survey-react-app-popup-form.webp";
|
||||
import SetupChecklist from "./env-id.webp";
|
||||
import WidgetNotConnected from "./widget-not-connected.webp";
|
||||
import WidgetConnected from "./widget-connected.webp";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with React",
|
||||
description: "Setting up Formbricks with plain React",
|
||||
};
|
||||
|
||||
[Getting Started](#)
|
||||
|
||||
# Setting up Formbricks SDK with React.js
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before getting started, make sure you have:
|
||||
|
||||
1. A React application created with 'create-react-app'.
|
||||
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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 1. Installing Formbricks SDK
|
||||
|
||||
First, you need to install the Formbricks SDK using one of the following commands:
|
||||
|
||||
<CodeGroup title="Install Formbricks">
|
||||
|
||||
```sh {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 2. Integrating with React
|
||||
|
||||
Update your App.js file like so:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: App.js">
|
||||
|
||||
```tsx
|
||||
import formbricks from "@formbricks/js";
|
||||
import "./App.css";
|
||||
import logo from "./logo.svg";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
formbricks.init({
|
||||
environmentId: "cllc820rs01-REPLACE-ME", // replace with your env ID!
|
||||
apiHost: "https://app.formbricks.com", // update if you're self-hosting
|
||||
debug: true, // remove when in production
|
||||
});
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## What are we doing here?
|
||||
|
||||
The app initializes 'formbricks' when it's loaded in a browser environment (due to the typeof window !== "undefined" check) and then renders your components or content.
|
||||
|
||||
<Image
|
||||
src={ReactApp}
|
||||
alt="In app survey in React app for micro surveys"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 3. 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 max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
To this:
|
||||
|
||||
<Image
|
||||
src={WidgetConnected}
|
||||
alt="Widget is connected"
|
||||
quality="100"
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
@@ -1,101 +0,0 @@
|
||||
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.",
|
||||
};
|
||||
|
||||
[Getting Started](#)
|
||||
|
||||
# Setting up Formbricks SDK with Vue.js
|
||||
|
||||
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.
|
||||
|
||||
## 1. Installation
|
||||
|
||||
To get started, install the Formbricks SDK using your preferred package manager:
|
||||
|
||||
<CodeGroup title="Install Formbricks">
|
||||
|
||||
```sh {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
|
||||
```sh {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## 2. Integration with Vue.js
|
||||
|
||||
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:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: src/formbricks.js">
|
||||
|
||||
```js
|
||||
import formbricks from "@formbricks/js";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
formbricks.init({
|
||||
environmentId: "your-environment-id",
|
||||
apiHost: "your-api-host",
|
||||
});
|
||||
}
|
||||
|
||||
export default formbricks;
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
2. In your main.js or main.ts file, import the formbricks.js module:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks: main.js/ts">
|
||||
|
||||
```javascript
|
||||
import formbricks from "@/formbricks";
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
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:
|
||||
|
||||
<CodeGroup title="Integrating Formbricks">
|
||||
|
||||
```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();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
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.
|
||||
@@ -10,25 +10,25 @@ export const meta = {
|
||||
|
||||
Formbricks is a powerful platform designed to help you create and manage in-product micro-surveys for SaaS and digital products. Here is an overview:
|
||||
|
||||
## Four components
|
||||
### Four components
|
||||
|
||||
1. **Form Builder**: Create and customize your surveys with a user-friendly, no-code interface.
|
||||
2. **Targeting & Triggers**: Define specific user segments and set event-based triggers to display your surveys to the right users at the right time.
|
||||
3. **Integration**: Seamlessly integrate Formbricks into your web or mobile application using the provided SDKs or the HTML snippet.
|
||||
4. **Analytics & Insights**: Analyze user responses and gain actionable insights to make informed product decisions.
|
||||
|
||||
### Form Builder
|
||||
## Form Builder
|
||||
|
||||
The Form Builder is where you create and customize your micro-surveys. With its intuitive drag-and-drop interface, you can easily add different question types, set response options, and apply your branding to the survey forms. The Form Builder allows you to preview your survey in real-time, ensuring it looks and feels perfect for your users.
|
||||
|
||||
### Targeting & Triggers
|
||||
## Targeting & Triggers
|
||||
|
||||
Formbricks offers fine-grained user targeting and event-based triggers to help you display your surveys to the most relevant audience. Using the platform, you can define user segments based on attributes and behaviors, and set up triggers to show your surveys at specific moments within your product. This ensures that you're capturing the most accurate and valuable feedback possible.
|
||||
|
||||
### Integration
|
||||
## Integration
|
||||
|
||||
Integrating Formbricks into your web or mobile application is a breeze. With SDKs for popular web frameworks like React, and an HTML snippet for non-framework based websites, you can quickly add Formbricks to your project. The provided code snippets make it easy to initialize the Formbricks widget and configure it to communicate with your backend.
|
||||
|
||||
### Analytics & Insights
|
||||
## Analytics & Insights
|
||||
|
||||
Formbricks provides powerful analytics and insights to help you understand user responses and make data-driven decisions. The platform aggregates survey results and presents them in an easy-to-understand format, enabling you to identify trends, spot issues, and uncover opportunities for improvement. With Formbricks, you're always one step ahead in understanding your users and optimizing your product experience.
|
||||
|
||||
@@ -153,7 +153,7 @@ function CodeGroupHeader({
|
||||
children: React.ReactNode;
|
||||
selectedIndex: number;
|
||||
}) {
|
||||
let hasTabs = Children.count(children) > 1;
|
||||
let hasTabs = Children.count(children) >= 1;
|
||||
|
||||
if (!title && !hasTabs) {
|
||||
return null;
|
||||
@@ -182,7 +182,7 @@ function CodeGroupHeader({
|
||||
}
|
||||
|
||||
function CodeGroupPanels({ children, ...props }: React.ComponentPropsWithoutRef<typeof CodePanel>) {
|
||||
let hasTabs = Children.count(children) > 1;
|
||||
let hasTabs = Children.count(children) >= 1;
|
||||
|
||||
if (hasTabs) {
|
||||
return (
|
||||
@@ -278,7 +278,7 @@ export function CodeGroup({
|
||||
let languages =
|
||||
Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? [];
|
||||
let tabGroupProps = useTabGroupProps(languages);
|
||||
let hasTabs = Children.count(children) > 1;
|
||||
let hasTabs = Children.count(children) >= 1;
|
||||
|
||||
let containerClassName =
|
||||
"not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
|
||||
|
||||
@@ -193,10 +193,6 @@ export const navigation: Array<NavGroup> = [
|
||||
links: [
|
||||
{ title: "Quickstart: In app", href: "/docs/getting-started/quickstart-in-app-survey" },
|
||||
{ title: "Framework Guides", href: "/docs/getting-started/framework-guides" },
|
||||
{ title: "Next.js App Dir", href: "/docs/getting-started/nextjs-app" },
|
||||
{ title: "Next.js Pages Dir", href: "/docs/getting-started/nextjs-pages" },
|
||||
{ title: "React.js", href: "/docs/getting-started/react" },
|
||||
{ title: "Setup with Vue.js", href: "/docs/getting-started/vuejs" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user