akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: setup overrides for error and email

Browse Source
This commit is contained in:
Shivam Mishra
2026-01-16 13:24:50 +05:30
parent 8cacf95aae
commit 87e8c50ee1
5 changed files with 56 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/react-components/doc.md
+7
View File
@@ -420,6 +420,10 @@ The Web Component supports runtime theming via CSS custom properties. These vari
| `--chatwoot-bubble-private-text` | Private note text | `--amber-12` |
| `--chatwoot-bubble-bot-bg` | Bot/template message background | `--solid-iris` |
| `--chatwoot-bubble-bot-text` | Bot message text | `--slate-12` |
| `--chatwoot-bubble-error-bg` | Error message background | `--ruby-4` |
| `--chatwoot-bubble-error-text` | Error message text | `--ruby-12` |
| `--chatwoot-bubble-unsupported-bg` | Unsupported message background | `--amber-4` |
| `--chatwoot-bubble-unsupported-text` | Unsupported message text | `--amber-12` |
#### Meta (timestamp) - Per Variant
@@ -429,6 +433,7 @@ The Web Component supports runtime theming via CSS custom properties. These vari
| `--chatwoot-bubble-user-meta` | Meta text for user messages | `--slate-11` |
| `--chatwoot-bubble-private-meta` | Meta text for private notes (50% opacity applied) | `--amber-12` |
| `--chatwoot-bubble-bot-meta` | Meta text for bot messages | `--slate-11` |
| `--chatwoot-bubble-error-meta` | Meta text for error messages | `--ruby-11` |
#### Message Status Icons - Per Variant
@@ -458,6 +463,8 @@ The Web Component supports runtime theming via CSS custom properties. These vari
| `--chatwoot-bubble-user-border` | User message border color | `--slate-6` |
| `--chatwoot-bubble-private-border` | Private note border color | `--amber-6` |
| `--chatwoot-bubble-bot-border` | Bot message border color | `--iris-6` |
| `--chatwoot-bubble-error-border` | Error message border color | `--ruby-6` |
| `--chatwoot-bubble-unsupported-border` | Unsupported message border color | `--amber-12` |
### Usage Examples
app/javascript/react-components/src/styles/bubble-overrides.css
+17
View File
@@ -13,10 +13,16 @@
* --chatwoot-bubble-private-text: Private note text
* --chatwoot-bubble-bot-bg: Bot message background
* --chatwoot-bubble-bot-text: Bot message text
* --chatwoot-bubble-error-bg: Error message background
* --chatwoot-bubble-error-text: Error message text
* --chatwoot-bubble-unsupported-bg: Unsupported message background
* --chatwoot-bubble-unsupported-text: Unsupported message text
* --chatwoot-bubble-agent-border: Agent message border color
* --chatwoot-bubble-user-border: User message border color
* --chatwoot-bubble-private-border: Private note border color
* --chatwoot-bubble-bot-border: Bot message border color
* --chatwoot-bubble-error-border: Error message border color
* --chatwoot-bubble-unsupported-border: Unsupported message border color
*
* BORDER:
* --chatwoot-bubble-border-width: Border width in px (0 = invisible, default: 0)
@@ -67,6 +73,17 @@
--bubble-private-border: var(--chatwoot-bubble-private-border, var(--amber-6));
--bubble-bot-border: var(--chatwoot-bubble-bot-border, var(--iris-6));
/* Error variant */
--bubble-error-bg: var(--chatwoot-bubble-error-bg, var(--ruby-4));
--bubble-error-text: var(--chatwoot-bubble-error-text, var(--ruby-12));
--bubble-error-meta: var(--chatwoot-bubble-error-meta, var(--ruby-11));
--bubble-error-border: var(--chatwoot-bubble-error-border, var(--ruby-6));
/* Unsupported variant */
--bubble-unsupported-bg: var(--chatwoot-bubble-unsupported-bg, var(--amber-4));
--bubble-unsupported-text: var(--chatwoot-bubble-unsupported-text, var(--amber-12));
--bubble-unsupported-border: var(--chatwoot-bubble-unsupported-border, var(--amber-12));
/* Spacing - 1 = default */
--bubble-spacing-ratio: var(--chatwoot-bubble-spacing-ratio, 1);
}