> ## 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.
# Event Handling
> Learn how to handle events with the Primefold JavaScript Library
**Note**: The Primefold JavaScript Library provides several event callbacks that
you can use to execute custom functions at different stages of the survey
lifecycle.
## Available Event Callbacks
The Primefold JavaScript Library supports the following event callbacks:
* `onOpen`: Triggered when the overlay is opened.
* `onClose`: Triggered when the survey is closed (via the close button or the ESC key).
* `onStart`: Triggered when the survey is started.
* `onComplete`: Triggered when the survey is completed.
## Example Usage
Here is an example of how to use these event callbacks:
```html index.html theme={null}
Primefold Survey
Welcome to the Survey
```
## Detailed Explanation
### onComplete
The `onComplete` callback is executed when the survey is completed by the user. This is useful for performing actions such as showing a thank you message or redirecting the user to another page.
```javascript index.js theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
onComplete: function () {
alert("Thank you for completing the survey!");
},
});
```
### onClose
The `onClose` callback is triggered when the user closes the survey overlay, either by clicking the close button or by pressing the ESC key. You can use this to log the event or to perform any cleanup actions.
```javascript index.js theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
onClose: function () {
console.log("Survey closed by the user.");
},
});
```
### onOpen
The `onOpen` callback is executed when the survey overlay is opened. This can be useful for tracking the event or initializing certain states.
```javascript index.js theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
onOpen: function () {
console.log("Survey overlay opened.");
},
});
```
### onStart
The `onStart` callback is triggered when the survey is started by the user. This can be useful for logging the start event or for analytics purposes.
```javascript index.js theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
onStart: function () {
console.log("Survey started.");
},
});
```
## Combining Callbacks
You can combine multiple event callbacks to handle different events within the survey lifecycle.
```javascript index.js theme={null}
window.PrimefoldSurvey.initialize({
surveyId: "",
onComplete: function () {
alert("Thank you for completing the survey!");
},
onClose: function () {
console.log("Survey closed by the user.");
},
onOpen: function () {
console.log("Survey overlay opened.");
},
onStart: function () {
console.log("Survey started.");
},
});
```
## Troubleshooting
If your event callbacks are not working as expected, here are some common issues to check:
Ensure that the function is correctly defined and that it is being passed in
the configuration object of the `initialize` method.
Check the syntax of your JavaScript code and make sure all required
parameters are provided correctly.
For more details, visit our [documentation](#).