How to customize the overlay and iFrame of the Saypien JavaScript Library
#saypien-survey-overlay { background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */ }
#saypien-survey-overlay { top: 0; left: 0; width: 100%; height: 100%; }
#saypien-survey-iframe { border: 1px solid #000; /* Add a border in your brand color */ }
#saypien-survey-iframe { width: 80%; /* Adjust width */ height: 80%; /* Adjust height */ margin: 5% auto; /* Center the iFrame */ }
#saypien-survey-close-button { background-color: #fff; border: none; padding: 10px 15px; font-size: 24px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Your Survey</title> <script src="https://saypien.io/plugins/saypien-survey.min.js"></script> <script> window.SaypienSurvey.initialize({ buttonId: "myButton", surveyId: "<YOUR_SURVEY_ID>", }); </script> <style> #saypien-survey-overlay { background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #saypien-survey-iframe { border: none; /* Remove border */ width: 90%; /* Adjust width */ height: 90%; /* Adjust height */ margin: 5% auto; /* Center the iFrame */ display: block; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } #saypien-survey-close-button { position: absolute; top: 10px; right: 10px; background-color: #fff; border: none; padding: 10px 15px; font-size: 24px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } </style> </head> <body> <h1>Welcome to the Survey</h1> <button id="myButton">Open Survey</button> </body> </html>