Soliplex Chat Widget

This page demonstrates how to embed the Soliplex Chat widget into any website.

Widget Mode Selection

Choose which widget configuration to use:

Current mode: Not initialized

Basic Usage

<!-- Include the widget script -->
<script src="https://soliplex.github.io/chatbot/soliplex-chat.js"></script>

<!-- Initialize with a known server -->
<script>
  SoliplexChat.init({
    baseUrl: "https://my-server.example.com",
    // Single room mode (skip room selection):
    // roomId: "gemini_flash",
    // Multi room mode (show room selector):
    // roomIds: ["room1", "room2"],  // Or omit to show all rooms
    autoHideSeconds: 0,
    position: "bottom-right",
    bubbleColor: "#2563eb",
    title: "Chat with us"
  });
</script>

<!-- Or initialize without baseUrl to let the user choose -->
<script>
  SoliplexChat.init({
    // No baseUrl: the widget will prompt the user for a server URL
    title: "Connect to Chat"
  });
</script>

Configuration Options

Option Type Default Description
baseUrl string undefined Backend API URL. If not set, the widget prompts the user to enter a server URL
roomId string undefined Single room ID - skip room selection and go directly to this room
roomIds string[] [] (all rooms) Room IDs to show; empty or omit to show all available rooms
fallbackRoomIds string[] undefined Room(s) to use when none of the roomIds are accessible, tried in order; the first accessible one wins
noRoomsMessage string "No rooms available" Text shown when the user can't access any room (none of roomIds or fallbackRoomIds)
autoHideSeconds number 0 Seconds until bubble auto-hides (0 = never)
position string "bottom-right" "bottom-right" or "bottom-left"
bubbleColor string Soliplex primary Accent for the launcher bubble and primary buttons
theme string "auto" "light", "dark", or "auto" (follows the OS setting)
title string "Chat with us" Title shown in the chat header
tools array [] Custom client-side tools

Adding Custom Tools

You can define custom JavaScript functions that the AI agent can call:

<script>
// Define your tool functions on the window object
window.myTools = {
  getWeather: async function(args) {
    // Your implementation here
    return { temperature: 72, condition: "sunny", location: args.city };
  }
};

// Initialize with tools
SoliplexChat.init({
  baseUrl: "https://my-server.example.com",
  roomId: "default-room",
  tools: [
    {
      name: "get_weather",
      description: "Get the current weather for a city",
      parameters: {
        type: "object",
        properties: {
          city: { type: "string", description: "The city name" }
        },
        required: ["city"]
      },
      handler: "myTools.getWeather"  // Reference to window.myTools.getWeather
    }
  ]
});
</script>

API Methods

// Open the chat programmatically
SoliplexChat.open();

// Close the chat
SoliplexChat.close();

// Remove the widget completely
SoliplexChat.destroy();

// Re-initialize with different config
SoliplexChat.init({ ... });