Which Weebly plans allow custom code embedding?
Weebly's Header Code and Footer Code fields are available on paid plans only — the free tier does not allow site-wide script injection. The Embed Code drag-and-drop element is similarly restricted; on free sites, any custom HTML you add is stripped out on publish.
The table below shows what each plan allows. If you are on the free plan and need a working chatbot immediately, jump to the hosted-page fallback section at the end of this guide.
| Plan | Header/Footer Code | Embed Code element | CSS editor |
|---|---|---|---|
| Free | No | No (stripped on publish) | No |
| Personal | Yes | Yes | Limited |
| Professional | Yes | Yes | Yes (Edit HTML/CSS) |
| Performance | Yes | Yes | Yes (Edit HTML/CSS) |
Weebly is now owned by Square, and new sites created through Square may use the Square Online editor rather than classic Weebly. The menu paths in this guide apply to classic Weebly. If your dashboard looks different — with a left-side panel labeled "Website" and a section called "Online Store" — you are on Square Online, which has different settings locations. See the Square Online note later in this guide.
How do you add a chatbot site-wide via Weebly Header Code?
The fastest path to a site-wide chatbot on Weebly is the Header Code field in the SEO settings panel. A script tag placed here loads on every page of your published site without touching individual page layouts.
- 1
Log in and open your site editor
Go to weebly.com, log in, and click Edit on the site you want to modify. This opens the drag-and-drop editing canvas.
- 2
Click Settings in the top navigation bar
Settings is one of the tabs running across the top of the Weebly editor (alongside Build, Pages, Theme, Store, and Apps). Click it to open the settings panel.
- 3
Select SEO from the Settings submenu
Inside Settings, click the SEO tab on the left side. Scroll down until you see the Header Code and Footer Code text areas.
- 4
Paste your script tag into the Header Code field
Place your chatbot script tag — for example, <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script> — into the Header Code text area. This field accepts any valid HTML, including <script> tags.
- 5
Click Save in the top-right corner
After pasting, click the Save button. Weebly saves the code to your site configuration, but it does not go live until you publish.
- 6
Click Publish
Click the orange Publish button in the top-right corner of the editor. Weebly deploys your changes. Once published, the chatbot will load on every page of your live site.
- 7
Test on the live URL, not the editor preview
Open your published site in a new browser tab. The Weebly editor canvas does not execute third-party scripts — the chatbot will show only as a grey placeholder box inside the editor. Confirm the chat bubble appears on your live site and send a test message.
How do you add a chatbot to a single Weebly page using the Embed Code element?
If you want the chatbot on specific pages rather than everywhere, Weebly's Embed Code element lets you drop a custom HTML block onto any individual page. This approach is also useful as a fallback if you prefer not to touch the SEO settings panel.
One important caveat: the Embed Code element is designed for inline page content, not floating widgets. Because the chatbot widget positions itself as a fixed overlay (bottom-right corner), it will appear correctly on the live site regardless of where you place the Embed Code element on the page. Place it at the bottom of the page to keep the editor canvas tidy.
- 1
Open the page you want to edit
In the Weebly editor, click the Pages tab and select the page where you want the chatbot to appear.
- 2
Find the Embed Code element in the Build panel
Click the Build tab at the top of the editor. In the left-side elements panel, locate the Embed Code element — it is listed under the "Basic" or "More" section depending on your plan. Drag it onto the page canvas, placing it near the bottom of the page.
- 3
Click "Edit Custom HTML"
Click the Embed Code block you just added. A prompt appears: "Click to add custom HTML". Click it to open the code editor box.
- 4
Paste your chatbot script tag
Paste your full script tag into the code editor. For Knobot, this is: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>
- 5
Click outside the box to commit
Click anywhere outside the code editor box to save the HTML. The element will show a grey placeholder in the editor canvas — this is normal. The actual widget only renders on the published live site.
- 6
Publish and verify
Click Publish. Open the specific page on your live site to confirm the chatbot appears.
How do you embed Knobot on Weebly specifically?
Knobot uses a single <script> tag with a data-key attribute — there is no plugin to install and no Weebly App Center integration required. Knobot's Premium plan at $79/month covers 10,000 messages per month with no per-conversation overage fees. A 14-day trial with 100 free preview messages is available before you commit.
- 1
Create a Knobot account
Sign up at knobot.org. After creating your business profile, Knobot scrapes your website using RAG (retrieval-augmented generation with Voyage embeddings and Gemini Flash 2.5) to build the initial knowledge base. No manual Q&A writing required.
- 2
Customize the widget
In the Knobot dashboard, set your primary color, welcome message, and lead-capture fields (name, email, phone number). These settings sync to the live widget automatically — you do not need to re-embed the script when you make changes.
- 3
Add your Weebly domain under Widget → Install
In the Knobot dashboard, go to Widget → Install and add your exact published domain (both apex and www variants, e.g., yourbusiness.com and www.yourbusiness.com). This authorizes the widget to load on your domain.
- 4
Copy the embed snippet
On the same Widget → Install screen, copy the script tag. It will look like: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script>
- 5
Paste into Weebly Header Code and publish
Follow the site-wide steps above: Settings → SEO → Header Code. Paste the snippet, click Save, then click Publish.
- 6
Test lead capture on the live site
Open your live Weebly site, trigger the chatbot, and submit a test lead. Confirm the lead appears in the Knobot dashboard under Conversations. Check that the email notification (if configured) arrives in your inbox.
What is the difference between Weebly classic and Square Online for embedding?
Square acquired Weebly in 2018. Since then, Square has been migrating users to Square Online — a separate website builder that shares the Square ecosystem but uses a different interface and different settings structure. The platform your site runs on determines which embed path to follow.
| Classic Weebly | Square Online | |
|---|---|---|
| Site-wide script injection | Settings → SEO → Header Code | Website → Pages → [page] → Settings → Advanced (varies by plan) |
| Per-page custom HTML | Embed Code drag-and-drop element | Code Block (HTML) content section |
| Custom code plan requirement | Personal plan or above | Free plan may be restricted; higher tiers required for head scripts |
| Editor preview shows widget | No — grey placeholder only | No — preview does not execute scripts |
If you are on Square Online and find that head-script access is locked to a higher plan tier, the Knobot hosted page (described below) is the cleanest alternative — no embedding required.
What should you do if the chatbot does not appear after publishing?
If you have published your Weebly site but the chatbot widget is not visible, work through these causes in order — they cover the vast majority of cases.
How do you fix z-index conflicts between the chatbot and Weebly themes?
Some Weebly themes assign high z-index values to sticky navigation bars, promotional banners, or cookie notice overlays. When these sit above the chatbot widget in the stacking order, the chat button becomes unreachable — it renders behind the other element.
To fix this, add a CSS override using Weebly's HTML/CSS editor (available on Professional and Performance plans under Theme → Edit HTML/CSS). Add the following to your custom CSS:
[data-knobot-widget] {
z-index: 99999 !important;
}Knobot's widget wrapper uses the data-knobot-widget attribute as its root selector. If you are using a different chatbot provider, replace the selector with the class or attribute that provider uses. After saving, publish the site and verify on the live URL.
Does Weebly's SSL or CSP block third-party chatbot scripts?
Weebly enforces HTTPS on all hosted sites, which means your chatbot vendor must also serve assets over HTTPS. A script tag pointing to an HTTP URL will be blocked by the browser as mixed content — a browser-level restriction, not something Weebly enforces. Knobot serves widget.js over HTTPS by default, so this is not a concern.
Content Security Policy headers instruct the browser to block scripts from sources not listed in the policy. Weebly does not apply a restrictive CSP on standard hosted sites — pasting a script tag into Header Code works without any policy modification. If you have a custom domain running through a third-party proxy or CDN that injects its own security headers, check that the proxy's CSP script-src directive allows www.knobot.org. For the vast majority of Weebly users on standard hosting, CSP is not a factor.
What is the alternative if your Weebly plan does not allow custom code?
If you are on the free Weebly plan, or on Square Online without head-script access, you still have a working option: the Knobot hosted chat page. Every Knobot account gets a dedicated URL at knobot.org/c/your-business that requires no embedding — it is a standalone page you can share as a link or QR code.