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.

Embed the Saypien JavaScript Library in your website.

<script src="https://saypien.io/plugins/saypien-survey.min.js"></script>

​
Step 2.

Add the JavaScript file 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>Saypien Survey</title>
    <script src="https://saypien.io/plugins/saypien-survey.min.js"></script>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

​
Step 3.

Initialize the library with a configuration:

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

​
Step 4.

Add a button that will trigger the overlay:

<button id="myButton">Open Survey</button>

The Saypien JavaScript Library is now integrated into your website, and you can customize it as needed.

​
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 close button is clicked.
  • 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.SaypienSurvey.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 Saypien JavaScript Library.

IntroductionStyling