Skip to content
SupportHQ

Install guides / Framer

Install the SupportHQ widget on Framer

Framer sites add scripts in Site Settings under Custom Code, so the widget can be installed without editing any page. The snippet goes in the end-of-body slot and covers every page.

Framer is popular for marketing sites and product landing pages, which is where pre-sales questions land. A grounded agent turns those into answers instead of lost leads.

Requirements: Framer makes custom code available on paid site plans. Check Framer's current plan page for the tier.

Steps

  1. 1

    Copy your embed code from SupportHQ

    In the SupportHQ dashboard open your project, go to Integrations, choose Web chat, and copy the HTML snippet.

  2. 2

    Open Site Settings in Framer

    In the Framer editor click the site name or the gear icon to open Site Settings, then the General tab.

  3. 3

    Paste into "End of <body> tag"

    Scroll to Custom Code. Paste the snippet into the "End of <body> tag" box. Leave the head boxes empty.

  4. 4

    Publish

    Click Publish. Custom code runs on the published site, not in the editor preview.

Where it goes: Site Settings, General, Custom Code, "End of <body> tag".

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 Framer

  • The launcher does not show in the Framer editor or in Preview. Open the published URL.
  • Placing the snippet in the head slots can run init before the body exists. Use the end-of-body slot.
  • If you use Framer's built-in cookie banner or a consent tool, confirm scripts are allowed to load after consent.

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 embed the chat inside a Framer page section?

Yes. Add an Embed component with a div that has id="supporthq-chat-container", keep the site-wide script, and pass mode: "embedded" in the init options with a width and height.

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