Integration Examples

The Verba AI chat widget is designed to be highly compatible with modern web frameworks. Whether you're using React, Vue, or simple JavaScript, the following examples will help you get started quickly.

NOTE: targetElement is optional. If not provided, a floating widget will appear by default in the bottom-right corner.

Framework Integrations

Choose your preferred framework or platform to see a detailed integration guide:

• React
• Vue
• Plain JavaScript
• Shopify

Best Practices

• SSR Awareness: Since the SDK interacts with the DOM and uses browser-specific APIs (like iframe), ensure that the initialization code only runs on the client-side. In Next.js, use 'use client' at the top of your component or check for typeof window !== 'undefined'.
• Token Refreshing: If you're using authenticated sessions, ensure that you provide a new token whenever it changes. You may need to destroy and re-initialize the widget if you need to update authentication dynamically.
• Container Sizing: Ensure your target element has a defined width and height, especially with inline mode, to prevent layout shifts.