mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-18 19:41:17 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

fix: Buttons Margin and code snippets issue across Docs (#1107)

Browse Source
This commit is contained in:
Bilal Mirza
2023-10-12 13:26:58 +05:30
committed by GitHub
parent 8a94f9437e
commit 3206794055
16 changed files with 147 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/formbricks-com/app/docs/actions/code/page.mdx
View File

@@ -9,7 +9,7 @@ export const meta = {
# Code Actions
Actions can also be set in the code base. You can fire an action using `formbricks.track()`
<Col>
<CodeGroup title="Track an action">
```javascript
@@ -17,9 +17,9 @@ formbricks.track("Action Name");
```
</CodeGroup>
</Col>
Here is an example of how to fire an action when a user clicks a button:
<Col>
<CodeGroup title="Track Button Click">
```javascript
@@ -31,3 +31,4 @@ return <button onClick={handleClick}>Click Me</button>;
```
</CodeGroup>
</Col>

8
apps/formbricks-com/app/docs/attributes/custom-attributes/page.mdx
View File

@@ -13,7 +13,7 @@ One way to send attributes to Formbricks is in your code. In Formbricks, there a
## Setting Custom User Attributes
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
<Col>
<CodeGroup title="Setting Plan to Pro">
```javascript
@@ -21,9 +21,9 @@ formbricks.setAttribute("Plan", "Pro");
```
</CodeGroup>
</Col>
Generally speaking, the setAttribute function works like this:
<Col>
<CodeGroup title="Setting Custom Attributes">
```javascript
@@ -31,5 +31,5 @@ formbricks.setAttribute("attribute_key", "attribute_value");
```
</CodeGroup>
</Col>
Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.

15
apps/formbricks-com/app/docs/attributes/identify-users/page.mdx
View File

@@ -15,7 +15,7 @@ Once the Formbricks widget is loaded on your web app, our SDK exposes methods fo
## Setting User ID
You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
<Col>
<CodeGroup title="Setting User ID">
```javascript
@@ -23,11 +23,11 @@ formbricks.setUserId("USER_ID");
```
</CodeGroup>
</Col>
## Setting User Email
You can use the setEmail function to set the user's email:
<Col>
<CodeGroup title="Setting Email">
```javascript
@@ -35,11 +35,11 @@ formbricks.setEmail("user@example.com");
```
</CodeGroup>
</Col>
### Setting Custom User Attributes
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
<Col>
<CodeGroup title="Setting Custom Attributes">
```javascript
@@ -47,11 +47,11 @@ formbricks.setAttribute("attribute_key", "attribute_value");
```
</CodeGroup>
</Col>
### Logging Out Users
When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
<Col>
<CodeGroup title="Logging out User">
```javascript
@@ -59,3 +59,4 @@ formbricks.logout();
```
</CodeGroup>
</Col>

31
apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx
View File

@@ -139,7 +139,7 @@ This allows us to capture and analyze partial feedback where the user is not wil
Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
3. Write the frontend code for the widget. Here is the full component (we break it down right below):
<Col>
<CodeGroup title="Entire Widget">
```tsx
@@ -217,11 +217,11 @@ export default function DocsFeedback() {
```
</CodeGroup>
</Col>
**Let’s break it down!**
Setting the local states and getting the current URL:
<Col>
<CodeGroup title="State Management">
```tsx
@@ -233,9 +233,9 @@ const [freeText, setFreeText] = useState(""); // to locally store the additional
```
</CodeGroup>
</Col>
Disabling feedback if config environment variables are not set properly:
<Col>
<CodeGroup title="Disable feedback if incorrect config env vars">
```tsx
@@ -249,9 +249,9 @@ if (
```
</CodeGroup>
</Col>
The actual frontend (read comments):
<Col>
<CodeGroup title="Actual Frontend">
```tsx
@@ -308,13 +308,13 @@ return (
```
</CodeGroup>
</Col>
## 3. Connecting to the Formbricks API
The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
Here is the code for the `handleFeedbackSubmit` function with comments:
<Col>
<CodeGroup title="handleFeedbackSubmit() function definition">
```tsx
@@ -357,9 +357,9 @@ export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
```
</CodeGroup>
</Col>
And this is the `updateFeedback` function with comments:
<Col>
<CodeGroup title="updateFeedback() function definition">
```tsx
@@ -400,7 +400,7 @@ export const updateFeedback = async (freeText, responseId) => {
```
</CodeGroup>
</Col>
That’s almost it! 🤸
## 4. Setting it up for testing
@@ -415,7 +415,7 @@ When you are on the survey detail page, you’ll find both of them in the URL:
<Image src={CopyIds} alt="copy IDs" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
<Col>
<CodeGroup title="Replace the ID and API accordingly">
```tsx
@@ -432,9 +432,9 @@ Now, you have to replace the IDs and the API host accordingly in your `handleFee
```
</CodeGroup>
</Col>
And lastly, in the `updateFeedback` function
<Col>
<CodeGroup title="Replace the ID and API here as well">
```tsx
@@ -446,6 +446,7 @@ And lastly, in the `updateFeedback` function
```
</CodeGroup>
</Col>
### You’re good to go! 🎉
Something doesn’t work? Check your browser console for the error.

10
apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
View File

@@ -96,8 +96,8 @@ This way you make sure that you separate potentially misleading opinions from va
### 4. Set up a trigger for the Product-Market Fit survey:
You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/docs/actions/why) if you are not sure how to set them up:
<div className="grid grid-cols-2 space-x-2">
<Col>
<div>
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
<Image
src={ActionPageurl}
@@ -106,16 +106,16 @@ You need a trigger to display the survey but in this case, the filtering does al
className="rounded-lg max-w-full sm:max-w-3xl"
/>
</div>
</Col>
### 5. Select Action in the “When to ask” card
<Col>
<Image
src={SelectAction}
alt="Select PMF trigger button action"
quality="100"
className="rounded-lg max-w-full sm:max-w-3xl"
/>
</Col>
### 6. Last step: Set Recontact Options correctly
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:

23
apps/formbricks-com/app/docs/contributing/demo/page.mdx
View File

@@ -20,7 +20,7 @@ To play around with the in-app [User Actions](/docs/actions/why), you can use th
### Code Action
This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
<Col>
<CodeGroup title="Track Code action">
```javascript
@@ -28,11 +28,11 @@ formbricks.track("Code Action");
```
</CodeGroup>
</Col>
### No Code Action
This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
<Col>
<CodeGroup title="Track No-Code action">
```tsx
@@ -40,11 +40,11 @@ This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long a
```
</CodeGroup>
</Col>
### Set Plan to "Free"
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
<Col>
<CodeGroup title="Set Plan to Free">
```tsx
@@ -52,11 +52,11 @@ formbricks.setAttribute("Plan", "Free");
```
</CodeGroup>
</Col>
### Set Plan to "Paid"
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
<Col>
<CodeGroup title="Set Plan to Paid">
```tsx
@@ -64,11 +64,11 @@ formbricks.setAttribute("Plan", "Paid");
```
</CodeGroup>
</Col>
### Set Email
This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
<Col>
<CodeGroup title="Set Email">
```tsx
@@ -76,11 +76,11 @@ formbricks.setEmail("test@web.com");
```
</CodeGroup>
</Col>
### Set UserId
This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
<Col>
<CodeGroup title="Set User ID">
```tsx
@@ -88,3 +88,4 @@ formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
```
</CodeGroup>
</Col>

36
apps/formbricks-com/app/docs/contributing/setup/page.mdx
View File

@@ -14,7 +14,7 @@ To get the project running locally on your machine you need to have the followin
- [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
1. Clone the project:
<Col>
<CodeGroup title="Git clone Formbricks monorepo">
```bash
@@ -22,9 +22,9 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
and move into the directory
<Col>
<CodeGroup title="Move into the Formbricks monorepo">
```bash
@@ -32,9 +32,9 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
<Col>
<CodeGroup title="Install dependencies via pnpm">
```bash
@@ -42,9 +42,9 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
<Col>
<CodeGroup title="Define environment variables">
```bash
@@ -52,9 +52,9 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
<Col>
<CodeGroup title="Set value of ENCRYPTION_KEY">
```bash
@@ -62,10 +62,10 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
<Col>
<CodeGroup title="Start Formbricks Dev Setup">
```bash
@@ -73,7 +73,7 @@ To get the project running locally on your machine you need to have the followin
```
</CodeGroup>
</Col>
This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
- a `postgres` container for hosting your database,
@@ -86,7 +86,7 @@ To get the project running locally on your machine you need to have the followin
### Build
To build all apps and packages and check for build errors, run the following command:
<Col>
<CodeGroup title="Build Formbricks stack">
```bash
@@ -94,11 +94,11 @@ pnpm build
```
</CodeGroup>
</Col>
### Access Demo app
To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
<Col>
<CodeGroup title="Start Formbricks Demo App">
```bash
@@ -106,13 +106,13 @@ pnpm dev --filter=demo
```
</CodeGroup>
</Col>
You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
### Access Formbricks website
If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
<Col>
<CodeGroup title="Start Formbricks Website">
```bash
@@ -120,5 +120,5 @@ pnpm dev --filter=formbricks-com
```
</CodeGroup>
</Col>
You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).

8
apps/formbricks-com/app/docs/contributing/troubleshooting/page.mdx
View File

@@ -34,7 +34,7 @@ If nothing helps, run `pnpm clean` and then `pnpm i` again. This solves a lot.
## "I get a full-screen error with cryptic strings"
This usually happens when the Formbricks Widget wasn't correctly or completely built.
<Col>
<CodeGroup title="Build js library first and then run again">
```bash
@@ -45,11 +45,11 @@ pnpm dev
```
</CodeGroup>
</Col>
## My machine struggles with the repository
Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
<Col>
<CodeGroup title="Only run the required project">
```bash {{ title: 'Formbricks Web-App' }}
@@ -65,7 +65,7 @@ pnpm dev --filter=demo...
```
</CodeGroup>
</Col>
However, in our experience it's better to run `pnpm dev` than having two terminals open (one with the Formbricks app and one with the demo).
## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON

27
apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx
View File

@@ -38,7 +38,7 @@ Before getting started, make sure you have:
## HTML
All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
<Col>
<CodeGroup title="HTML">
```html {{ title: 'index.html' }}
<!-- START Formbricks Surveys -->
@@ -48,7 +48,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
<!-- END Formbricks Surveys -->
```
</CodeGroup>
</Col>
### Required Customizations to be Made
<Properties>
@@ -69,7 +69,7 @@ Refer our [Example HTML project](https://github.com/formbricks/examples/tree/mai
## ReactJS
Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
<Col>
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
@@ -82,9 +82,9 @@ yarn add @formbricks/js
```
</CodeGroup>
</Col>
Now, update your App.js/ts file to initialise Formbricks.
<Col>
<CodeGroup title="src/App.js">
```js
@@ -107,7 +107,7 @@ export default App;
```
</CodeGroup>
</Col>
### Required Customizations to be Made
<Properties>
@@ -146,7 +146,7 @@ guidelines for each convention below:
- 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.
<Col>
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
@@ -159,9 +159,9 @@ yarn add @formbricks/js
```
</CodeGroup>
</Col>
### App Directory
<Col>
<CodeGroup title="app/formbricks.tsx">
```tsx {{title: 'Typescript'}}
"use client";
@@ -207,11 +207,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
````
</CodeGroup>
</Col>
Refer our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
### Pages Directory
<Col>
<CodeGroup title="src/pages/_app.tsx">
```tsx {{ title: 'Typescript' }}
@@ -245,7 +246,7 @@ export default function App({ Component, pageProps }: AppProps) {
```
</CodeGroup>
</Col>
Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
### Required Customizations to be Made
@@ -282,7 +283,7 @@ Now visit the [Validate your Setup](#validate-your-setup) section to verify your
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.
<Col>
<CodeGroup title="Install Formbricks JS library">
```shell {{ title: 'npm' }}
npm install --save @formbricks/js
@@ -335,7 +336,7 @@ router.afterEach((to, from) => {
```
</CodeGroup>
</Col>
### Required Customizations to be Made
<Properties>

4
apps/formbricks-com/app/docs/introduction/what-is-formbricks/page.mdx
View File

@@ -20,7 +20,7 @@ export const sections = [
Welcome to Formbricks, your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀 {{ className: 'lead' }}
<div className="not-prose mb-16 mt-6 flex gap-3">
<div className="mb-16 mt-6 flex gap-3">
<Button href="/docs/getting-started/quickstart-in-app-survey" arrow="right" children="Quickstart" />
</div>
@@ -34,7 +34,7 @@ Natively embed qualitative user research into your B2B SaaS. Leverage Best Pract
- 🧪 **Smart triggering**: Show the right survey at the right time with event-based triggers for accurate research and well-defined priorities.
- 🎉 **Open-source and self-hosted**: Enjoy full control over your data and infrastructure with our AGPL-licensed solution, and stay tuned for our upcoming cloud version!
<div className="not-prose">
<div>
<Button
href="https://app.formbricks.com/"
variant="text"

28
apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx
View File

@@ -22,7 +22,7 @@ URL prefilling of data comes in handy when you:
- Want to embed the first question in an email and increase conversion by prefilling the choice
## Quick Example
<Col>
<CodeGroup title="Example URL">
```sh
@@ -30,7 +30,7 @@ https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?question_id=5
```
</CodeGroup>
</Col>
## How it works
To prefill the first question of a survey, append `?question_id=answer` at the end of the survey URL. The answer has to match the expected type of the question. For example, if the first question is a rating question, the answer has to be a number. If the first question is a single select question, the answer has to be a string.
@@ -58,7 +58,7 @@ You find the `questionId` in the Advanced Settings at the bottom of each questio
Here are a few examples to get you started:
### Rating Question
<Col>
<CodeGroup title="Translates to 5 stars / points / emojis">
```sh
@@ -66,9 +66,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?rating_question_id=5
```
</CodeGroup>
</Col>
### NPS Question
<Col>
<CodeGroup title="Translates to an NPS rating of 10">
```sh
@@ -76,9 +76,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?nps_question_id=10
```
</CodeGroup>
</Col>
### Single Select Question (Radio)
<Col>
<CodeGroup title="Chooses the option 'Very disappointed' in the single select question. The string has to be identical to the option in your question">
```sh
@@ -86,9 +86,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?single_select_question_id
```
</CodeGroup>
</Col>
### Multi Select Question (Checkbox)
<Col>
<CodeGroup title="Selects three options 'Sun, Palms and Beach' in the multi select question. The strings have to be identical to the options in your question">
```sh
@@ -96,9 +96,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?multi_select_question_id=
```
</CodeGroup>
</Col>
### Open Text Question
<Col>
<CodeGroup title="Adds 'I love Formbricks' as the answer to the open text question">
```sh
@@ -106,9 +106,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20
```
</CodeGroup>
</Col>
### CTA Question
<Col>
<CodeGroup title="Adds 'clicked' as the answer to the CTA question. Alternatively, you can set it to 'dismissed' to skip the question.">
```txt
@@ -116,7 +116,7 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked
```
</CodeGroup>
</Col>
## Validation
Make sure that the answer in the URL matches the expected type for the first question.

4
apps/formbricks-com/app/docs/link-surveys/user-identification/page.mdx
View File

@@ -23,7 +23,7 @@ Identifying users in link surveys comes in handy when you:
- Want to gather data and later connect it to a user who has not signed up yet
## Quick Example
<Col>
<CodeGroup title="User Identification Example">
```txt
@@ -31,7 +31,7 @@ https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?userId=ABC123
```
</CodeGroup>
</Col>
## How it works
To link a response to a user in your Formbricks database, you can pass your internal user Id as a URL parameter.

40
apps/formbricks-com/app/docs/self-hosting/docker/page.mdx
View File

@@ -24,7 +24,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
1. **Create a New Directory for Formbricks**
Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
<Col>
<CodeGroup title="Create and cd into the new directory">
```bash
@@ -32,11 +32,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
2. **Download the Docker-Compose File**
Download the docker-compose file directly from the Formbricks repository:
<Col>
<CodeGroup title="Download docker compose file">
```bash
@@ -44,11 +44,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
3. **Generate NextAuth Secret**
Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
<Col>
<CodeGroup title="Generate NextAuth Secret">
```bash
@@ -56,13 +56,13 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
4. **Start the Docker Setup**
You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
<Col>
<CodeGroup title="Launch Docker Instance">
```bash
@@ -70,7 +70,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
The `-d` flag will run the containers in detached mode, meaning they'll run in the background.
5. **Visit Formbricks in Your Browser**
@@ -80,7 +80,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
## Updating Formbricks
1. Stop the Formbricks stack
<Col>
<CodeGroup title="Stop the docker instance">
```bash
@@ -88,9 +88,9 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
2. Pull the latest changes
<Col>
<CodeGroup title="Pull the changes into docker">
```bash
@@ -98,10 +98,10 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
3. Update env vars as necessary in the docker-compose file.
4. Re-start the Formbricks stack
<Col>
<CodeGroup title="Relaunch the Docker Instance">
```bash
@@ -109,11 +109,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
## Debugging
If you encounter any issues, you can check the logs of the container with:
<Col>
<CodeGroup title="Look into docker logs">
```bash
@@ -121,9 +121,9 @@ docker compose logs -f
```
</CodeGroup>
</Col>
In an ideal case, you should see something like this:
<Col>
<CodeGroup title="Docker Build Underway">
```bash
@@ -151,9 +151,9 @@ In an ideal case, you should see something like this:
```
</CodeGroup>
</Col>
And at the tail of the output, you should see something like this:
<Col>
<CodeGroup title="Docker Build Completed">
```bash
@@ -164,7 +164,7 @@ formbricks-quickstart-formbricks-1 | Listening on port 3000 url: http://<random
```
</CodeGroup>
</Col>
You can close the logs again with `CTRL + C`.
<Note>

16
apps/formbricks-com/app/docs/self-hosting/from-source/page.mdx
View File

@@ -20,7 +20,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
</Note>
1. **Clone the repository**:
<Col>
<CodeGroup title="Clone and cd into the Formbricks directory">
```bash
@@ -28,7 +28,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
2. **Modify the environment variables in your `docker-compose.yml` file as required by your setup.** <br/> This file comes with a basic setup and Formbricks works without making any changes to the file. To enable email sending functionality you need to configure the SMTP settings. If you configured your email credentials, you can also comment the following lines to enable email verification (`# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1`) and password reset (`# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1`)
<Note>
@@ -41,7 +41,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
3. **Generate NextAuth Secret**
Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
<Col>
<CodeGroup title="Generate NextAuth Secret">
```bash
@@ -49,11 +49,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
4. **Start the docker compose process.** <br/> Finally start the docker compose process to build and spin up the Formbricks container as well as the PostgreSQL database. <br/> _Use docker-compose if you are on an older docker version_
We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
<Col>
<CodeGroup title="Launch docker instances">
```bash
@@ -61,7 +61,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
```
</CodeGroup>
</Col>
You can now access the app on [http://localhost:3000](http://localhost:3000). You will be automatically redirected to the login. To use your local installation of Formbricks, create a new account.
## Important Run-time Variables
@@ -125,7 +125,7 @@ These variables must be provided at the time of the docker build and can be prov
## Debugging
If you encounter any issues, you can check the logs of the container with:
<Col>
<CodeGroup title="Docker container logs">
```bash
@@ -133,7 +133,7 @@ docker compose logs -f
```
</CodeGroup>
</Col>
You can close the logs again with `CTRL + C`.
Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

8
apps/formbricks-com/app/docs/self-hosting/migrating-to-1.1/page.mdx
View File

@@ -51,19 +51,19 @@ For a seamless migration, below is a shell script for your self-hosted instance
The below script will:
1. Create a backup of your existing .env file as `.env.old`
2. Update the .env file to be compliant with the new naming conventions
<Col>
<CodeGroup title="Run the below in your terminal in the directory of your .env">
```shell {{ title: '.env file' }}
for var in NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED NEXT_PUBLIC_PASSWORD_RESET_DISABLED NEXT_PUBLIC_SIGNUP_DISABLED NEXT_PUBLIC_INVITE_DISABLED NEXT_PUBLIC_PRIVACY_URL NEXT_PUBLIC_TERMS_URL NEXT_PUBLIC_IMPRINT_URL NEXT_PUBLIC_GITHUB_AUTH_ENABLED NEXT_PUBLIC_GOOGLE_AUTH_ENABLED NEXT_PUBLIC_WEBAPP_URL NEXT_PUBLIC_IS_FORMBRICKS_CLOUD NEXT_PUBLIC_SURVEY_BASE_URL; do sed -i.old "s/^$var=/$(echo $var | sed 's/NEXT_PUBLIC_//')=/" .env; done; echo "Formbricks environment variables have been migrated as per v1.1! You are good to go."
```
</CodeGroup>
</Col>
### Docker & Single Script Setup
Now that these variables can be defined at runtime, you can append them inside your `x-environment` in the `docker-compose.yml` itself.
For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/from-source#important-run-time-variables) section.
<Col>
<CodeGroup title="docker-compose.yml">
```yaml {{ title: 'docker-compose.yml' }}
version: "3.3"
@@ -128,5 +128,5 @@ x-environment: &environment
```
</CodeGroup>
</Col>
Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!

24
apps/formbricks-com/app/docs/self-hosting/production/page.mdx
View File

@@ -25,7 +25,7 @@ Before you proceed, make sure you have the following:
## Single Command Setup
Copy and paste the following command into your terminal:
<Col>
<CodeGroup title="Single Command to deploy Formbricks">
```bash
@@ -33,11 +33,11 @@ Copy and paste the following command into your terminal:
```
</CodeGroup>
</Col>
The script will prompt you for the following information:
1. **Overwriting Docker GPG Keys**: If Docker GPG keys already exist, the script will ask if you want to overwrite them.
<Col>
<CodeGroup title="Docker GPG Keys Overwrite Prompt">
```bash
@@ -53,9 +53,9 @@ The script will prompt you for the following information:
```
</CodeGroup>
</Col>
2. **Email Address**: Provide your email address for SSL certificate registration with Let's Encrypt.
<Col>
<CodeGroup title="Email Prompt">
```bash
@@ -80,9 +80,9 @@ The script will prompt you for the following information:
```
</CodeGroup>
</Col>
3. **Domain Name**: Enter the domain name that Traefik will use to create the SSL certificate and forward requests to Formbricks.
<Col>
<CodeGroup title="Domain Name for SSL certificate Prompt">
```bash
@@ -111,9 +111,9 @@ The script will prompt you for the following information:
```
</CodeGroup>
</Col>
**That's it**! After running the command and providing the required information, visit the domain name you entered, and you should see the Formbricks home wizard!
<Col>
<CodeGroup title="Successfully setup Formbricks on your Ubuntu machine">
```bash
@@ -153,11 +153,11 @@ my.hosted.url.com
```
</CodeGroup>
</Col>
## Debugging
If you encounter any issues, you can check the logs of the container with:
<Col>
<CodeGroup title="Check logs of the container">
```bash
@@ -165,7 +165,7 @@ cd formbricks && docker compose logs -f
```
</CodeGroup>
</Col>
You can close the logs again with `CTRL + C`.
<Note>