Event Handling - Primefold

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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Primefold Survey</title>
    <script src="https://xi.primefold.ai/plugins/primefold-survey.min.js"></script>
    <script>
      window.PrimefoldSurvey.initialize({
        buttonId: "myButton",
        surveyId: "<YOUR_SURVEY_ID>",
        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.");
        },
      });
    </script>
  </head>
  <body>
    <h1>Welcome to the Survey</h1>
    <button id="myButton" class="primefold-survey-button">
      <span class="primefold-survey-icon"></span>
      Open Survey
    </button>
  </body>
</html>

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.

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
  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.

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
  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.

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
  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.

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
  onStart: function () {
    console.log("Survey started.");
  },
});

Combining Callbacks

You can combine multiple event callbacks to handle different events within the survey lifecycle.

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
  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:

The callback function is not being executed

Ensure that the function is correctly defined and that it is being passed in the configuration object of the initialize method.

An error is displayed in the console

Check the syntax of your JavaScript code and make sure all required parameters are provided correctly.

For more details, visit our documentation.

​Available Event Callbacks

​Example Usage

​Detailed Explanation

​onComplete

​onClose

​onOpen

​onStart

​Combining Callbacks

​Troubleshooting

Available Event Callbacks

Example Usage

Detailed Explanation

onComplete

onClose

onOpen

onStart

Combining Callbacks

Troubleshooting