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

Show Survey as Window

The example of showing survey as a popup window


                        
        
            Survey.StylesManager.applyTheme("default");
        


            
                var json = {
  "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 = 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>The example of showing survey as a popup window, Vue Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="/DevBuilds/survey-vue/survey.vue.min.js"></script>
    <link href="/DevBuilds/survey-core/survey.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <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>