fix formatting issues

This commit is contained in:
Matthias Nannt
2023-08-25 14:52:36 +02:00
parent 31dc1c8e3f
commit 5260316d34
2 changed files with 59 additions and 41 deletions

View File

@@ -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"
/>
**Cant 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 thats 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 thats 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"
/>
**Cant figure it out? [Join our Discord!](https://formbricks.com/discord)**

View File

@@ -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. Lets 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 youre 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. Well choose one of the templates and head over to the survey settings:
@@ -84,7 +84,7 @@ Now hit **Publish** and youll 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 dont 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.