Examples

Headless Mode

Load the widget completely hidden and control everything from your own UI.

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

Then open the chat from your own button:

<button id="support-btn">Talk to us</button>

<script>
    document.getElementById('support-btn').addEventListener('click', () => {
        receiveo.api.open();
    });
</script>

The chat bubble never appears. The chat window opens and closes via your button.

Hide Bubble After Chat

Show the bubble initially, but hide it once the user has had a conversation.

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

The bubble shows on load. After the user opens and closes the chat, the bubble disappears. To bring it back:

receiveo.api.showBubble();

Show Bubble After First Interaction

Start hidden, then permanently show the bubble after the user’s first conversation.

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

<script>
    // After the widget loads, wait for the first chat to close
    receiveo.api.on('close', () => {
        receiveo.api.showBubble();
    });
</script>

Conditional Display

Show the widget only on certain pages:

<script>
    window.receiveo = window.receiveo || {};
    window.receiveo.publicKey = "pk_live_YOUR_KEY_HERE";

    // Only show on /help and /contact pages
    const showOnPages = ['/help', '/contact', '/pricing'];
    if (!showOnPages.some(p => window.location.pathname.startsWith(p))) {
        window.receiveo.showBubbleOnLoad = false;
    }
</script>
<script src="https://widget.receiveo.com/loader.js" async></script>

Open on Load (No Bubble)

Auto-open the chat window without showing the bubble — useful for dedicated support pages.

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

Identify Known Users

If your user is logged in, pass their info to Receiveo so operators see who they’re talking to:

// After your auth flow completes
receiveo.api.identify({
    email: user.email,
    name: user.name,
    customFields: {
        plan: user.plan,
        company: user.company,
    },
});

Run code only after the widget is fully loaded:

receiveo.api.on('ready', () => {
    console.log('Widget is ready!');
    console.log('Bubble visible:', receiveo.api.isBubbleVisible);
    console.log('Window open:', receiveo.api.isChatWindowOpen);
});

The ready event is safe to register at any time — if the widget is already ready, the callback fires immediately.