> ## Documentation Index
> Fetch the complete documentation index at: https://docs.primefold.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started
> How to install and integrate the Primefold JavaScript Library
**Prerequisite** You should have basic knowledge of JavaScript and your
website should be hosted on a platform like Vercel to load the library via a
CDN.
### Step 1.
Add the Primefold JavaScript Library to the `` section of your HTML file:
```html index.html theme={null}
Primefold Survey
```
### Step 2.
Initialize the library with a configuration:
```html index.html theme={null}
```
### Step 3.
Add a button that will trigger the overlay:
```html index.html theme={null}
```
The `primefold-survey-button` class gives your button a styled look out of the box. The icon is optional — you can also use a plain button like ``.
The Primefold JavaScript Library is now integrated into your website, and you can customize it as needed.
### Opening the survey automatically
If you want the survey to appear automatically when the page loads, set `buttonId` to `null` or leave it out:
```javascript theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
});
```
### Configuration Options
The library can be configured with the following options:
* `buttonId` (Optional): The ID of the button that triggers the event listener. Set this to `null` if no button is used and the overlay should appear directly when the page loads.
* `surveyId` (Required): The survey ID used for the iFrame URL.
* `onComplete` (Optional): Callback function to be executed when the survey is completed.
* `onClose` (Optional): Callback function to be executed when the survey is closed.
* `onOpen` (Optional): Callback function to be executed when the overlay is opened.
* `onStart` (Optional): Callback function to be executed when the survey is started.
### Example Configuration
Here is an example of a typical configuration:
```javascript theme={null}
window.PrimefoldSurvey.initialize({
buttonId: "myButton", // Set to null if no button is used
surveyId: "", // Your specific survey ID
onComplete: function () {
console.log("Survey completed!");
},
onClose: function () {
console.log("Survey closed!");
},
onOpen: function () {
console.log("Survey opened!");
},
onStart: function () {
console.log("Survey started!");
},
});
```
## Troubleshooting
Here's how to solve some common problems when integrating the Primefold JavaScript Library.
Ensure that the `surveyId` is correctly provided and that the button with
the specified `buttonId` exists.
Check the configuration and make sure all required parameters are provided.