Widget Overview

​

Architecture

┌──────────────────────────────────┐
│         Your Website             │
│                                  │
│   ┌────────────────────────┐     │
│   │   Hacktionbase SDK     │     │
│   │   (bubble + listeners) │     │
│   └──────────┬─────────────┘     │
│              │ postMessage        │
│   ┌──────────▼─────────────┐     │
│   │   Widget iframe        │     │
│   │   ({tenant}.hacktionbase.com) │
│   │   - Conversations      │     │
│   │   - In-app messages    │     │
│   └────────────────────────┘     │
└──────────────────────────────────┘

​

Components

1. Bubble — a floating button in the corner of the page. Clicking it toggles the panel open/closed.
2. Panel — the iframe containing the widget UI (conversations, messages).

​

Lifecycle

1. Hacktionbase.init() fetches the widget configuration from the API
2. The SDK injects CSS, creates the bubble, and creates a hidden iframe
3. When the iframe loads, it sends hacktionbase:ready
4. The SDK responds with config and session context
5. The widget authenticates via the widget auth endpoint and receives a JWT
6. The user can now open the panel, view conversations, and receive in-app messages

​

PostMessage protocol

​

SDK → Widget

​

Widget → SDK