How do I add a widget to my website?
By Zyff
Short answer
Copy the widget's code — usually a <div> that marks the spot and a <script> tag that fills it — and paste it into your page wherever that platform accepts HTML. On WordPress that is a Custom HTML block; on Shopify a Custom Liquid section; on Wix and Squarespace an embed or code block; on a hand-written site, anywhere in the <body>.
The <div> decides where the widget appears, so put it exactly there. The <script> can sit beside it or once at the end of the page — it finds its own containers.
Where the code goes
Every builder has both a per-page option and a site-wide option. Use the per-page one for something that belongs in a specific spot, and the site-wide one for anything floating — a chat bubble, a back-to-top button, an announcement bar.
- WordPress — Custom HTML block for one page; the theme footer or a code-snippets plugin for site-wide.
- Shopify — Custom Liquid section for one page; theme.liquid before </body> for site-wide.
- Wix — Embed HTML element for one page; Settings → Custom Code for site-wide.
- Squarespace — Code Block for one page; Settings → Advanced → Code Injection for site-wide.
- Webflow — an Embed element for one page; Project Settings → Custom Code for site-wide.
- Plain HTML — anywhere in the <body>, which is what all of the above eventually do.
When nothing renders
Four causes account for nearly every case, and they are quick to tell apart. Open your browser's developer console on the page — a well-built widget logs one line saying exactly what went wrong.
- The editor stripped the script tag. Many rich-text editors do; use the dedicated HTML or embed block rather than pasting into a text area.
- Only half the snippet was pasted. The div and the script are both required.
- The page is served over HTTPS and the script URL is HTTP. Browsers block that silently.
- The snippet was copied from an old tutorial and is missing its widget id, so there is nothing for the script to load.
Changing it later without re-pasting
This is the difference between a widget you will maintain and one you will abandon. If the snippet contains the widget's whole configuration, changing anything means editing your site again — on every page you put it on.
If the snippet only names a saved widget, you edit it in the builder and every site embedding it updates on its own. That is worth checking before you paste anything, because it is the difference between a five-second change and an afternoon.
FAQ Widget
A collapsible FAQ section with search, in four layouts.
Also asked
- Can I add a widget for a website?
- How do I insert a widget?
- Where does widget code go?
All of these have the same answer, so they share this page rather than each getting a near-identical one of their own.