# Website Widget This agent allows you to embed a customizable support bot into your website. You have full control over the look, feel, and responses of the widget. ## Generating the widget embed code To get a preconfigured ` ``` ### Styling Customization The appearance of the Katara Website Widget can be customized using CSS Custom Properties. You can override these properties by defining them in your own stylesheet or in a ` ``` #### Available CSS Custom Properties | Variable | Default Value | Description | | ------------------------------------------ | -------------------------------------------- | ----------------------------------------------------------------------------- | | `--katara-widget-primary-color` | `#2563EB` | The primary color used for buttons, user messages, and other accents. | | `--katara-widget-primary-hover-color` | `#1D4ED8` | The hover color for elements using the primary color. | | `--katara-widget-text-on-primary-color` | `#FFFFFF` | The text color used on elements with the primary color as their background. | | `--katara-widget-primary-bg-color` | `#FFFFFF` | The main background color of the widget. | | `--katara-widget-text-on-primary-bg-color` | `#374151` | The text color used on top of the background color of the widget. | | `--katara-widget-border-color` | `#E5E7EB` | The color used for borders within the widget. | | `--katara-widget-user-msg-bg-color` | `var(--katara-widget-primary-color)` | The background color for messages sent by the user. | | `--katara-widget-bot-msg-bg-color` | `#F3F4F6` | The background color for messages sent by the bot/agent. | | `--katara-widget-user-msg-font-color` | `var(--katara-widget-text-on-primary-color)` | The font color for messages sent by the user. | | `--katara-widget-bot-msg-text-color` | `#1F2937` | The font color for messages sent by the bot/agent. | | `--katara-widget-msg-border-radius` | `0.5rem` | The border radius for chat message bubbles. | | `--katara-widget-ui-border-radius` | `0.5rem` | The border radius for main UI elements like the widget container and buttons. | | `--katara-widget-position-right` | `1rem` | The distance of the widget from the right edge of the screen. | | `--katara-widget-position-bottom` | `1rem` | The distance of the widget from the bottom edge of the screen. | | `--katara-widget-z-index` | `50` | The stack order (z-index) of the widget. | | `--katara-widget-w-default` | `20rem` | The width of the widget in its default (non-expanded) state. | | `--katara-widget-h-default` | `24rem` | The height of the widget in its default (non-expanded) state. | | `--katara-widget-w-expanded` | `50vw` | The width of the widget in its expanded state. | | `--katara-widget-h-expanded` | `50vh` | The height of the widget in its expanded state. | | `--katara-widget-font-family` | `system-ui,...` | The global font family for the widget. | | `--katara-widget-header-font-size` | `0.875rem` | Font size for the widget header title. | | `--katara-widget-header-font-weight` | `500` | Font weight for the widget header title. | | `--katara-widget-header-font-style` | `normal` | Font style (e.g., normal, italic) for the widget header title. | | `--katara-widget-chat-msg-font-size` | `0.875rem` | Font size for chat messages. | | `--katara-widget-chat-msg-font-weight` | `400` | Font weight for chat messages. | | `--katara-widget-chat-msg-font-style` | `normal` | Font style for chat messages. | | `--katara-widget-input-font-size` | `0.875rem` | Font size for the text input field. | | `--katara-widget-input-font-weight` | `400` | Font weight for the text input field. | | `--katara-widget-input-font-style` | `normal` | Font style for the text input field. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.katara.ai/about/agents/conversational/website-widget.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.