@bloonio/chat-angular

Angular library for the bloonio chat PaaS. Standalone components, signals-based service, SSR-safe. Built on @bloonio/chat-client-core.

Targets Angular 17+ (signals stable + @if/@for control flow + afterNextRender).

Install

npm install @bloonio/chat-angular @bloonio/chat-client-core

Then import the stylesheet once in your global stylesheet (styles.css):

@import "@bloonio/chat-angular/styles.css";

Two-minute integration

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideBloonioChat } from '@bloonio/chat-angular';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBloonioChat({
      tenantId: '019e4ae7-…',
      publicKey: 'pk_…',
      baseUrl: 'https://chat-relay.example.com',
      locale: 'fr',
      // Optional — bind anonymous sessions to your authenticated users.
      // Your backend computes HMAC-SHA256(tenant_secret, user_id) once
      // per logged-in visitor.
      visitorTokenProvider: () => inject(HttpClient)
        .get<{token: string}>('/api/chat/visitor-token')
        .pipe(map(r => r.token)),                // "userId:signature"
    }),
  ],
};

// any standalone component — drop the launcher anywhere
import { BloonioChatLauncherComponent } from '@bloonio/chat-angular';

@Component({
  standalone: true,
  imports: [BloonioChatLauncherComponent],
  template: `<router-outlet /> <bloonio-chat-launcher />`,
})
export class AppComponent {}

Three rendering modes

| Mode | Component | When | |---|---|---| | Floating | <bloonio-chat-launcher /> (+ the launcher renders the panel itself on toggle) | Tidio-style — a bubble in the corner that expands on click. | | Docked panel | <bloonio-chat-panel mode="docked" /> | Always-on chat in a sidebar / dedicated column. No floating chrome. | | Headless thread | <bloonio-chat-thread /> | Just messages + input, no header. Embed inside your own support pages. |

All three share the same BloonioChatService, so a launcher and a thread on the same page stay in sync.

Programmatic access

import { Component, inject } from '@angular/core';
import { BloonioChatService } from '@bloonio/chat-angular';

@Component({...})
export class SupportButton {
  private readonly chat = inject(BloonioChatService);

  readonly unread = this.chat.unreadCount;        // Signal<number>
  readonly typing = this.chat.botTyping;          // Signal<boolean>

  open() { this.chat.openPanel(); }
  send(content: string) { this.chat.sendMessage(content); }
}

SSR

Bootstrap (fetchWidgetConfig) is deferred via afterNextRender so the server-side render produces zero network calls. The components render their static shell during pre-render and connect when the browser hydrates.

For tenants on @angular/ssr, no extra configuration is needed.

Build

npm install
npm run build       # ng-packagr → dist/ (fesm2022 + .d.ts + Ivy partial)
npm run typecheck   # tsc --noEmit -p tsconfig.lib.json

Every component uses inline template: strings, so there are no separate template files to ship — ng-packagr emits the Angular Package Format (APF) that the consumer's Ivy compiler links at build time.

Reference

• @bloonio/chat-client-core — transport + protocol layer this library wraps
• @bloonio/chat-widget — the Preact embeddable using the same core lib
• bloonio_chat_api/docs/12_PAAS_CONVERSION_PLAN.md — full PaaS plan, §7.3 + §13.9