Publish the widget on your site

The IperChat widget works on any site — WordPress, Shopify, Squarespace, static sites, SPAs. The standard integration is a single <script> tag pasted before the closing </body>.

The snippet

Copy it from the ops panel, “Documentation” section (side menu → Agents group): the Tenant ID is filled in automatically in the data-tenant-id field. The “Copy snippet” button above the code copies it to your clipboard.

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="YOUR_TENANT_ID"
  data-position="bottom-right"
></script>

Four attributes:

src — the bundle URL (always the same).
data-iperchat-auto-init — starts the widget on page load. If you want to control it from JavaScript, remove this attribute and call window.IperChat.init({...}) whenever you prefer: see Control the widget from JavaScript.
data-tenant-id — identifies your space. You’ll find it in “My Tenant” in the panel (the small string under the page title), or already filled in the snippet under “Documentation”.
data-position — bottom-right (default), bottom-left or inline.

Integration modes

The same tenant powers several experiences. Choose via the data-position attribute or by loading a different bundle.

The default. Discreet button in the corner, click to open the chat. This is what you get with the snippet above.

Inline on the page

Set data-position="inline" and the script looks for a <div id="iperchat"> container on the page. The chat renders embedded in that section, not floating. To use another element, put its ID in data-container-id (for example data-container-id="support-chat").

<div id="iperchat" style="height: 600px; max-width: 800px;"></div>

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="YOUR_TENANT_ID"
  data-position="inline"
></script>

Useful for “Contact us” pages, animated FAQs, support hubs.

Load only when the visitor opens the chat

By default the widget loads as soon as the page does: it uses the browser’s storage (localStorage, plus the sign-in database for visitors who can sign in) and fetches your widget settings. If your site has no consent banner covering this, add data-load="on-open". Until the visitor opens the chat, the widget then stores nothing, sets no cookie and sends no request to IperChat. Inline, the chat shows a start button and loads on the first click.

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="YOUR_TENANT_ID"
  data-load="on-open"
  data-launcher-text="Chat with us"
  data-primary-color="#174de6"
></script>

Your panel settings load only once the chat opens, so the button uses these optional attributes:

data-launcher-text — the button label. Without it, the button is the round chat icon.
data-primary-color and data-secondary-color — hex colours such as #174de6. A single colour fills the whole button.

Once opened, the widget works as usual. Sign-in storage starts only if your agent lets visitors sign in; with Anonymous-only mode (in “My Tenant”) it never starts. From JavaScript, pass loadOnOpen: true (with launcherText and theme if you like) to window.IperChat.init({...}).

Standalone page on your own domain

A full-screen chatbot page served from your own domain (e.g. assistant.yoursite.com), with no visible reference to IperChat. A fully white-label experience for brands that don’t want to share the chat.iperchat.ai host.

Ask the administrator to set it up: DNS and the SSL certificate are configured together with you.

Different settings on specific pages

Every configuration in “Agent Configurations” has an Origin ID. The one matching your Tenant ID is the default and applies everywhere. To give one page its own greeting, model or instructions:

In “Agent Configurations”, create a new configuration. As the Origin ID use a short name such as contacts-page. The panel shows the exact ID it will save.
On that page only, add data-origin-website with that ID to the snippet:

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="YOUR_TENANT_ID"
  data-origin-website="contacts-page"
></script>

Post-integration checks

”Unauthorized domain” error

For security, the backend compares the calling domain with the list of authorized domains on your tenant. If there’s no match, the agent doesn’t respond.

To authorize the domain:

Open “My Tenant” in the ops panel.
Under Settings you’ll find the Allowed domains field — a comma-separated list.
Add the exact domain (e.g. www.yoursite.com) to the end of the list and click Save.

Cache, CDN, defer JS

Three common things that can hide the widget:

Caching plugins (W3 Total Cache, WP Rocket, etc.) — purge the cache after saving the snippet.
CDN (Cloudflare, Bunny) — purge the cache there too.
Defer JS / aggressive minification — exclude iperchat.iife.js from defer/inline rules.

None of this is specific to IperChat: it applies to any third-party script.