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.

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.

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.

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.