How to Add JavaScript in Weebly Site?

Scripts are generally used to provide custom user triggered events and unavoidable part of any themes in Weebly. Though you may not use scripts to add any additional features Weebly site will have lot of scripts incorporated by default. Right click on your Weebly site and view the page source to see how many scripts are part of your site.

In addition you may also want to add scripts on your Weebly site to add additional features like scroll to top. In this article we will discuss various methods of adding scripts in Weebly site.

Different Ways of Adding Scripts in Weebly

Whether it is Weebly or any other site builder, there are three different ways to add scripts based on the need and usage:

1. Linking an external script file – effective on site level
2. Adding within header or footer of a page – effective on page level
3. Embedding within the content of a page – effective on element level

Linking an External Script File in Weebly

Let us take an example of adding a scroll to top feature on a Weebly site. In order to add this function we need a script file to be linked at site level centrally. You can upload the needed .js file under “Design > Edit HTML/CSS > Assets”. Click on the + icon then choose “Upload File(s)…” and upload the script file.

Once you have uploaded the file the next step is to link the file at site level under “Settings > SEO > Footer Code” section using the below code:

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scroll-to-top.js"></script>

Now publish your site and see the feature (scroll to top in this case) is effective on all pages.

Note: Uploading script file is considered as a theme modification in Weebly and hence you need to save your theme with a new name. Important point here is when you change the theme the upload files will be lost on the new site though the page level script links will be still available. So ensure to upload all custom scripts to your new theme whenever changing the theme.

Adding Script on Page Level

The above method enables the use of script file at site level which is suitable for features like scroll to top. Let us take another example of adding a tracking code to a particular page (say a product page) on your Weebly site. Though this can also be done in a similar manner as explained above the more effective way is to add the code at page level without modifying the theme. So even with the theme change the script will be effective.

Paste the code under “Pages > Select a page > Advanced Settings > Footer Code” and publish your site. Any scripts used in footer / header section at page level settings will be part of only that page of your site. You can right click on a published page and view page source to ensure the added script is part of the code.

Warning: Though it is recommended to add script files at footer section some scripts may not function properly and you can try to use at header level for the script to be working as expected.

Embedding Script at Element Level

At times you may need to apply the only at the particular element. In this case use “Embed Code” element to paste the script along with the HTML / CSS code.

Conflicting Scripts

Besides the actual functionality there are possibilities of one script conflicting with other on the site. This can be well explained with jQuery scripts where Weebly by default uses Google libraries for using the latest version of the script and the different version needed for a specific functionality may result in conflict. When you notice the script is not behaving as expected check out the source of the page to find the list of scripts used in that page and look for possible conflicts among them.

Warning: Ensure to use the script within < script >….< / script > tags when used at page or element level. The site level scripts as .js files should not have tags inside the file.