HAL on Webflow, site-wide in one paste.

Step 1 — copy your widget code

In HAL: Settings → Widget → Install. Copy the snippet containing your project ID:

<script
  src="https://api.chatwithhal.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Step 2 — site-wide install (recommended)

1. Webflow Designer → Site settings (gear icon).
2. Custom code → Footer code.
3. Paste the snippet.
4. Save changes, then Publish — all pages get the widget.

Per-page install

Want HAL only on pricing or a landing page? Open the page in the designer → Page settings → Custom code → Footer code → paste → publish. Page-level code overrides nothing; it just scopes the snippet.

Step 3 — customize

• Match your Webflow brand palette in HAL (Settings → Widget → primary color).
• Keep the launcher clear of Webflow badges and cookie banners via edge offsets.
• Use a page-visit automation on your /contact page to open with intent-based copy.

Webflow Memberships (optional)

If you use Memberships, identify logged-in members so their chats attach to a contact. Add this in an Embed element on gated pages, or site-wide footer code guarded by the wf-logged-in state your setup exposes:

<script>
  window.addEventListener('load', function () {
    if (window.HalWidget && window._halMemberEmail) {
      HalWidget.identify({ email: window._halMemberEmail });
    }
  });
</script>

Render the signed-in member's email into window._halMemberEmail wherever your membership data is available (an Embed element on gated pages), then sign identities server-side if you act on them (identity verification).

Checklist

• Published? Custom code only ships on publish, never in preview.
• Launcher visible on mobile? Check offsets against your fixed nav.
• Teaser bubble written in your visitor's language?