Embedding the Widget

The Verba AI widget can be embedded in two primary modes: floating (a chat bubble pinned to the bottom of the screen) and inline (mounted directly into an element on your page).

Floating mode (Default)

The floating widget is the default behavior. Simply omit targetElement from your configuration. It renders a fixed-position button which toggles the chat window.

javascript

import { VerbaChat } from '@verba-ai/chat-sdk'

const chat = new VerbaChat({
    tagId: 'YOUR_TAG_ID',
    bubble: {
        position: 'bottom-right',
    },
})

chat.init()

Programmatic Control

Floating widgets expose methods to open or close the widget without clicking the bubble:

javascript

chat.show() // Opens the chat
chat.hide() // Closes the chat

Inline mode

If you prefer to embed the chat as part of your page flow, pass targetElement to mount it inline. Note that inline mode omits the floating bubble entirely.

html

<!-- Create an empty container with a specific height -->
<div id="verba-chat-container" style="height: 600px;"></div>

javascript

import { VerbaChat } from '@verba-ai/chat-sdk'

const chat = new VerbaChat({
    tagId: 'YOUR_TAG_ID',
    targetElement: '#verba-chat-container', // CSS selector or HTMLElement
})

chat.init()

Cleaning up

If you are using frontend frameworks like React or Vue, remember to clean up the widget instance when components unmount to prevent memory leaks and duplicate DOM node injections.

javascript

// Removes all DOM elements, iframes, and event listeners
chat.destroy()