Add Survey into your Web Page
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
npm install survey-react
npm install survey-vue

Step 1

Add a link to your platform Angular2 or JQuery or KnockoutJS or React or Vue 

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.1.21/survey.css" type="text/css" rel="stylesheet" />

Link to the angular2 version of the library.

<script src="https://surveyjs.azureedge.net/1.1.21/survey.angular.min.js"></script>

Link to the jquery version of the library.

<script src="https://surveyjs.azureedge.net/1.1.21/survey.jquery.min.js"></script>

Link to the knockout version of the library.

<script src="https://surveyjs.azureedge.net/1.1.21/survey.ko.min.js"></script>

Link to the react version of the library.

<script src="https://surveyjs.azureedge.net/1.1.21/survey.react.min.js"></script>

Link to the vue version of the library.

<script src="https://surveyjs.azureedge.net/1.1.21/survey.vue.min.js"></script>

Step 3

Build JSON using

Visual Survey Creator

JSON example (Load it in Visual Survey Creator now)

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');
}

The survey example

Step 6 (optional)

Get the results of your survey using the SurveyJS Service.

Share the survey results via direct link. Current Survey Results

Show me example