Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.38

Show Survey as Window


                        
        
            Survey.StylesManager.applyTheme("bootstrap");
            Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
        



            
                var windowSurvey = new Survey.SurveyWindowModel({
  "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": "Which 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 do you like about our product?"
        },
        {
          "type": "comment",
          "name": "disappointed_experience",
          "visibleIf": "{nps_score} notempty",
          "title": "What do you miss or find disappointing in your experience with our products?"
        }
      ]
    }
  ],
  "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>Show Survey as 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-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
    <div id="surveyResult"></div>

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

</body>
</html>
Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey