Website Iframe

The iframe embed puts the chat inside your page, in a spot you choose, not floating in the corner. You decide where it sits and how big it is, and it behaves like any other block in your layout. Use this when the chat is the page (a support page, a 'Talk to us' section) rather than something that follows the visitor around.

Widget or iframe?

Both run the same agent and the same knowledge base. The only difference is where the chat appears.

	Website widget	Website iframe
Where it appears	Floating button, bottom-right	Inline, exactly where you paste it
Visitor has to	Click to open	Nothing, it's already there
Takes up layout space	No	Yes, as much as you give it
Best for	Site-wide support on every page	A dedicated support or contact page
Install location	Before `</body>`	In the page body, where you want it

You can use both. Many teams run the widget site-wide and put an iframe on their /support page.

Your install snippet

Find it in your Helin dashboard:

Open your agent.
Go to the Playground.
Click Deploy, then Website iframe.
Click Copy snippet.

It looks like this:

<iframe
  src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0"
></iframe>

Part	What it is
`src`	Your agent's chat URL. The last piece is your agent's public key: it selects which agent, knowledge base, and styling loads.
`width="100%"`	Fills whatever container you put it in.
`min-height: 700px`	The chat needs vertical room. Below about 500px it gets cramped.
`frameborder="0"`	Removes the browser's default border.

Always copy the real snippet from your dashboard. The examples here use a placeholder (YOUR_AGENT_KEY), which won't load anything.

Why an iframe

The chat runs in its own sealed frame. Your page's CSS can't reach in and break the chat's layout, and the chat's styles can't leak out and break your page. You can drop it into any design without worrying about collisions.

Sizing it

The iframe fills the container you put it in, so the container is what you control.

Full-page chat

The chat takes over the whole viewport:

<div style="height: 100vh;">
  <iframe
    src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
    width="100%"
    style="height: 100%; border: 0;"
  ></iframe>
</div>

A section inside a normal page

A fixed-height block that sits among your other content:

<section style="max-width: 760px; margin: 48px auto; padding: 0 20px;">
  <h2>Ask us anything</h2>
  <p>Our AI assistant answers instantly, day or night.</p>

  <iframe
    src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
    width="100%"
    style="height: 620px; border: 1px solid #e5e7eb; border-radius: 12px;"
  ></iframe>
</section>

Rounded corners and a shadow

The iframe is just an element. Style it like any other:

<iframe
  src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
  width="100%"
  style="
    height: 640px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 13, 30, 0.12);
  "
></iframe>

Mobile

Fixed pixel heights get uncomfortable on small screens. Give it a viewport-relative height with a floor:

<style>
  .helin-frame {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: 12px;
  }

  @media (max-width: 640px) {
    .helin-frame {
      height: calc(100vh - 120px); /* leaves room for your header */
      min-height: 480px;
      border-radius: 0;
    }
  }
</style>

<iframe class="helin-frame" src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"></iframe>

Rule of thumb: give it at least 500px of height. The chat has a header, a message area, and a composer. Squeeze it shorter and there's almost nowhere for messages to go.

Install: any website (you edit the HTML)

Paste the snippet wherever you want the chat to appear in the page body:

<body>
  <h1>Support</h1>
  <p>Ask our assistant, it knows our docs inside out.</p>

  <iframe
    src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
    width="100%"
    style="height: 700px; border: 0;"
  ></iframe>
</body>

Unlike the website widget, this goes in the body content, not before </body>. Its position on the page is the whole point.

Install: WordPress

Option A: Custom HTML block (recommended)

Edit the page where you want the chat (e.g. your Support or Contact page).
Click + to add a block and choose Custom HTML.
Paste your iframe snippet.
Update the page.

Use the Custom HTML block, not a Paragraph block. WordPress strips iframe tags from ordinary text blocks.

Option B: Elementor, Divi, or another page builder

Look for a widget called HTML, Code, or Custom Code, drag it where you want the chat, and paste the snippet inside. In Elementor it's the HTML widget.

If the iframe disappears after saving

Some WordPress setups strip iframes from posts for non-admin authors. Either:

add the snippet through a page builder's HTML widget (they bypass the filter), or
use a shortcode plugin such as WPCode to register the snippet and place it with a shortcode.

Install: Shopify

Add the chat to a Shopify page (like /pages/support) using a custom section or the page's HTML editor.

Option A: page HTML editor (simplest)

In your Shopify admin, go to Online Store › Pages.
Open the page where you want the chat, or Add page.
In the content editor toolbar, click the <> button (Show HTML / Edit HTML).
Paste your iframe snippet into the HTML.
Save.

<iframe
  src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
  width="100%"
  style="height: 700px; border: 0;"
></iframe>

Shopify's rich text editor sometimes strips or reformats iframe tags when you switch back out of HTML mode. If the chat vanishes after saving, use Option B instead: it's more reliable.

Option B: Custom Liquid section (recommended)

This survives editing and gives you a block you can drag around in the theme editor.

Go to Online Store › Themes › Customize.
In the top page selector, choose the page you want (e.g. Pages › Support).
Click Add section, then Custom Liquid.
Paste your iframe snippet into the Custom Liquid box.
Drag the section where you want it, then Save.

Option C: theme code (developers)

Online Store › Themes, three-dots, then Edit code.
Create a new section under Sections, e.g. helin-chat.liquid.
Paste the snippet below.
Save, then add the section to any page from Customize › Add section › Helin chat.

<div class="helin-chat-wrap" style="max-width: 900px; margin: 40px auto; padding: 0 20px;">
  <iframe
    src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
    width="100%"
    style="height: 700px; border: 0; border-radius: 12px;"
  ></iframe>
</div>

{% schema %}
{ "name": "Helin chat", "settings": [], "presets": [{ "name": "Helin chat" }] }
{% endschema %}

Duplicate your theme before editing code (three-dots, then Duplicate) so you can roll back.

Install: Webflow

In the Designer, drag an Embed element (Add panel › Components › Embed) onto the page where you want the chat.
Paste your iframe snippet into the code editor that opens, then Save & Close.
Set the Embed element's width to 100% and give its parent a height, or set the height directly in the snippet's style.
Publish.

The Embed element shows a placeholder in the Designer canvas. The chat itself only renders on the published site.

Install: Framer

Add an Embed component to your page (Insert › Utility › Embed).
Choose HTML and paste your iframe snippet.
Resize the component on the canvas: set it to Fill width and give it a fixed height of at least 700px.
Publish.

Install: Squarespace

Edit the page and add a Code block where you want the chat.
Paste your iframe snippet.
Make sure the block's type is set to HTML.
Save.

Code blocks are available on Squarespace Business plans and above.

Install: Wix

In the Editor, click Add › Embed › Embed a Widget (or Embed HTML).
Click Enter Code and paste your iframe snippet.
Drag the element's handles to size it, making it at least 700px tall.
Publish.

Install: React and Next.js

It's a plain element. Just render it:

export default function SupportPage() {
  return (
    <main style={{ height: "100vh" }}>
      <iframe
        src="https://app.gethelin.com/agent/YOUR_AGENT_KEY"
        title="Chat with support"
        style={{ width: "100%", height: "100%", border: 0 }}
      />
    </main>
  );
}

In JSX, use style={{ ... }} and title (for screen readers). frameborder isn't valid JSX, so use border: 0 in the style object instead.

Customizing the chat

The iframe shows the same chat as the widget, so it uses the same settings. Edit them in your agent's Playground:

Setting	Where	What it does
Display name	Content tab	Name in the chat header.
Initial messages	Content tab	Shown before the visitor types, one per line.
Message placeholder	Content tab	Hint text in the message box.
Quick chats	Content tab	Tappable suggested questions.
Avatar	Style tab	The agent's picture.
Primary color	Style tab	Header and accent color.
Chat bubble color	Style tab	The launcher button color (only affects the widget, not the iframe).

Changes go live automatically. Save in the Playground and the iframe picks them up on the next page load. You never edit the snippet.

The iframe's size, border, corners and position are yours to control with CSS on your page. The chat's colors and content are controlled in Helin.

Troubleshooting

The frame is blank or white

Check the URL in src is exactly the one from your dashboard, including the full agent key.
Open the src URL directly in a browser tab. If the chat loads there, the problem is on your page (CSP or a stripped tag). If it doesn't load there, the key is wrong.
Check your browser console (F12) for a Content Security Policy error, see below.

The chat is squashed or scrolls awkwardly

The container is too short. Give the iframe at least 500px, ideally 640 to 700px, of height. If you've set height: 100%, remember that only works when the parent element also has a height, otherwise it collapses to nothing.

My CMS deletes the iframe when I save

Many editors strip iframes from rich-text fields. Use the platform's dedicated code or embed block instead: Custom HTML block (WordPress), Custom Liquid section (Shopify), Embed element (Webflow and Framer), Code block (Squarespace), Embed HTML (Wix).

Console error about Content Security Policy

If your site sets a CSP, allow Helin as a frame source:

frame-src  'self' https://app.gethelin.com;
connect-src 'self' https://app.gethelin.com;

It works on desktop but feels cramped on mobile

Use the responsive height pattern from Sizing it above, or switch to the website widget on small screens: the widget opens fullscreen on phones automatically.

Frequently asked

Can I use the iframe and the widget together?

Yes. A common setup is the widget site-wide plus an iframe on your support page. They share the same agent, knowledge base, and conversation history.

Does the iframe follow the visitor between pages?

No. It lives on the page you put it on, and reloads when the visitor navigates away and back. If you want chat that follows people around the site, use the website widget.

Can I set the height to fit the content automatically?

Not currently. Set a fixed height (or a viewport-based one) on the iframe or its container.

Is the conversation private from my page's JavaScript?

Yes. The iframe is a separate browsing context. Your page's scripts can't read what's typed inside it, and vice versa.

Where do I see the conversations?

In your agent's Activity tab, same as the widget.

Docs Blog Privacy Terms Refund Home