HTML / JavaScript

Install on any website

Works on anything that lets you edit HTML: a static site, a landing page builder, Tilda, Webflow, Bitrix, a custom CMS.

Time needed: about 2 minutes.

Before you start

• An owni.chat account with at least one project. A project represents one website.
• Somewhere to paste a <script> tag — your template, or a "custom code" field.

Step 1 — copy your embed code

Open the dashboard, pick your project, and go to Installation. The snippet there already contains your project key (prefer copying from the dashboard rather than this template):

<script async src="https://app.owni.chat/widget/embed.js" data-project-key="YOUR_PROJECT_KEY"></script>

The key looks like pk_… and is public by design. It identifies a project; it does not authorize anything, so it is safe in page source. Server credentials (ak_live_…) are a different thing entirely and must never appear in a page.

Step 2 — paste it before the closing body tag

  ...your page...
<script async src="https://app.owni.chat/widget/embed.js" data-project-key="YOUR_PROJECT_KEY"></script>
</body>

Put it on every page where visitors may need help — product pages, contact, checkout, and your 404 page. The script is async, so it never blocks your page from rendering.

Step 3 — allow your domain

The widget only loads on domains registered for the project. In Installation → Domains, add the domain you just installed on. Every project allows up to 10 domains, which covers staging sites, subdomains and multisite setups.

Without this step the widget stays invisible and the browser console shows a 403.

Step 4 — verify

Reload your site. A chat bubble appears in the corner. Then click Check installation in the dashboard — it fetches your page and confirms the script was found.

If Content Security Policy (CSP) blocks the script

Some sites whitelist other third-party scripts but not owni.chat. The browser console then shows an error like:

Loading the script 'https://app.owni.chat/widget/embed.js' violates Content Security Policy directive "script-src …"

You have two ways to fix it. Prefer copying both from Installation in the dashboard — the host and project key are already filled in for your account.

Option A — keep the standard script, update CSP

Ask the site owner / hosting / Cloudflare admin to add our host to the existing Content-Security-Policy (do not replace the whole policy). Exact lines are also on Installation → Copy for CSP:

# Owni Chat — add these hosts to your Content-Security-Policy
script-src https://app.owni.chat;
connect-src https://app.owni.chat wss://app.owni.chat;
img-src https://app.owni.chat data: blob:;
media-src https://app.owni.chat blob:;
font-src https://app.owni.chat data:;

Use the same host that appears in your dashboard snippet (app.owni.chat or proxy.owni.chat, depending on your account).

Option B — CSP-safe alternate snippet

If the site already allows 'unsafe-inline' and blob:, you can paste this instead of the standard <script src=…> tag. It loads the widget without putting our host in script-src. Still requires connect-src to allow API calls to our host.

Copy the ready-made version from Installation (CSP-safe block). Template shape:

<script data-project-key="YOUR_PROJECT_KEY">
(function(w,d,b,k){
  w.__PRAVO_CHAT_WIDGET_API_BASE__=b;
  w.__PRAVO_CHAT_WIDGET_PROJECT_KEY__=k;
  fetch(b+"/widget/embed.js").then(function(r){
    if(!r.ok)throw new Error("OwniChat "+r.status);
    return r.text();
  }).then(function(code){
    var el=d.createElement("script");
    el.setAttribute("data-project-key",k);
    el.src=URL.createObjectURL(new Blob([code],{type:"text/javascript"}));
    (d.head||d.documentElement).appendChild(el);
  }).catch(function(e){console.error("[OwniChat] load failed",e);});
})(window,document,"https://app.owni.chat","YOUR_PROJECT_KEY");
</script>

Troubleshooting

What you see	Usual cause
No bubble at all	Script pasted outside <body>, or the page was cached. Hard-reload with Ctrl+F5.
403 in the browser console	The domain is not registered. Add it in Installation → Domains.
CSP / script-src error for embed.js	Our host is not allowlisted. Use Option A or Option B above.
Bubble appears twice	The snippet is in both the theme and a plugin. Remove one.
Nothing happens behind a cookie banner	A consent manager is blocking the script. Allowlist app.owni.chat or load it after consent.
Opened as file://… locally	Serve the HTML over http://localhost and add localhost under Domains. file:// has origin null and is blocked.

Inline chat instead of a floating bubble

To render the chat inside your layout — a support page, for example — add a container and point the script at it:

<div id="support-chat" style="height: 600px"></div>
<script async src="https://app.owni.chat/widget/embed.js"
        data-project-key="YOUR_PROJECT_KEY"
        data-target="#support-chat"></script>

Controlling the widget from your own code

window.OwniChat.open();
window.OwniChat.sendMessage('Where is my order?');
window.OwniChat.setVisitor({ name: 'Ann', email: '[email protected]' });
window.OwniChat.on('lead', (fields) => console.log(fields));

Calls made before the script finishes loading are queued and replayed, so you do not need to wait for anything.