The easiest way to add the survey into your web page, is to go to our
Survey Creator page, construct your survey and click on the
Embed Survey tab.
There are three sections inside
Embed Survey tab:
head,
html,
javascript, from where you may copy the code into your web page.
Another easy way, is to go to
one of our examples, click on plunker button and copy the code from plunker editors into your web application.
If you do not want to use our Azure CDN, you may download our script files from GitHub:
SurveyJS library, or go to our
cdn repo. It contains all versions since 0.12.0 (early 2017).
Finally you may select one of our npm packages, based on your JavaScript platform, and install it.
npm install survey-angular
npm install survey-jquery
npm install survey-knockout
import { Component } from '@angular/core';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
import React from 'react';
import ReactDOM from 'react-dom';
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
Step 2
Add link(s) to survey.js
If you are NOT going to use the Bootstrap, add the link to survey css.
<link href="https://surveyjs.azureedge.net/1.5.10/survey.css" type="text/css" rel="stylesheet" />
Link to the angular2 version of the library.
<script src="https://surveyjs.azureedge.net/1.5.10/survey.angular.min.js"></script>
Link to the jquery version of the library.
<script src="https://surveyjs.azureedge.net/1.5.10/survey.jquery.min.js"></script>
Link to the knockout version of the library.
<script src="https://surveyjs.azureedge.net/1.5.10/survey.ko.min.js"></script>
Link to the react version of the library.
<script src="https://surveyjs.azureedge.net/1.5.10/survey.react.min.js"></script>
Link to the vue version of the library.
<script src="https://surveyjs.azureedge.net/1.5.10/survey.vue.min.js"></script>
var surveyJSON = { title: "Tell us, what technologies do you use?", pages: [
{ name:"page1", questions: [
{ type: "radiogroup", choices: [ "Yes", "No" ], isRequired: true, name: "frameworkUsing",title: "Do you use any front-end framework like Bootstrap?" },
{ type: "checkbox", choices: ["Bootstrap","Foundation"], hasOther: true, isRequired: true, name: "framework", title: "What front-end framework do you use?", visibleIf: "{frameworkUsing} = 'Yes'" }
]},
{ name: "page2", questions: [
{ type: "radiogroup", choices: ["Yes","No"],isRequired: true, name: "mvvmUsing", title: "Do you use any MVVM framework?" },
{ type: "checkbox", choices: [ "AngularJS", "KnockoutJS", "React" ], hasOther: true, isRequired: true, name: "mvvm", title: "What MVVM framework do you use?", visibleIf: "{mvvmUsing} = 'Yes'" } ] },
{ name: "page3",questions: [
{ type: "comment", name: "about", title: "Please tell us about your main requirements for Survey library" } ] }
]
};
Step 4
Show Survey on the page
If you are using Bootstrap, tell the library to use the bootstrap css classes.
Survey.StylesManager.applyTheme("bootstrap");
As Survey Window
<ng-app></ng-app>
@Component({
selector: 'ng-app',
template: `<div id='surveyElement'></div>`,
})
export class AppComponent {
ngOnInit() {
var survey = new Survey.Model(surveyJSON);
survey.onComplete.add(sendDataToServer);
Survey.SurveyWindowNG.render("surveyElement", {model:survey});
}
}
Inside your web page
<ng-app></ng-app>
@Component({
selector: 'ng-app',
template: `<div id='surveyElement'></div>`,
})
export class AppComponent {
ngOnInit() {
var survey = new Survey.Model(surveyJSON);
survey.onComplete.add(sendDataToServer);
Survey.SurveyNG.render("surveyElement", {model:survey});
}
}
As Survey Window
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").SurveyWindow({
model:survey,
onComplete:sendDataToServer
});
Inside your web page
<div id="surveyContainer"></div>
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
model:survey,
onComplete:sendDataToServer
});
As Survey Window
var surveyWindow = new Survey.SurveyWindow(surveyJSON);
surveyWindow.show();
//Use onComplete event to save the data
surveyWindow.survey.onComplete.add(sendDataToServer);
Inside your web page
<div id="surveyContainer"></div>
var survey = new Survey.Model(surveyJSON, "surveyContainer");
//Use onComplete event to save the data
survey.onComplete.add(sendDataToServer);
As Survey Window
ReactDOM.render(
<Survey.SurveyWindow json={surveyJSON} onComplete={sendDataToServer}/>,
document.getElementById("surveyContainer"));
Inside your web page
<div id="surveyContainer"></div>
ReactDOM.render(
<Survey.Survey json={surveyJSON} onComplete={sendDataToServer}/>,
document.getElementById("surveyContainer"));
As Survey Window
<div id="surveyContainer"><survey-window :survey="survey"></survey-window></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });
Inside your web page
<div id="surveyContainer"><survey :survey="survey"></survey></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });
Step 5
Save survey data on the web server.
Your web server
function sendDataToServer(survey) {
var resultAsString = JSON.stringify(survey.data);
alert(resultAsString); //send Ajax request to your web server.
}
SurveyJS service
//You should get the Guid for storing survey data in surveyjs.io service storage
survey.surveyPostId = 'e544a02f-7fff-4ffb-b62d-6a9aa16efd7c';
//You may call survey.sendResult function as another option.
function sendDataToServer(survey) {
survey.sendResult('e544a02f-7fff-4ffb-b62d-6a9aa16efd7c');
}
Buy
Login/Register
