Getting Started - Primefold

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 <HEAD> section of your HTML file:

<!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>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

Step 2.

Initialize the library with a configuration:

<script>
  window.PrimefoldSurvey.initialize({
    buttonId: "myButton", // Set to null if no button is used
    surveyId: "<YOUR_SURVEY_ID>", // Your specific survey ID
  });
</script>

Step 3.

Add a button that will trigger the overlay:

<button id="myButton" class="primefold-survey-button">
  <span class="primefold-survey-icon"></span>
  Open Survey
</button>

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 <button id="myButton">Open Survey</button>. 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:

window.PrimefoldSurvey.initialize({
  surveyId: "<YOUR_SURVEY_ID>",
});

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:

window.PrimefoldSurvey.initialize({
  buttonId: "myButton", // Set to null if no button is used
  surveyId: "<YOUR_SURVEY_ID>", // 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.

The overlay is not displayed

Ensure that the surveyId is correctly provided and that the button with the specified buttonId exists.

An error is displayed in the console

Check the configuration and make sure all required parameters are provided.

​Step 1.

​Step 2.

​Step 3.

​Opening the survey automatically

​Configuration Options

​Example Configuration

​Troubleshooting

Step 1.

Step 2.

Step 3.

Opening the survey automatically

Configuration Options

Example Configuration

Troubleshooting