https://github.com/soenneker/soenneker.blazor.chatwoot
A Blazor interop library for Chatwoot, the open-source customer engagement suite.
https://github.com/soenneker/soenneker.blazor.chatwoot
blazor blazorlibrary chat chatwoot chatwootinterop csharp customer dotnet engagement interop live
Last synced: about 1 month ago
JSON representation
A Blazor interop library for Chatwoot, the open-source customer engagement suite.
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.chatwoot
- Owner: soenneker
- License: mit
- Created: 2025-04-06T01:46:01.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-09T19:51:00.000Z (about 1 month ago)
- Last Synced: 2025-04-11T00:59:09.902Z (about 1 month ago)
- Topics: blazor, blazorlibrary, chat, chatwoot, chatwootinterop, csharp, customer, dotnet, engagement, interop, live
- Language: C#
- Homepage: https://soenneker.com
- Size: 148 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
๏ปฟ[](https://www.nuget.org/packages/soenneker.blazor.chatwoot/)
[](https://github.com/soenneker/soenneker.blazor.chatwoot/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.chatwoot/)
#  Soenneker.Blazor.Chatwoot
### A Blazor interop library for [Chatwoot](https://www.chatwoot.com/), 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
```bash
dotnet add package Soenneker.Blazor.Chatwoot
```
Register the interop in DI:
```csharp
public static async Task Main(string[] args)
{
builder.Services.AddChatwootInteropAsScoped();
}
```
---
## ๐ Usage
### ๐งฉ Add to a Razor component
```razor
```
### ๐ง Component code-behind
```csharp
@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:
```csharp
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 `EventCallback`s:
| Chatwoot Event | .NET Callback |
|----------------------|--------------------------|
| `chatwoot:ready` | `OnReady` |
| `chatwoot:open` | `OnOpen` |
| `chatwoot:close` | `OnClose` |
| `chatwoot:on-message`| `OnMessage(ChatwootMessage)` |
| `chatwoot:error` | `OnError(JsonElement)` |