JavaScript widget

You use the 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 place the JavaScript widget on your page, you 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. The following sections describe the configuration options in the JavaScript window.

Add JavaScript

You can either write your own JavaScript or simply link to an existing JavaScript file. Do one of the following:

  • Write JavaScript
    Directly type the JavaScript code into the code area. For example:
     var str = "Hello World!";

    NOTE: You do not need to add <script> tag, since it is automatically added. 

  • Link to JavaScript file
    To select a .JS file from your file system, do one of the following:
    • In the URL field, directly type the path to the JavaScript file
    • Click Select to browse the file system and choose a file from the your web application folder and its children.

Define where to include the HTML file

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, the implication is that the user has not closed the page before the page has been fully loaded.

More options

To optionally add a description for the JavaScript file, expand the More options section. The description is displayed only when pages are in edit mode, so that you can distinguish JavaScript files easily.

Model settings

You define model settings in the Advanced settings section. 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 is used only when the 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. You use this option when you want to enter JavaScript directly into the code area. If you enable this mode, any URL selected through Link to JavaScript file will not be added.
    • Reference
      You use this option when referring resource from your file system. If you enable this mode, 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 are:

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

Additional resources

ARTICLES

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Tags

Was this article helpful?

Next article

Embed code widget