Cart Licenses Contact Support Online Creator Login/Register
v 1.9.37

Show Survey as Window


                    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": "Which features do you value the most?",
          "isRequired": true,
          "validators": [
              "type": "answercount",
              "text": "Please select two features maximum.",
              "maxCount": 2
          "hasOther": true,
          "choices": [
            "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 = new Survey.Model(json);
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(, null, 3);
            <SurveyReact.SurveyWindow model={survey}  isExpanded={true} />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
    <title>Show Survey as Window, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></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-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

<body style="margin: 0">
            <div id="surveyElement" style="display:inline-block;width:100%;">
    <div id="surveyResult"></div>

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