[Beginner Friendly] Transform Your Web App with Formbricks Surveys: A Must-Know Guide🔥🔥🔥
Published: 2023-11-05 06:45:03

Welcome 👋 to this blog. In this blog we will learn how to integrate [Formbricks](https://formbricks.com/) Surveys within your application. In this blog, I am using my project whose code can be found [here](https://github.com/ankur0904/Medkit).

### Locally set up the project
First, we need to set up the project locally so that we can add the required code in which we want to add the **Formbricks survey**. In my case I am using [this](https://github.com/ankur0904/Medkit) project. If you want to set up this project you can follow the step or if you want to add the survey to your project you can skip this section. 

> **Note:** To set up the project follow the follwing steps.

1. **Fork the repo:** Click on the fork button so that you can get your copy of the code where you can write your code.  

2. **Clone the repo:** The next step is to create the clone the code of the repository to your local machine. You can do this by running the following command:
    ```bash
    git clone https://github.com/<YOUR_NAME>/Medkit.git
    ```

    > **Note:** `YOUR_NAME` can be replaced with your username.

3. **Install the dependencies:** Follow the commands to install the dependencies.
    ```bash
    cd Medkit
    npm install
    ```

4. **Set up the database:** You can replace the connection string with your connection string in the line of code.
    ```js
mongodb+srv://adminankur:${process.env.PASSWORD}@cluster0.4zksoll.mongodb.net/userDB
    ```

5. **Run the project:** To run the project run the following command:
    ```bash
    nodemon app.js
    ```
*You can go to the browser and type `http://localhost:3000` to access the website.*

> **Requirements:** NodeJS should be installed.
> You may have a connection string for the database.

Now our project is running. Our next step is to setup the survey. 

### Set up the survey
Finally, the time came to set up the survey. I have divided the process into the following steps:

- **Step 1:** Log in to [Formbricks.](https://formbricks.com/)
- **Step 2:** Click on the button **Start From Scratch**

![Step-2 image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v0iocgu1tmve8tp0wvt.png)

- **Step 3:** Create your question according to your needs. 

> In this example I am creating the survey for my hospital management website. 

![Step-3 image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waebweiurzep54scy9lc.png)

*You can click the `Add questions` buttons so that you can choose different types of questions.*

![Step-3 image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8xsgiuds9hp6at3koo4.png)

- **Step 4:** Now it's time to go to **Settings** and choose the **Survey Trigger**. I am choosing *new session* in this case, which means when it detects the new session it will serve the survey form.


![Step-4 image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9bsz1zjd645l08c1m3z.png)

- **Step 5:** Click on the publish button. 

And you are done with the setup of the survey.

### Time to integrate

You can go to the official [documentation](https://formbricks.com/docs/getting-started/framework-guides#html) and get the code snippet that is required to integrate the survey in the **HTML**.

Simply, copy the code from there and paste it into the `<head></head>` tag of your index HTML. 

> The only thing you need to take care of is that pass the value of your project to these variables `environment-id` and `api-host`.

Let me show you the **HTML** file.

```HTML
<!doctype html>
<html lang="en">

<head>

    <!-- Remaining Content -->

    <script type="text/javascript">
        !function () { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = "https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js"; var e = document.getElementsByTagName("script")[0]; e.parentNode.insertBefore(t, e), setTimeout(function () { window.formbricks.init({ environmentId: "<YOUR_ID>", apiHost: "https://app.formbricks.com" }) }, 500) }();
    </script>

</head>

<body>

<!-- Remaining Content -->

</body>

</html>
```

## TADA 😄😄😄
Refresh the webpage at `localhost:3000`, and you will be able to see your created survey.

You have learned how to integrate [Formbricks](https://formbricks.com/) Survey into your web application. Thanks for reading till the end. If you have any feedback, the comment section is yours. If you find this blog useful you can share this blogs.

Hire me: ankursingh91002@gmail.com

[LinkedIn](https://www.linkedin.com/in/ankur-singh-161458227/)
[Twitter](https://twitter.com/ankursingh91002)