JavaScript widget

Use JavaScript widget to embed JavaScript code in your page. JavaScript is used to enhance the functionality of your website. For example, you can use JavaScript to validate user input.

After you have dragged the JavaScript widget on your page you can configure which JavaScript to include.

NOTE: If you add JavaScript widget in a page template the JavaScript is applied to all the pages that use this template. If you add it on one particular page, the JavaScript is applied only to this page.

To do this, click Edit button in the upper-right corner of the widget. In the JavaScript window that appears, configure the following:

###Add JavaScript

Radio buttons allows you to choose from different options to add JavaScript on your page.

• Write JavaScript

Choose Write JavaScript radio button, to directly type the JavaScript into the code area. You do not need to add <script> tag, since it will be added automatically, therefore start writing JavaScript directly. For example:

var str = "Hello World!";

• Link to JavaScript file

Choose Link to JavaScript file radio button in order to select already prepared .js file from your file system. You will see URL field where you can directly type the path to the JavaScript file, or press the Select button to browse the file system. You are able to choose file from the your web application folder and its children.

###Where to include in HTML?

In Where to include in HTML? section, select one of the following:

• In the head tag
  The JavaScript is executed immediately when a page starts to load.
• Where the widget is dropped
  The JavaScript is executed when the widget is being loaded.
• Before the closing body tag
  The JavaScript is executed at the end of the page’s loading process.
  For example, this option is often used to embed page tracking code, such as Google Analytics, because if this code is executed, it means that the user has not closed the page before the page has been fully loaded.

###More options

Expand More options section for the following:

• Description
  Enter free text description for the referenced JavaScript. This field is added for your convenience only and is displayed only while page is in edit mode. You can type description of the JavaScript file in order to distinguish it easily.

###Advanced settings

In Advanced settings, you specify individual properties of the widget:

####Model settings

Model settings display all properties directly bound to the JavaScript widget model. Access these properties by clicking the Model button in Advanced settings.

• Description
  Gets and sets the description of the JavaScript that is referenced. This field is for your convenience only.

• FileUrl
  Gets and sets resource URL which will be referenced. This FileUrl will be used only when widget is in "Link to JavaScript file" mode.

• InlineCode
  Gets and sets the inline code that is displayed in the code area while widget is in "Write JavaScript" mode.

• Mode
  Defines the supported ways to refer JavaScript through the widget. There are two possible options:

  • Inline
    This is the default option. It is used when entering JavaScript directly into the code area. Refer to the Write JavaScript tab. While this mode is enabled any URL selected through Link to JavaScript file will not be added.
  • Reference
    It is used for referring resource from your file system. This refer to the Link to JavaScript file tab. While this mode is enabled any JavaScript typed directly into Write JavaScript code area will not be included.

• Position
  Gets and sets the position in the document where the code will be inserted. The possible values you can chose from are:

  • Head
    This is the default option.
  • InPlace
  • BeforeBodyEndTag