mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 02:10:12 -06:00
168 lines
4.4 KiB
Plaintext
168 lines
4.4 KiB
Plaintext
import { MdxImage } from "@/components/MdxImage";
|
||
import I1 from "./images/1-set-up-website-micro-survey-popup.webp";
|
||
|
||
export const metadata = {
|
||
title: "Formbricks Website Survey SDK",
|
||
description:
|
||
"An overview of all available methods & how to integrate Formbricks Website Surveys for frontend developers in public-facing web applications. Learn the key methods, configuration settings, and best practices.",
|
||
};
|
||
|
||
#### Developer Docs
|
||
|
||
# SDK: Website Survey
|
||
|
||
### Overview
|
||
|
||
The Formbricks JS SDK is a 2-in-1 SDK for seamlessly integrating both App Surveys and Website Surveys into your projects. In this section, we'll explore how to leverage the SDK specifically for website surveys.
|
||
|
||
### Install
|
||
|
||
<Col>
|
||
<CodeGroup title="npm">
|
||
|
||
```js {{ title: 'npm' }}
|
||
npm install @formbricks/js
|
||
```
|
||
|
||
```js {{ title: 'yarn' }}
|
||
yarn add @formbricks/js
|
||
```
|
||
|
||
```js {{ title: 'pnpm' }}
|
||
pnpm add @formbricks/js
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
## Methods
|
||
|
||
### Initialize Formbricks
|
||
|
||
Initialize the Formbricks JS Client specifically for website surveys, ideal for public-facing websites:
|
||
|
||
<Note>you cannot set any other attribute other than language (optional) in website surveys.</Note>
|
||
|
||
<Col>
|
||
<CodeGroup title="Initialize Formbricks">
|
||
|
||
```javascript
|
||
import formbricks from "@formbricks/js/website";
|
||
|
||
formbricks.init({
|
||
environmentId: "<your-environment-id>", // required
|
||
apiHost: "<your-api-host>", // required
|
||
attributes: {
|
||
// optional
|
||
language: "de", // optional
|
||
},
|
||
});
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
The moment you initialise Formbricks, your users will start seeing surveys that get triggered on simpler actions such as on New Session, Page Exit, & other custom actions!
|
||
|
||
<Note>
|
||
Formbricks JS is a client SDK meant to be run client-side in their browser so make sure the window object is accessible. Below is an example of how you can set it!
|
||
|
||
<Col>
|
||
<CodeGroup>
|
||
|
||
```js
|
||
if (window !== undefined) {
|
||
formbricks.init({
|
||
environmentId: "<your-environment-id>",
|
||
apiHost: "<your-api-host>",
|
||
});
|
||
} else {
|
||
console.error("Window object not accessible to init Formbricks");
|
||
}
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
</Note>
|
||
|
||
### Track Action
|
||
|
||
Track session actions to trigger surveys based on their interactions on your website, such as button clicks or scrolling:
|
||
|
||
<Col>
|
||
<CodeGroup>
|
||
|
||
```js
|
||
formbricks.track("Clicked on Claim");
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
### Reset
|
||
|
||
Reset the current instance and fetch the latest surveys and state again:
|
||
|
||
<Col>
|
||
<CodeGroup>
|
||
|
||
```js
|
||
formbricks.reset();
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
### Register Route Change:
|
||
|
||
Listen for page changes and dynamically show surveys configured via no-code actions in the Formbricks website:
|
||
|
||
<Note>
|
||
This is only needed when your framework has a custom routing system and you want to trigger surveys on route
|
||
changes. For example: NextJs
|
||
</Note>
|
||
|
||
<Col>
|
||
<CodeGroup>
|
||
|
||
```js
|
||
formbricks.registerRouteChange();
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
## Debug Mode
|
||
|
||
To enable debug mode in Formbricks, add `?formbricksDebug=true` to your app’s URL.
|
||
|
||
For example, if you’ve integrated Formbricks JS to your app hosted at `https://example.com`, then change the URL to `https://example.com?formbricksDebug=true` and refresh the page, now view the console logs to see the debug mode live in action.
|
||
|
||
This activates detailed debug messages in the browser console, providing deeper insights into Formbricks' operation and potential issues.
|
||
|
||
---
|
||
|
||
## Troubleshooting
|
||
|
||
In case you don’t see your survey right away, here's what you can do. Go through these to find the error fast:
|
||
|
||
### Formbricks Cloud and your website are not connected properly.
|
||
|
||
Go back to [app.formbricks.com](http://app.formbricks.com) or your self-hosted instance's URL and go to the Website connection in the Configuration. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
|
||
|
||
<MdxImage
|
||
src={I1}
|
||
alt="setup checklist ui of survey popup for website surveys"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
**How to fix it:**
|
||
|
||
1. Check if your website loads the Formbricks widget correctly.
|
||
2. Make sure you have `debug` mode enabled in your integration and you should see the Formbricks debug logs in your browser console while being in your app (right click in the browser, `Inspect`, switch to the console tab). If you don’t see them, double check your integration.
|
||
|
||
---
|
||
|
||
If you have any questions or need help, feel free to reach out to us on our **[Discord](https://formbricks.com/discord)**
|