DocsWidget Code

Embed the Widget (Code Snippet)

A single line of script embeds the Alpheris chatbot into any website — no matter which platform. Here you'll learn where to find the snippet in the dashboard, where to place it in your source code, and what to watch out for with cache and reload.

The Code Snippet

Alpheris is embedded via a single <script> tag. It loads the widget loader from alpheris.com and identifies your shop via the data-alpheris-key attribute. Here's what the code looks like:

HTML

<!-- Alpheris Chat Widget -->
<script src="https://alpheris.com/widget.js" data-alpheris-key="INSTALL_ID" crossorigin="anonymous" async></script>
<!-- End Alpheris Chat Widget -->

Replace INSTALL_ID with your own install ID. In the ready-made snippet from the dashboard, this value is already filled in — so you just copy the complete code there and don't need to adjust anything by hand.

The install ID is the key that connects the widget to your account and your knowledge base. It is not secret (it appears in the public source code of your page), but it is bound server-side to your verified domain — see the Domain binding section further below.

Attributes in the Snippet

Attribute	Meaning
`src`	Loader script `https://alpheris.com/widget.js`. Loads the actual widget.
`data-alpheris-key`	Your install ID. Required. Without this value, no widget appears.
`crossorigin`	`anonymous` — loads the script without cookies/credentials, clean for CORS.
`async`	Loads the script asynchronously so your page is not blocked.

The data-key attribute is also accepted by the loader as an alias, in case your theme or tag manager alters the longer attribute. In the normal case, however, prefer data-alpheris-key.

Where do I place the code?

Add the snippet directly before the closing </body> tag — on every page where the chatbot should appear. In most cases this is a shared template (footer / layout), so a single spot is enough.

HTML

    <!-- … your page content … -->

    <!-- Alpheris Chat Widget -->
    <script src="https://alpheris.com/widget.js" data-alpheris-key="INSTALL_ID" crossorigin="anonymous" async></script>
  </body>
</html>

Why before </body> and not in the <head>? Thanks to async, the script doesn't block page rendering anyway, but placing it at the end of the <body> ensures that the rest of the markup loads first and the widget can reliably attach to the finished DOM.

Embed the snippet only once per page. If it is loaded twice (e.g. once via the theme and once via a tag manager), the widget may appear multiple times. On Shopify and WordPress, Alpheris handles the embedding automatically — don't add the code there additionally by hand.

Where do I find the code in the dashboard?

You'll find the ready-made snippet tailored to your shop in the console under Installation. The install ID is already inserted there.

Open the console

Switch to “Installation”

Open the Installation section in the menu. The default method is Code — the manual insertion of the snippet, which works on every platform.

Copy the snippet

Copy the displayed <script> block with the copy button. The data-alpheris-key install ID is already included.

Insert into the website

Place the snippet before </body> in your page template and publish.

Alongside the Code method, the “Installation” section also offers guided 1-click paths for Shopify (via app installation) and WordPress. With these paths the widget is embedded automatically — you then don't need the manual snippet.

Domain Binding

For security reasons, the install ID is bound to your verified domain. Widget requests are checked server-side against the host of the embedding page (strict domain mode, active by default). In practice, this means:

The widget works on the domain you have registered and verified in the dashboard.
For Shopify and WordPress installations, the domain is automatically verified along with it.
If you place the snippet on a different, non-approved domain, the widget deliberately does not load.

Which domains are allowed and how to add more is described in the Domains section.

For local testing or on a staging domain, you must also approve that domain in the dashboard — otherwise the domain check kicks in and the widget stays off.

Cache & Reload

After inserting it, the widget appears the next time the page loads — typically in the bottom right. If you don't see anything or a change doesn't appear, it's almost always due to caching:

Hard reload in the browser

Reload the page with a cleared cache: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS). Alternatively, use a private/incognito window.

Clear the page/CDN cache

If your platform uses a page cache or a CDN (e.g. a caching plugin or Cloudflare), clear its cache so the new markup with the snippet is served.

Configuration changes

Design, greeting and other settings are managed in the dashboard, not in the snippet. Such changes take effect automatically after a short time — there's no need to edit the code again; reloading the page is enough.

Good to know: Since the widget's entire behavior is controlled via the dashboard, you only need to embed the snippet a single time. Later adjustments to appearance, text or knowledge base require no code changes.

No widget appears?

If nothing still shows up after a hard reload and cleared cache, check the following in order:

Snippet present: Is the <script> tag really in the delivered HTML, before </body>? (View the page source.)
Install ID correct: Does the value in data-alpheris-key match the one from the dashboard?
Domain approved: Is the page running on a domain verified in the dashboard?
No duplicate script: On Shopify/WordPress, don't insert it additionally by hand.

You'll find more diagnostic steps under Troubleshooting.