Embedding Widget Codes in Weebly
Using Embed Code element is super easy in Weebly editor.
- When you are in Weebly editor, drag and drop the element in the content or header area.
- Select the element and then click “Edit Custom HTML” option.
- Paste your widget code in the box and click outside the element.
However, you need to be careful with the type of code you want to insert inside the element. Whether you want to add a new function as a widget or want to modify an existing feature, it needs three components:
- CSS styles
- Source HTML code
Using Standalone Embed Code Element
Smaller widgets with simple HTML and CSS code can be directly inserted on the page using embed code element. This is generally referred as inline styling and the result can be immediately seen on site editor without the need of publishing your site. For example, the output can be immediately seen when you add the following HTML table code inside an embed code element.
border:1px solid red;
However, using standalone embed code element is not recommended when you have scripts and larger CSS styles. You can consider using the below structure when your widget has CSS, JS and HTML codes.
Weebly Page Level Features
Pasting huge amount of code inside embed code element will drastically reduce the page loading speed. Also the functionality may not work as expected as all parts of codes are placed inside body of the HTML page. Therefore, we highly recommend placing your coded in the following manner:
- HTML codes inside body of the page using embed code element
- CSS into the header of the page using “Header Code” section of the page
- Scripts just before the closing of body using “Footer Code” section of the page
Note: Weebly site editor will not show the preview of the code pasted in header and footer code sections. Therefore, you need to publish the page to see the result of the code.
Using Weebly Site Level Features
Similar to page level features certain times you may need to add features effective at site level. For example, you want to add a custom button on different pages of your site. In this case, the required HTML part needs to be embedded on different pages using embed code element. The common CSS and the scripts can be added using one of the following methods:
- Paste the CSS and script codes in “Header Code” and “Footer Code” boxes respectively under “Settings > SEO” section. Learn more on how to use header and footer code sections in Weebly.
- Paste all your CSS code in “main.less” or “main_style.css” file available under “Themes > Edit HTML / CSS > Styles” section of Weebly Code Editor. In this case, do not include <style>…</style> tags and simply paste your CSS at the end of existing code. If you have an external CSS file to link, then upload the CSS files under “Assets” section of Code Editor and link them under header code section of the site settings. Learn more on how to add CSS in Weebly site.
Note: Weebly site editor will execute the code pasted in “main_style.css” file on the screen, but the scripts uploaded will not run on the editor. You need to publish the page to see the result of the code.
Complete Page Structure
The page structure should be like below for fast loading, hence embed the codes as explained above in appropriate places.
Linked external CSS under header code section uploaded in code editor.
Add CSS within <style>…</style> tags in page settings header code box.
Embed HTML code using embed code element.
Linked external scripts under footer code section uploaded in code editor.
Add scripts using <script>…</script> tags in page settings footer code box.
Customizing Options for Embed Code Element
Clicking on the embed code element will show you only one option for positioning as shown below.
You don’t need to use separate code within the widget for aligning. Instead, use the positioning options to align the widget left, center or right.
Important Points to Remember Before Using Embed Code Element
Though embed code element offers unlimited opportunities there are certain risks in using it heavily on your Weebly site.
- Sometimes it may affect other default Weebly functionalities. Generally, jQuery scripts may conflict with other default scripts loaded by Weebly.
- Weebly support will not help on issues caused by the custom code embedded in your site due to vast scope of the troubleshooting.
- Each piece of embedded code on your site will directly affect the page loading speed. Remember, this will impact the search engine ranking and user experience.
Hence, use embed code elements at your own risk without expecting any support from Weebly even you have purchased a premium plan.