Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

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
       }
      ],
      "hasOther": 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>

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.