How to Use Embed Code Element in Weebly?

Embed Code is one of the important elements in Weebly site editor grouped under “Basic” category. It is used to embed any HTML, CSS or JavaScript code for adding additional functionalities to your site. Earlier days, the embed code element was referred as “Custom HTML” and later the name was changed in the editor interface. There are multiple ways to use embed code element for adding widgets like newsletter subscription, call to action, custom buttons, etc. However, you need to understand how to use the element and get the code from reliable third-party sites to make site the widget is not affecting the loading speed of your site. In this article, we will explore various codes needed for embedding a complete widget using Embed Code element in Weebly site.

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.

Adding Custom HTML with Embed Code Element in Weebly

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
Adding JavaScript code
Source HTML code

Some widgets may have only HTML code while others may need complicated CSS and JavaScript. Since Weebly uses WYSIWYG site editor, you can see the result of an embedded HTML/CSS codes inside the editor without publishing the site.

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.

<style>
	.test {
		border:1px solid red;
	}
</style>
<table class="test">
	<caption>Test Table</caption>
	<thead>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	</tbody>
</table>

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

Most of the time, you will have a widget only to be added on a particular page but having huge CSS and scripts. In such scenarios, segregate the HTML, CSS and JavaScript codes and paste the codes inside embed code element, header code section and footer code section respectively. You can access the header/footer code sections for a page by navigating through “Pages > Select Your Page > SEO Settings”. Make sure to add CSS code within <style>……</style> tags and JavaScript within <script>……</script> tags.

Add Script and Styles in Weebly Page Level

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.
For scripts, upload your script files under “Assets” section of Code Editor and link them under footer code section of the site settings. Learn more on how to add JavaScript in Weebly site.

Add CSS and JS Code in Weebly Code Editor

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.

<html>
<head>
Linked external CSS under header code section uploaded in code editor.
Add CSS within <style>…</style> tags in page settings header code box.
</head>
<body>
.
.
.
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.
</body>
</html>

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.

Steve Roski

· Reply

October 26, 2016 at 7:34 AM

Using Weebly at my own risk is universal.
Is there actually a feature for which Weebly assumes ANY risk?

Is there any current and complete Weebly User Manual?

Does Weebly imply we can slug any old HTML into a page and expect it to work?
E.g. how does one position elements on the page, using absolute and relative positioning?
Are nested DIVs accepted?
Is there only one unit of embedded code?

WebNots Admin
· Reply

November 6, 2016 at 2:36 AM

That’s a tricky question – allowing to modify the theme or offer embed code element but not supporting. Unfortunately there can’t be a user manual for Weebly due to the platform changes they make. For example, the embed code element was previously known as custom HTML.

You can use any type of code and any number of embed code on a page as long as it is not conflicting with each other or with the source styles and scripts.

How to Use Embed Code Element in Weebly?