Embed Modes
Staffify widgets support two embed modes. Choose based on whether you want the widget floating over your page or embedded inside a specific element.
| Mode | Best For | How It Appears |
|---|---|---|
| Floating (Default) | Most websites, contact pages | Fixed bubble in the page corner, expands on click |
| Inline | Dedicated support pages, embedded help centers | Fills a container element you define in your HTML |
Floating Mode
The default mode. A circular bubble appears in the corner of the page. Clicking it opens the full chat interface. The widget stays visible as users scroll.
<!-- Step 1: Include the script -->
<script src="https://widget.staffifyai.com/widget.js" async></script>
<!-- Step 2: Initialize -->
<script>
window.StaffifyWidget = window.StaffifyWidget || {};
StaffifyWidget.init({
widgetKey: 'w_your_key_here',
// position: 'bottom-right' // or 'bottom-left'
});
</script>Position Options
| Value | Description |
|---|---|
| bottom-right | Default — bubble appears in the bottom-right corner |
| bottom-left | Bubble appears in the bottom-left corner |
Inline Mode
Embed the widget inside a specific HTML element. The widget fills the container completely. Useful for dedicated support pages, embedded help centers, or chat interfaces that are part of your page layout rather than floating over it.
<!-- Step 1: Create a container element -->
<div id="staffify-chat" style="width: 100%; height: 600px;"></div>
<!-- Step 2: Include the script -->
<script src="https://widget.staffifyai.com/widget.js" async></script>
<!-- Step 3: Initialize with container -->
<script>
window.StaffifyWidget = window.StaffifyWidget || {};
StaffifyWidget.init({
widgetKey: 'w_your_key_here',
container: '#staffify-chat'
});
</script>Container sizing: The container element must have an explicit height. If height is 0 or auto, the widget will not be visible. A minimum height of 400px is recommended.
Selector Formats
| Format | Example |
|---|---|
| ID selector | '#staffify-chat' |
| Class selector | '.chat-container' |
| DOM element | document.getElementById("staffify-chat") |