Add Survey Builder into your page
The easiest way to add the survey into your web page, 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 Editor/Builder and SurveyJS library, or go to our cdn repo. It contains all versions since 0.12.0 (early 2017).

Finally you may install our npm package.
npm install surveyjs-editor

Step 1

Add links to external libraries:

Bootstrap

KnockoutJS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

Step 2

Add links to surveyjs.editor and surveyjs libraries

Add link to builder classes.
<link href="https://surveyjs.azureedge.net/1.0.18/surveyeditor.css" type="text/css" rel="stylesheet" />
Link to the knockout version of the library.
<script src="https://surveyjs.azureedge.net/1.0.18/survey.ko.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.0.18/surveyeditor.min.js"></script>

Step 3

Show Survey Builder on the page

Inside your web page

<div id="surveyEditorContainer"></div>
var editorOptions = {showEmbededSurveyTab: true}; //see examples below
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);
//set function on save callback
editor.saveSurveyFunc = saveMySurvey;

Step 4

Save and load surveys

Save survey

function saveMySurvey(){
var yourNewSurveyJSON = editor.text;
//send updated json in your storage  
}

Set Survey JSON directly

editor.text = yourSurveyJSON;

Load Survey from SurveyJS Service

editor.loadSurvey(yourSurveyId);

Step 5

Customize Builder via options

var editorOptions = {
 // show the embeded survey tab. It is hidden by default
 showEmbededSurveyTab : true,
 // hide the test survey tab. It is shown by default
 showTestSurveyTab : false,
 // hide the JSON text editor tab. It is shown by default
 showJSONEditorTab : false,
 // show the "Options" button menu. It is hidden by default 
 showOptions: true                          
};
// pass the editorOptions into the constructor. It is an optional parameter.
var survey = new SurveyEditor.SurveyEditor("surveyEditorContainer", editorOptions);

Step 6

Optionally use Ace Code Editor, instead of textarea

Optionally use Select2, instead of standard select for element selector

Please note, select2 requires jQuery library

Add link to ace editor library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/worker-json.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-json.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js" type="text/javascript"></script>
Add link to select2 jQuery plugin.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" type="text/javascript"></script>