Add it to your website

Installing the widget is one script tag. It works on any site where you can edit the HTML or paste code into a “custom code” or “code injection” box — which covers WordPress, Webflow, Squarespace, Shopify, Wix and hand-written HTML alike.

Get your snippet

Your snippet is unique to your widget. Copy it from NineOffer rather than from this page.

1. Publish your flow. An unpublished flow has nothing for the script to serve, and the Embed panel withholds the snippet until you publish. See Publishing changes.

2. Open the Embed panel. It is in the Widget Builder, alongside the design and question panels.

3. Copy the snippet. The panel has a copy button; use it rather than selecting the text by hand, so you cannot truncate the widget ID.

4. Paste it into your site, immediately before the closing </body> tag.

5. Reload your page and confirm the widget appears.

What the snippet looks like

Roughly this, with your own widget ID in place of the example:

<script async
  src="https://app.nineoffer.com/widget.js"
  data-widget-id="00000000-0000-0000-0000-000000000000"
  data-show-button="true"></script>

data-show-button is false when the widget is in custom button mode; the Embed panel sets it for you.

Use your own snippet, not this one

That widget ID is all zeroes and will not load anything. The Embed panel gives you the real value — this example is only here to show you the shape of what you are pasting, so you can tell whether it landed in the right place.

Where to paste it

Plain HTML

Immediately before </body>, on every page the widget should appear on. If your site uses a shared footer include, put it there once.

WordPress

Appearance → Theme File Editor → footer.php, before </body>. On a managed host, use a header-and-footer-scripts plugin instead of editing theme files directly, so a theme update cannot wipe it.

Webflow

Project Settings → Custom Code → Footer Code. Publish the site afterwards; custom code does not take effect on the Designer preview.

Squarespace

Settings → Advanced → Code Injection → Footer.

Shopify

Online Store → Themes → Edit code → theme.liquid, before </body>.

Put it in the footer rather than the head. The script loads async and will not block your page either way, but footer placement means it can find the elements it needs to attach to.

Using your own button

If you set the widget to custom button mode in Widget Design, it will not render its own launcher. You trigger it from an element already on your page instead — your own “Get a quote” button.

Add data-nineoffer-widget to that element. The attribute goes on the element itself, not on the script tag, and anything carrying it opens the widget:

<button data-nineoffer-widget>Get a quote</button>

The script still goes in the footer as above. Any number of elements can carry the attribute, and elements added to the page later — by a slider or a single-page app — work too.

This is worth the extra step. A call to action inside your page content is read; a floating bubble in the corner is frequently not.

Checking it worked

• The widget or your trigger button appears on the page after a reload.
• Opening it shows the first question of your published flow, not an older one.
• Completing the flow produces a lead under Leads.

Run through it once yourself, end to end, on the live site. It is the only check that covers the whole chain.

Troubleshooting

Nothing appears. The snippet is usually in the wrong place — confirm it is inside <body>, not in the head or outside the tag entirely. On Webflow and Squarespace, confirm you published after saving.

It appears, but the questions are wrong or out of date. The flow was edited but not published. The script always serves the current published version.

It overlaps something in the corner. Change the widget’s position under Widget Design, or switch to custom button mode.

It works on some pages and not others. The snippet is on a per-page template rather than a shared one. Move it into the layout or footer include your whole site uses.