Skip to content
SupportHQ

Install guides / Carrd

Install the SupportHQ widget on Carrd

Carrd one-pagers are a common home for indie products, and the questions they generate are pre-sales questions. Adding the SupportHQ widget takes an Embed element and a paste.

Carrd embeds require a Pro Standard plan or higher. On the free plan the Embed element is not available.

Requirements: Carrd Embed elements require Pro Standard or higher.

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

    Add an Embed element

    In the Carrd editor click the plus button and add an Embed element anywhere on the page. Its position on the canvas does not matter for a floating launcher.

  3. 3

    Paste the code

    Set the Embed type to Code, paste the snippet, and set the placement to "Body End" so it runs after the page loads. Done.

  4. 4

    Publish

    Publish the site and open the live URL in a private window.

Where it goes: An Embed element, type Code, placement Body End.

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 Carrd

  • The launcher does not show in the Carrd editor. Check the published page.
  • Placement "Head" runs the init call before the body exists. Use Body End.
  • If the Embed element is missing, the site is on a free plan.

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 the widget show inside a section of my Carrd page?

Yes. In the Embed element include a div with id="supporthq-chat-container" above the script tags and pass mode: "embedded" with a height in the init options. The chat renders inside that section.

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