Adding Elfsight widget to Weebly website
Looking for instructions on how to add your Elfsight widget to your Weebly website? This step-by-step guide will navigate you through the process, ensuring a smooth integration every step of the way.
In this article
This article provides instructions for installing both inline widgets and floating ones. An inline widget is embedded at a specific spot on the page and disappears from view as users scroll through the content, while a floating widget is anchored to a certain position on a page and remains visible upon scrolling.
Adding your widget to a specific page (home page, contact, etc.)
- 1
-
Go to Weebly website's editor
Log in to your Weebly account, choose the website where you'd like to add the widget (1) → click Edit site (2):
- 2
-
Add code element to a page
Drag and drop the Embed Code element from the left-hand menu to the place where you'd like the widget to be displayed:
- 3
-
Paste the installation code
Press Click to set custom HTML (1) to open the pop-up menu. In the menu, adjust the widget’s Position (2) and click Edit Custom HTML (3): Paste your widget installation code in the field that comes up. The code will be applied automatically as you click outside this field:When installing the widget, sometimes it can display cropped on the website backend. In this case, please publish the page with the widget and check it in Incognito mode. The widget should display correctly after publication. - 4
-
Publish the changes
Click Publish in the right upper corner of your website to apply changes:
All done. You have successfully added the Elfsight widget to a specific page of your Weebly website!
Adding your widget to all pages
- 1
-
Go to Weebly website editor
Log in to your Weebly account, choose the website where you'd like to add the widget (1) → click Edit site (2):
- 2
-
Open Code Editor of your website
Choose Theme in the top navigation bar → click Edit HTML / CSS at the bottom of the left-hand menu: - 3
-
Paste the installation code
Click on the header.html file and paste the widget's installation code to the desired placement (if you are installing an inline widget) after the <body> tag line:
Next, open the no-header.html file and add the installation code to the desired placement after the <body> tag line there → click Save in the right upper corner to apply changes:
If you are installing a floating widget, simply add its installation code after the <body> tag within both the header.html and no-header.html files. - 4
-
Publish the changes
Click Publish in the right upper corner of your website to apply changes:
Great! You have successfully added the Elfsight widget to all pages of your Weebly website!