MiniChat Embed Example

Learn how to easily integrate the MiniChat widget into your website with just a few lines of code

Local Testing Instructions

To test this example properly:

  1. Make sure your Next.js application is running on https://wonder.bayonai.com
  2. If your application is running on a different port, update the data-chat-url attribute in this HTML file
  3. Run a local web server to serve this example: npx http-server -p 8080 . from the project root
  4. Open the browser console to see debug messages (debug mode is enabled)

Current configuration:

Welcome to the Integration Page

This page demonstrates how to embed the MiniChat widget on your website. You should see a chat button in the bottom right corner of this page.

Click on the button to open the chat interface in an iframe.

How to Add the Chat Widget to Your Website

Basic Implementation

Add this single script tag to your website:

<script src="https://minichat-widget.bayonai.com/embed.js" 
      data-chat-url="https://wonder.bayonai.com/chat/applet?personaId=sol"
      data-fullpage-url="https://wonder.bayonai.com/chat/sol/"
      data-position="bottom-right"
      data-button-color="#4a6cf7"
      data-button-icon="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E"
      data-container-color="#ffffff"
      data-size="medium"
      data-z-index="9999"
      data-debug="false"
      data-enable-fullscreen="false"
      ></script>

Configuration Options

Customize the widget's appearance and behavior using these data attributes:

Attribute Description Default Values
data-chat-url URL of the chat application to load in the iframe Required Any valid URL
data-fullpage-url URL to open when clicking "Open in full page" null Any valid URL
data-position Position of the chat button bottom-right bottom-right, bottom-left, top-right, top-left
data-button-color Background color of the chat button #4a6cf7 Any valid CSS color
data-button-icon SVG icon for the chat button Message icon Data URL of an SVG
data-container-color Background color of the chat container #ffffff Any valid CSS color
data-size Size of the chat button and container medium small, medium, large
data-z-index z-index of the chat elements 9999 Any positive integer
data-debug Enable debug mode (shows console logs) false true, false
data-enable-fullscreen Show fullscreen toggle button false true, false
data-error-timeout Time in ms to show error messages 8000 Any positive integer

About MiniChat

MiniChat is a lightweight, embeddable chat solution that allows website owners to add a fully functional chat interface to their websites with just a single line of JavaScript code.

The widget is designed to be minimally intrusive, highly customizable, and easy to integrate.

Live Example

This page includes a working example of the MiniChat widget. Look for the circular chat button in the bottom-right corner.