Installation

Script Tag (Recommended)

The simplest way to add Receiveo to any website.

Add the configuration and loader scripts to your HTML:

<script>
    window.receiveo = window.receiveo || {};
    window.receiveo.publicKey = "pk_live_YOUR_KEY_HERE";
</script>
<script src="https://widget.receiveo.com/loader.js" async></script>

The widget loads automatically and the chat bubble appears in the bottom-right corner.

Single-Page Applications

For SPAs (React, Vue, Next.js, etc.), add the scripts to your root HTML file (index.html, _app.html, etc.). The widget persists across client-side navigations automatically.

Add to index.html:

<head>
    <script>
        window.receiveo = window.receiveo || {};
        window.receiveo.publicKey = "pk_live_YOUR_KEY_HERE";
    </script>
    <script src="https://widget.receiveo.com/loader.js" async></script>
</head>

Add to app/layout.tsx or pages/_app.tsx:

import Script from 'next/script'

<Script id="receiveo-config" strategy="beforeInteractive">{`
    window.receiveo = window.receiveo || {};
    window.receiveo.publicKey = "pk_live_YOUR_KEY_HERE";
`}</Script>
<Script src="https://widget.receiveo.com/loader.js" strategy="afterInteractive" />

Add to your layout’s <head>:

<script is:inline>
    window.receiveo = window.receiveo || {};
    window.receiveo.publicKey = "pk_live_YOUR_KEY_HERE";
</script>
<script src="https://widget.receiveo.com/loader.js" async></script>

WordPress

Paste the script tag installation code into your theme’s header.php before the closing </head> tag, or use a plugin like “Insert Headers and Footers” to add it site-wide.

Verifying Installation

After adding the scripts, open your website and check:

The chat bubble appears in the bottom-right corner
Clicking it opens the chat window
Open the browser console — you should not see any [Receiveo] error messages

If something isn’t working, see Troubleshooting.