How to customize Rozz chatbot for your site using attributes?

Updated March 2026

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.

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- prefix.

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: Button is fixed to a position relative to the viewport.
absolute: Button is positioned relative to the nearest positioned ancestor.
relative: Button is positioned relative to its normal position in the flow of the document.
sticky: Button stays fixed while scrolling within its container.

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.

This setting allows 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: The searchbox is closed initially.
open: The searchbox is open initially and can be closed.
static: The searchbox is in a static, open state and remains open.
link: The searchbox is opened by another component on your page.

Check here for details on how that works.

Usage Example:

<rozz-searchbox data-initial-status="open"></rozz-searchbox>

data-theme-color

Default: #b7238b

Controls the primary theme color of the searchbox.

This affects 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.

This is 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.

This is 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.

This approach ensures flexibility and ease of customization.

When these attributes are provided, they are reflected in the underlying DOM. This reflection allows 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.

This mapping ensures 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.

This example notes that only attributes you wish to customize need to be included. 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, Rozz can be customized to fit seamlessly into your website's design and functionality.

Posted September 3, 2024

Verified March 2026

Verified March 2026 — Data confirmed against live LLM crawler logs from rozz.site.

Active LLM bots crawling this content in the past 30 days:

ClaudeBot (595 requests)
GPTBot (239 requests)
Meta AI (193 requests)

Citation rates based on analysis of 12,595 AI crawler requests.

Research Foundation

Research Foundation: This answer synthesizes findings from 35+ peer-reviewed research papers on GEO, RAG systems, and LLM citation behavior.

Author

Author: Adrien Schmidt, Co-Founder & CEO, ROZZ

Serial tech entrepreneur with 10+ years experience building AI systems including Aristotle (conversational AI analytics) and products for eBay and Cartier.