mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-25 10:30:30 -06:00
fix formatting issues
This commit is contained in:
@@ -17,6 +17,8 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
|
||||
|
||||
<Libraries />
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before getting started, make sure you have:
|
||||
@@ -31,12 +33,38 @@ Before getting started, make sure you have:
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## Formbricks x 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 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"
|
||||
/>
|
||||
|
||||
**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
|
||||
|
||||
---
|
||||
|
||||
## HTML
|
||||
|
||||
All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
|
||||
|
||||
<CodeGroup title="HTML">
|
||||
```html {{ title: '<your-main-file>.html' }}
|
||||
```html {{ title: 'index.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>
|
||||
@@ -58,17 +86,25 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
## Formbricks x ReactJS
|
||||
---
|
||||
|
||||
## ReactJS
|
||||
|
||||
Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
|
||||
|
||||
<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="Install Formbricks JS library">
|
||||
```shell {{ title: 'npm' }}
|
||||
npm install --save @formbricks/js
|
||||
```
|
||||
```shell {{ title: 'pnpm' }}
|
||||
pnpm add @formbricks/js
|
||||
```
|
||||
```shell {{ title: 'yarn' }}
|
||||
yarn add @formbricks/js
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
Now, update your App.js/ts file to initialise Formbricks.
|
||||
|
||||
<CodeGroup title="app.js">
|
||||
@@ -120,7 +156,9 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
## Formbricks x NextJS
|
||||
---
|
||||
|
||||
## NextJS
|
||||
|
||||
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
|
||||
@@ -257,7 +295,9 @@ To connect the Next.js router to Formbricks and ensure the SDK can keep track of
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
## Formbricks x VueJs
|
||||
---
|
||||
|
||||
## VueJs
|
||||
|
||||
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.
|
||||
@@ -335,25 +375,3 @@ router.afterEach((to, from) => {
|
||||
</Properties>
|
||||
|
||||
Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
|
||||
|
||||
## 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"
|
||||
/>
|
||||
|
||||
**Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
|
||||
|
||||
@@ -24,7 +24,7 @@ export const meta = {
|
||||
|
||||
In app surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an in app survey in your web app in 10 to 15 minutes. Let’s go!
|
||||
|
||||
## 1. Create a free Formbricks Cloud account
|
||||
## Create a free Formbricks Cloud account
|
||||
|
||||
While you can [self-host](/docs/self-hosting/deployment) Formbricks, the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and click through the onboarding, until you’re here:
|
||||
|
||||
@@ -35,7 +35,7 @@ While you can [self-host](/docs/self-hosting/deployment) Formbricks, the quickes
|
||||
className="max-w-full sm:max-w-3xl rounded-lg "
|
||||
/>
|
||||
|
||||
## 2. Create your first survey
|
||||
## Create your first survey
|
||||
|
||||
To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
|
||||
|
||||
@@ -84,7 +84,7 @@ Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 3. Set up the Formbricks Widget in your app
|
||||
## Set up the Formbricks Widget in your app
|
||||
|
||||
On the Setup Checklist you have two elements. At the top you find the Widget Status Indicator. Once your app is connected to Formbricks Cloud successfully, this will turn green:
|
||||
|
||||
@@ -116,7 +116,7 @@ In a local instance of your app, you'll embed the Formbricks Widget. Dependent o
|
||||
- [React (Create React App)](/docs/getting-started/react)
|
||||
- [Vue.JS](/docs/getting-started/vuejs)
|
||||
|
||||
## 4. Restart your app and open browser console
|
||||
## Restart your app and open browser console
|
||||
|
||||
Now, restart your app in your terminal to make sure the widget is loaded. Once its loaded, open the browser console to see the Formbricks debug logs. If you did everything right, you should now see your survey in the lower right corner:
|
||||
|
||||
@@ -127,11 +127,11 @@ Now, restart your app in your terminal to make sure the widget is loaded. Once i
|
||||
className="rounded-lg max-w-full sm:max-w-3xl"
|
||||
/>
|
||||
|
||||
## 5. Most frequent errors and how to debug them
|
||||
## Most frequent errors and how to debug them
|
||||
|
||||
In case you don’t see your survey right away, here's what you can do. Go through these in orderly to find the error fast:
|
||||
|
||||
### A. Formbricks Cloud and your app are not connected properly.
|
||||
### Formbricks Cloud and your app are not connected properly.
|
||||
|
||||
Go back to [app.formbricks.com](http://app.formbricks.com) and go to the Setup Checklist in the Settings. If the status is still indicated as “Not connected” your app hasn't yet pinged the Formbricks Cloud:
|
||||
|
||||
@@ -147,7 +147,7 @@ Go back to [app.formbricks.com](http://app.formbricks.com) and go to the Setup C
|
||||
|
||||
---
|
||||
|
||||
### B. Survey not loaded
|
||||
### Survey not loaded
|
||||
|
||||
If your app is connected with Formbricks Cloud, the survey might have not been loaded properly. Check the debug logs and search for the list of surveys loaded. It should look like so:
|
||||
|
||||
@@ -171,7 +171,7 @@ The widget only loads surveys which are **public** and **in progress**. Go to Fo
|
||||
|
||||
---
|
||||
|
||||
### C. Survey not triggered
|
||||
### Survey not triggered
|
||||
|
||||
If the survey is loaded by the widget it might not have been triggered properly.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user