Pop-Up Survey


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "title": "Customer Feedback Survey",
  "pages": [
   {
    "name": "page1",
    "elements": [
     {
      "type": "rating",
      "name": "nps_score",
      "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
      "isRequired": true,
      "rateMin": 0,
      "rateMax": 10,
      "minRateDescription": "(Most unlikely)",
      "maxRateDescription": "(Most likely)"
     },
     {
      "type": "checkbox",
      "name": "promoter_features",
      "visibleIf": "{nps_score} >= 9",
      "title": "Which of the following features do you value the most?",
      "description": "Please select no more than three features.",
      "isRequired": true,
      "validators": [
       {
        "type": "answercount",
        "text": "Please select no more than three features.",
        "maxCount": 3
       }
      ],
      "showOtherItem": true,
      "choices": [
       "Performance",
       "Stability",
       "User interface",
       "Complete functionality",
       "Learning materials (documentation, demos, code examples)",
       "Quality support"
      ],
      "otherText": "Other features:",
      "colCount": 2
     },
     {
      "type": "comment",
      "name": "passive_experience",
      "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
      "title": "What can we do to make your experience more satisfying?"
     },
     {
      "type": "comment",
      "name": "disappointing_experience",
      "visibleIf": "{nps_score} <= 6",
      "title": "Please let us know why you had such a disappointing experience with our product"
     }
    ]
   }
  ],
  "completeText":  "Send",
  "completedHtml": "<h3>Thank you for your feedback</h3>",
  "completedHtmlOnCondition": [
   {
    "expression": "{nps_score} >= 9",
    "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
   },
   {
     "expression": "{nps_score} >= 6  and {nps_score} <= 8",
     "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
   }
  ],
  "showQuestionNumbers": "off"
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a Pop-Up Survey, Vuejs Example | JS Form Libraries</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                                    <survey-window :survey='survey'  :isExpanded='true'></survey-window>
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

SurveyJS Form Library allows you to embed pop-up surveys in your website. You can use this functionality to create exit-intent popups, pop-up quizzes, lead generation popups, and other kinds of website pop-up surveys. For example, this demo shows how to display a customer feedback survey in an embedded pop-up window.

When you design a pop-up survey for a website, you can use the same JSON schema you would use for a survey displayed inside a page. However, to render a website pop-up survey, use the PopupSurvey object (PopupSurveyNG in Angular) instead of Survey. Refer to the JavaScript tab for a code example.

To expand or collapse a pop-up survey, use the isExpanded property or the expand() and collapse() methods.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.