Direct Answer
Rozz uses data-* attributes to easily customize the look and feel of the chatbot. The <rozz-searchbox> web component allows extensive customization of button styling, searchbox behavior, colors, positioning, and more through simple HTML attributes.
Detailed Explanation
The <rozz-searchbox> web component allows for extensive customization using several data-* attributes. These attributes control the look and feel of the component, from button styling to searchbox behavior.
WordPress Shortcode Users
The attributes are simplified in WP: remove the 'data-' and replace '-' with '_'. For example: data-button-background becomes button_background. The full list of shortcodes is available here. The WP plugin itself is available here.
Button Attributes
data-button-background
Default: #b7238b.
Sets the background of the button using a CSS color or formula.
Usage Example:
<rozz-searchbox data-button-background="linear-gradient(90deg, #ff0000, #00ff00)"></rozz-searchbox>
data-button-text
Default: ASK ANYTHING.
Customizes the text displayed inside the button.
Usage Example:
<rozz-searchbox data-button-text="Ask Now"></rozz-searchbox>
data-button-animation
Default: false.
Enables or disables the animation effect on the button.
Values: true enables animation; false disables animation.
Usage Example:
<rozz-searchbox data-button-animation="true"></rozz-searchbox>
data-button-top-position
Default: 30%.
Defines the vertical position of the button relative to the viewport height.
Usage Example:
<rozz-searchbox data-button-top-position="70vh"></rozz-searchbox>
data-button-right-position
Default: 5%.
Defines the horizontal position of the button relative to the viewport width.
Usage Example:
<rozz-searchbox data-button-right-position="10vw"></rozz-searchbox>
data-button-positioning-method
Default: fixed.
Controls how the button is positioned on the page.
Most common values: fixed, absolute, relative, sticky.
Usage Example:
<rozz-searchbox data-button-positioning-method="absolute"></rozz-searchbox>
Searchbox Attributes
data-max-width
Default: 900px.
Defines the maximum width for the component. Supports various units such as px, %, vw, vh, em, rem, cm.
Usage Example:
<rozz-searchbox data-max-width="50%"></rozz-searchbox>
data-max-height
Default: 75vh.
Defines the maximum height for the component. Supports various units such as px, %, vh, etc.
Usage Example:
<rozz-searchbox data-max-height="600px"></rozz-searchbox>
data-font-family
Default: Verdana, Arial, sans-serif.
Sets the font family used in the searchbox component, allowing for custom fonts.
Usage Example:
<rozz-searchbox data-font-family="'Courier New', monospace"></rozz-searchbox>
data-initial-status
Default: closed.
Defines the initial state of the searchbox when the page loads.
Values: closed, open, static, link.
Usage Example:
<rozz-searchbox data-initial-status="open"></rozz-searchbox>
data-theme-color
Default: #b7238b.
Controls the primary theme color of the searchbox, affecting elements like the button, border, and outlines.
Usage Example:
<rozz-searchbox data-theme-color="blue"></rozz-searchbox>
data-query-background
Default: #E3E3E3.
Sets the background color of the query block, where the user's query is displayed.
Usage Example:
<rozz-searchbox data-query-background="pink"></rozz-searchbox>
data-query-text-color
Default: #8A1968.
Defines the text color for the query block.
Usage Example:
<rozz-searchbox data-query-text-color="red"></rozz-searchbox>
data-result-text-color
Default: #000000 (black).
Controls the text color of the result block, where responses to queries are displayed.
Usage Example:
<rozz-searchbox data-result-text-color="purple"></rozz-searchbox>
Technical Details
All attributes are implemented using CSS variables and Lit component properties, ensuring flexibility and ease of customization. When these attributes are provided, they are reflected in the underlying DOM, allowing the user to change the appearance and behavior of the searchbox without modifying the core code.
CSS Variables: CSS variables like --theme-color, --query-background, and --result-text-color are updated dynamically based on the attribute values. If no value is provided, default values are applied.
Property Reflection: Each attribute is mapped to a corresponding property in the Lit component using the reflect: true option, ensuring the attribute value is synced with the property and available for both rendering and styling.
Example of Integrating Rozz
Here's an example of integrating Rozz to your website with custom settings. Note that you only need to include in your code the attributes that you wish to customize, the others will fall back to defaults if they are not present.
<rozz-searchbox
data-button-background="pink"
data-button-text="hello world"
data-button-animation="true"
data-button-top-position="50vh"
data-button-right-position="5vw"
data-button-positioning-method="fixed"
data-max-width="900px"
data-max-height="75%vh"
data-font-family="courier"
data-initial-status="closed"
data-theme-color="blue"
data-query-background="pink"
data-result-text-color="purple"
data-query-text-color="red">
</rozz-searchbox>
By using these data-* attributes, you can easily customize Rozz to fit seamlessly into your website's design and functionality!
Posted September 3, 2024 ✓ Verified March 2026 — Data confirmed against live LLM crawler logs from rozz.site.