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
autoHideSeconds number 0 Seconds until bubble auto-hides (0 = never)
position string "bottom-right" "bottom-right" or "bottom-left"
bubbleColor string "#2563eb" Color of the chat bubble
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({ ... });