How to Add Plugins and Widgets in Weebly Site?

Weebly offers basic elements to start building your website. These basic elements are no more sufficient to have a trendy site. Plugins and widgets are additional piece of code that enhances or adds a functionality of your Weebly site. Weebly themselves offer apps as enhancements to the base site builder. You can integrate the apps from app center seamlessly without additional code modification. But most of the apps are available on paid basis which is on top of your Weebly premium plans. Weebly solves this problem by allowing all users to freely modify the source code to add or enhance functionalities.

Components of Plugin or Widget

We offer 50+ free widgets or plugins for Weebly site with complete code and explanation. A plugin shall have maximum of the following components:

• CSS for styling
• Script for functioning
• HTML for formatting the content and including URLs
• Images and videos

There are multiple ways in Weebly to add a plugin or widget based on the components it has.

How to Add Plugins and Widgets in Weebly Site?

Below is the best practice to insert a plugin’s code on your Weebly site.

Code / Item	Page Level	Site Level
CSS	Add in header code section of the page.	Add in “main.less” or upload new external stylesheet and link in header code section under site’s settings.
JS	Add in footer code section of the page.	Upload new external script file and link in footer code section under site’s settings.
HTML	Use “Embed Code” element.	Modify page header in theme editor.
Media	Use external link or upload the files in theme editor and link inside HTML.	Use external link or upload the files in theme editor and link inside HTML.

The following articles will help you in understanding the code insertion:

• Add CSS in Weebly
• Add JavaScript in Weebly
• Upload images in Weebly
• Add videos in Weebly

Points to Understand

Though it is easy to add plugins, remember the following points:

• If the widget is very small or simply have few lines of embed script, then use embed code element to insert all the component. For example, AdSense ad code or any other small widget can be inserted directly on a page using embed code element.
• Use inline CSS within embed code element if the style needs to affect only the code on that page.
• You can upload PHP files in theme editor but they will not function.
• Inline CSS and CSS on the page header will be effective on the site editor. But any external styles can be only seen after publishing the site.
• Similarly, impact of scripts can be seen only after publishing the site.
• After uploading the files in theme editor, right click and get the URL link for using anywhere within and outside your site.

Can All Widgets Be Integrated?

The answer is no. You can add any frontend scripting and styling codes to your Weebly site. Any scripts affecting the server side functions will not work with your Weebly site. You can still embed the third party PHP scripts and call the function from outside your site. But trying to processing the data within your own Weebly server is not possible.

For example, you can embed a contact form code from third party site and receive email notification whenever a form is submitted. Here the processing of the submitted data will happen outside your Weebly site. You can’t insert a PHP script to process the data on your own site that is on Weebly server.