Installing the widget

One script tag, any website. This page covers the snippet, where it goes, how loading works, and how to verify the install.

On this page

The snippet
Where to put it
How it loads
Consent-gated installs
Verifying the install

The snippet

Copy the snippet from Chatbots → Channels → Website (it arrives with your bot key already filled in) and paste it immediately before the closing </body> tag of every page where the widget should appear.

HTML

<script
  src="https://cdn.oyechats.com/oyechats-widget.js"
  data-bot-key="bot-6a427d4529b9"
></script>

Attribute	Required	Purpose
`data-bot-key`	Yes	Identifies which chatbot to load. Public by design.

Everything else is configured server-side. Colours, copy, avatar, suggested questions, lead form, live chat and timings all live on the chatbot record and are fetched at load time. There are no other data attributes to set, and changing settings in the dashboard takes effect without editing your HTML.

Where to put it

Inside <body>, as the last element before </body>. The widget creates its own container element at load time.
On every page you want it on. A snippet in a shared footer, layout or template covers a whole site at once.
Once per page. Two copies of the script mount one widget, but the duplicate load is wasted bandwidth.

Not in <head>. The script needs a <body> to attach to. Placed in <head> it may run before the body exists and fail to mount.

How it loads

It finds itself
The loader locates its own <script> tag and reads data-bot-key.
It mounts into a shadow root
The UI renders inside a shadow DOM, so your site's CSS cannot leak in and the widget's CSS cannot leak out. It carries its own copy of its framework and does not touch your page's JavaScript.
It fetches its configuration
Appearance and behaviour come from a public settings endpoint keyed by your bot key. No account credentials are involved.
It renders the launcher
A floating button, bottom-right. The chat panel itself is only created when a visitor opens it.

Because the panel mounts on interaction rather than on page load, the widget contributes very little to your initial page weight.

Consent-gated installs

If your consent banner must approve the widget before it does anything, set a flag before the script loads and mount it yourself after consent is granted.

HTML + JS

<script>window.OYECHATS_ASYNC_INIT = true;</script>
<script
  src="https://cdn.oyechats.com/oyechats-widget.js"
  data-bot-key="bot-6a427d4529b9"
></script>

<script>
  // Call this from your consent manager's "accepted" callback.
  function onConsentGranted() {
    window.OyeChats.init();
  }
</script>

With the flag set, the script downloads but nothing mounts and no configuration request is made until init() is called. See Cookies for what the widget stores in the browser.

Verifying the install

Load the page in a normal tab and look for the launcher in the bottom-right corner.
Open the console. Widget messages are prefixed [OyeChats]. Run OyeChats.diagnose() for a snapshot of version, mount state and resolved configuration.
The dashboard marks the chatbot as installed after the widget has bootstrapped from your real domain at least once. Dashboard previews, the demo page and localhost do not count.

Nothing appearing? Start with Troubleshooting.

Something here wrong or missing? Tell us and name this page. We will fix it.