Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.8.68
v 1.8.68
Overview Examples Docs Source Download

Show Survey as Window

The example of showing survey as a popup window


                        
        
            Survey.StylesManager.applyTheme("modern");
        


            
                var windowSurvey = new Survey.SurveyWindow({
  "title": "Before you go on.",
  "completeText":  "Send",
  "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
  "completedHtmlOnCondition": [
    {
      "expression": "{nps_score} > 8",
      "html": "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
    },
    {
      "expression": "{nps_score} < 7",
      "html": "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5><br/>"
    }
  ],
  "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": "What features do you value the most?",
          "isRequired": true,
          "validators": [
            {
              "type": "answercount",
              "text": "Please select two features maximum.",
              "maxCount": 2
            }
          ],
          "hasOther": true,
          "choices": [
            "Performance",
            "Stability",
            "User Interface",
            "Complete Functionality"
          ],
          "otherText": "Other feature:",
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "passive_experience",
          "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
          "title": "What is the primary reason for your score?"
        },
        {
          "type": "comment",
          "name": "disappointed_experience",
          "visibleIf": "{nps_score} notempty",
          "title": "What do you miss and what was disappointing in your experience with us?"
        }
      ]
    }
  ],
  "showQuestionNumbers": "off"
});
                window.survey = windowSurvey.survey;
            
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
windowSurvey.isExpanded = true;
            
                windowSurvey.show();
            
;
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>The example of showing survey as a popup window, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
    <div id="surveyResult"></div>

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

</body>
</html>