Installation requires two script tags: a configuration object and the async widget loader. Place both before the closing </body> tag on every page where you want the widget to appear.
Basic installation
html
<!-- 1. Configuration -->
<script>
window.BuzzBipChat = {
widgetId: "wdg_abc123"
};
</script>
<!-- 2. Widget loader -->
<script async src="https://cdn.buzzbip.com/widget/v1/chat.js"></script>Single Page Applications (React, Vue, Next.js)
Load the widget once after the app mounts. In Next.js, add the snippet in your root layout or use a client component with useEffect.
tsx
'use client';
import { useEffect } from 'react';
export function BuzzBipWidget() {
useEffect(() => {
window.BuzzBipChat = { widgetId: 'wdg_abc123' };
const script = document.createElement('script');
script.src = 'https://cdn.buzzbip.com/widget/v1/chat.js';
script.async = true;
document.body.appendChild(script);
return () => { script.remove(); };
}, []);
return null;
}Verify installation
- Open your website in a browser
- Confirm the chat bubble appears in the configured corner
- Send a test message and verify it appears in your BuzzBip inbox
- Check the browser console for errors if the widget does not load
Do not load the widget inside an iframe on a different domain unless cross-origin messaging is configured. The widget must run in the top-level page context.
