Soenneker.Blazor.Chatwoot 3.0.202

Soenneker.Blazor.Chatwoot

A Blazor interop library for Chatwoot, the open-source customer engagement suite.

✨ Features

• 📦 Lightweight Blazor component wrapper for the Chatwoot JS SDK
• 🔄 Full .NET interop with JavaScript events
• 📡 Supports event callbacks like OnOpen, OnMessage, and OnError
• ⚙️ Clean integration using dependency injection
• 🧪 Supports unit testing with IChatwoot abstraction

📦 Installation

dotnet add package Soenneker.Blazor.Chatwoot

Register the interop in DI:

public static async Task Main(string[] args)
{
    builder.Services.AddChatwootInteropAsScoped();
}

🚀 Usage

🧩 Add to a Razor component

<Chatwoot Configuration="_config"
          OnOpen="HandleOpen"
          OnClose="HandleClose"
          OnReady="HandleReady"
          OnMessage="HandleMessage"
          OnError="HandleError" />

🧠 Component code-behind

@code {
    private readonly ChatwootConfiguration _config = new()
    {
        WebsiteToken = "replace-with-your-token",
        BaseUrl = "https://app.chatwoot.com"
    };

    private Task HandleReady() => ConsoleLog("Chatwoot is ready!");
    private Task HandleOpen() => ConsoleLog("Chat opened");
    private Task HandleClose() => ConsoleLog("Chat closed");

    private Task HandleMessage(ChatwootMessage message)
    {
        Console.WriteLine($"Message from Chatwoot: {message.Content}");
        return Task.CompletedTask;
    }

    private Task HandleError(JsonElement error)
    {
        Console.WriteLine($"Chatwoot error: {error}");
        return Task.CompletedTask;
    }

    private Task ConsoleLog(string msg)
    {
        Console.WriteLine(msg);
        return Task.CompletedTask;
    }
}

⚙️ Configuration

You must supply a ChatwootConfiguration object to the component:

var config = new ChatwootConfiguration
{
    WebsiteToken = "your-token", // Required
    BaseUrl = "https://app.chatwoot.com", // Optional, defaults to this
    Locale = "en", // Optional, default is "en"
    HideMessageBubble = false,
    ShowUnreadMessagesDialog = false,
    Position = "right", // "left" or "right"
    UseBrowserLanguage = false,
    Type = "standard", // or "expanded_bubble"
    DarkMode = "auto", // "light" or "auto"
    BaseDomain = null // Optional, for cross-subdomain tracking
};

📚 API

This library provides a full interface via IChatwoot, including:

• SetUser(...)
• SetLabel(...)
• Shutdown()
• Toggle()
• SetLocale(...)
• SetCustomAttributes(...)
• ... and more!

💬 Chatwoot Events

The following Chatwoot events are exposed as Blazor EventCallbacks: