Embedding the widget
Embed the Informly chat widget on your website with a single script tag and pick the layout that fits your page.
Embedding a widget is one script tag. Paste it into your HTML, set two attributes — the API URL and the widget public key — and the launcher appears on the page. This works on any site or framework that lets you inject a <script> tag, including static HTML, WordPress, Webflow, Next.js, and Rails.
The same snippet handles all four layouts (chat bubble, side panel, inline embed, fullscreen). The layout you picked when creating the widget tells the script how to render itself.
Getting the snippet
Open the widget
From the sidebar, go to Widgets and click the widget you want to embed.
Open the Embed tab
The Embed tab shows the snippet pre-filled with your domain and the widget's public key.
Copy and paste
Click Copy and paste the snippet into the <head> of your site or right before the closing </body> tag. Both placements work; <head> loads slightly earlier.
The snippet looks like this:
<script>
(function () {
const s = document.createElement('script');
s.src = 'https://YOUR-INFORMLY-DOMAIN/widget/informly-chat-widget.js';
s.setAttribute('data-informly-api-url', 'https://YOUR-INFORMLY-DOMAIN');
s.setAttribute('data-informly-widget-key', 'YOUR-WIDGET-PUBLIC-KEY');
document.head.appendChild(s);
})();
</script>The two data-informly-* attributes are the only things the script needs. The public key is safe in client code — it identifies your widget but doesn't grant write access.
Don't embed two widgets with the same public key on the same page. The launchers will collide and you'll get duplicate event tracking. Use two different widgets if you need two surfaces.
Layout reference
The default. A floating launcher sits in the corner you picked under Appearance, and clicking it opens a chat panel. Best for marketing sites and most product surfaces where chat shouldn't fight for attention with the main content.
No extra markup required — paste the snippet and the launcher appears.
Renders as a panel that slides in from the side and stays mounted while the user browses. Useful for apps where you want chat permanently visible without taking over the page.
Like the bubble, no extra markup — the script mounts itself.
Renders the chat inline at a specific spot in your page rather than as a launcher. You need to add a host element where you want it:
<div id="informly-widget"></div>The script finds the element and mounts the chat inside it. Good for a "Help" section on a contact page or a dedicated docs page sidebar.
Takes over the whole viewport. Best for a dedicated support page (e.g. /help or /ask) where the chat is the only content.
Paste the snippet on the page; the script renders the full-screen experience automatically.
Testing without embedding
If you don't have a test page handy, every widget has a public preview URL:
/widget/preview/{public_key}Open it directly in your browser to interact with a live copy of the widget. It uses the same configuration, documents, and persona as the embedded version, so you can validate answers before adding the snippet to your site.
Going live checklist
Before you embed on a production page, confirm:
- The widget is set to active (not draft or inactive)
- The project has its documents fully processed
- Allowed origins under Security include your production domain
- The persona, appearance, and conversation starters match your brand
What's next
Creating a widget
Create a new chat widget in Informly by picking a project, layout, theme, and behavior, then land on the configuration page to refine the details.
Appearance
Match the Informly chat widget to your brand with theme colors, launcher styling, and behavior controls like auto-open and conversation starters.