@robylon/web-react-sdk 1.1.41 → 1.1.43

package/README.md

@@ -534,6 +534,7 @@ The SDK supports the following configuration options for both React and plain Ja
 | sideSpacing   | number   | Distance from the side of the screen (in px)      | Optional          |
 | bottomSpacing | number   | Distance from the bottom of the screen (in px)    | Optional          |
 | show_launcher | boolean  | Show the floating launcher button (default: true) | Optional          |
+| overrides     | object   | Customize chatbot header appearance               | Optional          |
 
 ### Position and Spacing Configuration
 
@@ -569,6 +570,113 @@ RobylonChatbot.create({
 });
 ```
 
+### Overrides Configuration
+
+The `overrides` prop allows you to customize the chatbot header appearance, including avatars, titles, and styling. This is useful for branding or personalizing the chatbot interface.
+
+#### Overrides Options
+
+| Option                       | Type   | Description                                |
+| ---------------------------- | ------ | ------------------------------------------ |
+| `header_avatar`              | string | URL for the header avatar image            |
+| `agent_avatar`               | string | URL for the agent avatar image             |
+| `header_title`               | string | Custom header title text                   |
+| `header_subtitle`            | string | Custom header subtitle text                |
+| `header_title_text_color`    | string | CSS color value for the title text         |
+| `header_subtitle_text_color` | string | CSS color value for the subtitle text      |
+| `header_bg`                  | string | CSS color or URL for the header background |
+
+#### React Example:
+
+```jsx
+<Chatbot
+  api_key="YOUR_API_KEY"
+  overrides={{
+    header_avatar: "https://example.com/header-avatar.png",
+    agent_avatar: "https://example.com/agent-avatar.png",
+    header_title: "Support Team",
+    header_subtitle: "We're here to help",
+    header_title_text_color: "#1a1a1a",
+    header_subtitle_text_color: "#666666",
+    header_bg: "#ffffff",
+  }}
+/>
+```
+
+#### React: Partial Overrides
+
+You can provide only the overrides you want to customize. Omitted properties will use their default values:
+
+```jsx
+<Chatbot
+  api_key="YOUR_API_KEY"
+  overrides={{
+    header_title: "Custom Title",
+    header_title_text_color: "#007bff",
+  }}
+/>
+```
+
+#### Plain JavaScript Example:
+
+```javascript
+RobylonChatbot.create({
+  api_key: "YOUR_API_KEY",
+  overrides: {
+    header_avatar: "https://example.com/header-avatar.png",
+    agent_avatar: "https://example.com/agent-avatar.png",
+    header_title: "Support Team",
+    header_subtitle: "We're here to help",
+    header_title_text_color: "#1a1a1a",
+    header_subtitle_text_color: "#666666",
+    header_bg: "#ffffff",
+  },
+});
+```
+
+#### Plain JavaScript: Updating Overrides
+
+To update overrides after initialization, you'll need to recreate the chatbot instance with new overrides:
+
+```javascript
+let chatbot = RobylonChatbot.create({
+  api_key: "YOUR_API_KEY",
+  overrides: {
+    header_title: "Initial Title",
+  },
+});
+
+// Later, destroy and recreate with new overrides
+chatbot.destroy();
+chatbot = RobylonChatbot.create({
+  api_key: "YOUR_API_KEY",
+  overrides: {
+    header_title: "Updated Title",
+    header_title_text_color: "#ff0000",
+  },
+});
+```
+
+#### Color Format Examples
+
+Colors can be specified in any valid CSS color format:
+
+```jsx
+<Chatbot
+  api_key="YOUR_API_KEY"
+  overrides={{
+    // Hex color
+    header_title_text_color: "#1a1a1a",
+    // RGB
+    header_subtitle_text_color: "rgb(102, 102, 102)",
+    // RGBA
+    header_bg: "rgba(255, 255, 255, 0.95)",
+    // Named color
+    header_title_text_color: "navy",
+  }}
+/>
+```
+
 ## Event Handling
 
 ### Supported Events