Documentation

Install Guide

A few minutes to set up — no developer required for most platforms.

Add Helin to your website

Add the Helin chat widget to any website in a few minutes. It's a single line of code that loads a tiny launcher bubble; the full chat opens in an isolated iframe, so it can never clash with your site's design.

This guide covers four ways to install it:

Any website (custom HTML)
WordPress
Webflow
Framer

Your install snippet

You'll find your unique snippet in the Helin dashboard under your agent's Deploy tab. It looks like this:

<script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>

src points to Helin's tiny loader script (about 1 KB, cached globally).
id is your agent's public key — this is what tells the widget which agent, knowledge base, and styling to load. Every agent has a different key.

Always copy the exact snippet from your dashboard. The examples in this guide use a placeholder key (YOUR_AGENT_KEY) — replace it with your real one, or just paste the snippet the Deploy tab gives you.

Where it goes: paste it just before the closing </body> tag on every page where you want the widget to appear. Placing it at the end of the body means your page's content loads first, so the widget never slows down how fast your site appears.

1. Any website (custom HTML)

If you manage your own HTML — a hand-coded site, a static site, or any framework where you control the page template — add the snippet right before </body>:

<!doctype html>
<html>
  <head>
    <title>Your site</title>
  </head>
  <body>
    <!-- ...your page content... -->

    <!-- Helin chat widget -->
    <script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>
  </body>
</html>

Tips

To show the widget on every page, add the snippet to your shared layout, template, or footer partial (whatever is included on all pages) rather than pasting it into each page by hand.
To show it on only some pages, add it only to those pages.
No other setup is required — you don't need to install anything or add CSS. The widget styles itself.

That's it. Reload your site and the launcher bubble appears in the bottom-right corner.

2. WordPress

You don't need to touch code files. The cleanest no-code method is a small header/footer plugin; a code-free theme option and a developer option are below.

Option A — Footer code plugin (recommended, no coding)

In your WordPress admin, go to Plugins → Add New.
Search for a header-and-footer code plugin such as WPCode or Insert Headers and Footers, then Install and Activate it.
Open the plugin's settings (e.g. Settings → Insert Headers and Footers, or Code Snippets → Header & Footer for WPCode).
Paste your Helin snippet into the Footer / Body box (the field that says it runs before </body>).
Save.

The widget now loads on every page of your site. This method survives theme updates, which is why it's recommended.

<script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>

Option B — Block theme (Full-Site Editing, WordPress 6.x)

If your theme uses the Site Editor, you can add the snippet as a Custom HTML block in the footer template:

Go to Appearance → Editor → Templates (or Patterns → Footer).
Edit the Footer template part.
Add a Custom HTML block at the bottom and paste the snippet.
Save.

Option C — Theme file (developers only)

If you prefer editing theme files, add the snippet to your child theme's functions.php using the wp_footer hook so it isn't lost on theme updates:

add_action('wp_footer', function () {
  ?>
  <script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>
  <?php
});

Use a child theme so your change survives when the parent theme updates. Avoid pasting directly into footer.php of a theme you don't control.

3. Webflow

Webflow lets you add custom code at the whole-site level or a single-page level. For a chat widget you almost always want it site-wide.

Site-wide (recommended)

Open your project and go to Site settings → Custom code (in newer Webflow: Project settings → Custom code).
Find the Footer code section (labelled "before </body> tag").
Paste your Helin snippet there.
Save changes, then Publish your site.

<script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>

The Footer code section applies to every page and appears just before the closing </body> tag — exactly where the widget should load.

A single page only

Open the page in the Designer.
Click the page settings (gear icon) for that page.
Scroll to Custom code → Before </body> tag.
Paste the snippet, Save, and Publish.

Note: custom code only runs on the published site (your .webflow.io staging or custom domain), not inside the Designer canvas. Publish, then open the live site to see the widget.

4. Framer

Framer has dedicated slots for custom code, including one that loads at the end of the <body> — the right place for a chat widget.

Open your project and go to Project settings → General (or click the settings icon), then find the Custom Code section. In newer Framer this is Site settings → Custom Code.
You'll see slots for Start of <head> tag, End of <head> tag, Start of <body> tag, and End of <body> tag.
Paste your Helin snippet into the End of <body> tag box.
Save, then Publish your site.

<script src="https://app.helin.ai/embed.js" id="YOUR_AGENT_KEY"></script>

Framer recommends placing functional scripts like chat widgets in the End of <body> tag slot so your design loads instantly and the widget loads right after.

Note: like Webflow, custom code runs only on the published site, not in the Framer editor preview. Publish and open your live URL to see the widget.

After you install

Reload your live site. The launcher bubble appears in the bottom-right corner. Click it to open the chat.
Don't see it? Check that: you pasted the snippet on a published page (Webflow/Framer need a publish; WordPress needs the plugin activated and saved); you used the exact snippet from your Deploy tab, including the correct id; the snippet is before </body>, not inside the <head>; no other tool on your site is blocking third-party scripts.
Change the look or greeting? The widget's name, color, launcher icon, and greeting messages are set in your Helin dashboard — no code changes needed. Updates apply automatically.
Multiple sites or products? Create a separate agent for each in Helin and use each agent's own snippet. (Number of agents depends on your plan.)

Need a hand? Reach us from your dashboard or at support@gethelin.com.

Docs Privacy Terms Home