Skip to content
SupportHQ

Install guides / Webflow

Install the SupportHQ widget on Webflow

Webflow lets you add site-wide scripts from Site settings without touching the Designer. The SupportHQ widget is two script tags, so the whole install takes a few minutes, and the same snippet covers every page on the site.

This guide uses the floating launcher. For an embedded chat inside a specific page (a contact page, a help page), see the embedded mode note in the FAQ.

Requirements: Webflow publishes site-wide custom code only on paid Site plans. Check Webflow's current plan page for the exact tier.

Steps

  1. 1

    Copy your embed code from SupportHQ

    Open your project in the SupportHQ dashboard, go to Integrations, choose Web chat, and copy the HTML snippet. It already contains your project ID and any options you set.

  2. 2

    Open Site settings in Webflow

    From the Webflow dashboard, open the site, then Site settings. Go to the Custom code tab.

  3. 3

    Paste into Footer code

    Paste the snippet into the "Footer code" box (before the closing body tag). Do not put it in Head code: the init call needs the page body to exist.

  4. 4

    Save and publish

    Click Save changes, then Publish the site. Custom code does not run in the Designer preview or on unpublished changes.

Where it goes: Site settings, Custom code tab, Footer code box. This adds the widget to every page. For one page only, use that page's Page settings, Custom code, "Before </body> tag" instead.

The snippet

Replace YOUR_PROJECT_ID, or copy the ready-made version from Integrations, Web chat in your dashboard.

<script src="https://cdn.supporthq.app/widget/latest/supporthq-widget.js"></script>
<script>
  SupportHQWidget.init({
    projectId: 'YOUR_PROJECT_ID',
  })
</script>
Start free trial Book a call

Things that go wrong on Webflow

  • Custom code never shows in the Webflow Designer. Check the published site, not the canvas.
  • If you pasted in Head code, the init call runs before the body exists and the launcher may not mount. Move it to Footer code.
  • Webflow's built-in cookie consent or a third-party consent tool can block scripts until the visitor accepts. Test after accepting.
  • If you have both site-wide and page-level snippets, the widget can be initialized twice. Keep one.

Verify it works

  1. Open the published page in a private browser window. The launcher bubble should appear in the bottom-right corner within a second or two of the page loading.
  2. Click the bubble and ask a question your knowledge base covers. The reply should come from your content. Ask something it does not cover and confirm it says it does not know and offers to bring in a person.
  3. Open the same page on a phone. The panel should open full-height and the keyboard should not cover the reply.
  4. Check the SupportHQ inbox. The test conversation should be there with the page URL in its metadata.

FAQ

Can I add the widget to only some Webflow pages?

Yes. Instead of Site settings, open the Page settings for the page you want, scroll to Custom code, and paste the snippet in "Before </body> tag". Repeat per page, or use a Symbol/Component with an Embed element.

Where do I find my project ID?

In the SupportHQ dashboard, open your project, go to Integrations, and choose Web chat. The embed code shown there already contains your project ID and any options you set (theme color, position, required fields). Copy it from there instead of typing it.

Will the widget slow my site down?

The script loads from a CDN. Place it at the end of the body, or use the async pattern shown for React and Next.js, and it will not block your page from rendering. Your content paints first.

Can I put the widget inside the page instead of a floating bubble?

Yes. Add a container element and pass mode: "embedded" and, if needed, container: "#your-id" to init. The chat renders inside that element at the width and height you set.

Related solutions

Further reading