Rozz Search Box Component API Reference

Source:

Published:

Keywords: Rozz, Rozz Search Box, Web Component, Lit, AI-powered search, Programmatic API, Display Modes, Localization

Document ID: https://rozz.site/pages/rozz-chatbot-component-api-specs.html#split1

Overview

The Rozz Search Box is a web component built with Lit. The component provides an AI-powered search interface. The component supports multiple display modes. The component supports real-time streaming responses. The component supports flexible integration options.

Key features include:

Quick Start

Add AI-powered search to your website in two lines of code. No backend is required.

Basic Usage

Include the component script and insert the element.

Code example: 

<!-- Include the component script -->
<script src="https://rozzum-bucket.rozz.site/rozz-searchbox.js"></script>

<!-- Add the component to your page -->
<rozz-searchbox
  data-initial-status="closed"
  data-theme-color="#d60a70">
</rozz-searchbox>

Component Attributes

Display Configuration

Display configuration options control how the component appears on the page.

| Property | Value | Type | |---|---|---| | data-initial-status | "closed" (default) | String | | | "open" | String | | | "chat" | String | | | "static" | String | | | "link" | String |

Example: 

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

Styling Attributes

Styling attributes control the visual appearance of the component.

| Property | Value | Type | |---|---|---| | data-theme-color | Hex color or CSS color value | String | | data-font-family | CSS font-family value | String | | data-max-width | CSS size value | String | | data-max-height | CSS size value | String |

Examples: 

<rozz-searchbox data-theme-color="#28a745"></rozz-searchbox>
<rozz-searchbox data-font-family="'Open Sans', sans-serif"></rozz-searchbox>
<rozz-searchbox data-max-width="1200px"></rozz-searchbox>
<rozz-searchbox data-max-height="75vh"></rozz-searchbox>

Color customization examples:

Default colors:

Button Configuration

Button configuration options affect the floating button.

| Property | Value | Type | |---|---|---| | data-button-text | Text displayed on the floating button | String | | data-button-animation | true or false for the button pulse animation | Boolean | | data-button-background | Background for the floating button (CSS value) | String | | data-button-hover-color | Color for the button icon and text on hover | String |

Examples: 

<rozz-searchbox data-button-text="NEED HELP?"></rozz-searchbox>
<rozz-searchbox data-button-animation="true"></rozz-searchbox>
<rozz-searchbox data-button-background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></rozz-searchbox>
<rozz-searchbox data-button-hover-color="#0056b3"></rozz-searchbox>

Alternative via CSS: 

rozz-searchbox {
  --button-hover-color: #0056b3;
}

Button Positioning

Button positioning method sets the positioning behavior of the floating button.

| Property | Value | Type | |---|---|---| | data-button-positioning-method | "fixed" (default) | String | | | "standard" | String |

Position properties:

Examples: 

<rozz-searchbox
  data-button-positioning-method="fixed"
  data-button-bottom-position="20px"
  data-button-right-position="20px">
</rozz-searchbox>

Programmatic API

Methods

openClickLink(domain, queryText)

Parameters:

Returns: Promise<void>.

Behavior:

Examples: 

const searchbox = document.getElementById('rozz-searchbox');
searchbox.openClickLink('example-domain.com');
searchbox.openClickLink('example-domain.com', 'What are your office hours?');

Multiple links example (HTML + JavaScript): 

<rozz-searchbox id="rozz-searchbox" data-initial-status="link"></rozz-searchbox>
<div id="county-links">
  <button data-domain="county-a.gov" data-query="What are your office hours?">County A Hours</button>
  <button data-domain="county-b.gov" data-query="How do I pay property taxes?">County B Taxes</button>
  <button data-domain="county-c.gov" data-query="Where is the DMV located?">County C DMV</button>
</div>
<script>
const searchbox = document.getElementById('rozz-searchbox');
document.getElementById('county-links').addEventListener('click', function(event) {
  const button = event.target.closest('button');
  if (button) {
    const domain = button.dataset.domain;
    const query = button.dataset.query;
    searchbox.openClickLink(domain, query);
  }
});
</script>

Use cases:

Session behavior:

Display Modes

Display modes control how the component appears and behaves.

Closed Mode:

Open Mode:

Chat Mode:

Static Mode:

Link Mode:

Code examples: 

<rozz-searchbox data-initial-status="closed" data-button-text="ASK ANYTHING"></rozz-searchbox>
<rozz-searchbox data-initial-status="open"></rozz-searchbox>
<rozz-searchbox data-initial-status="chat" data-theme-color="#d60a70" data-button-animation="true"></rozz-searchbox>
<rozz-searchbox data-initial-status="static" data-max-width="100%"></rozz-searchbox>
<rozz-searchbox id="rozz-searchbox" data-initial-status="link"></rozz-searchbox>

<script>
const searchbox = document.getElementById('rozz-searchbox');
document.getElementById('help-link').addEventListener('click', () => {
  searchbox.openClickLink('example-domain.com', 'How can I get support?');
});
</script>

Features

SUPPORTED LANGUAGES: English, Spanish, French, German, Italian, Portuguese, Dutch, Polish, Russian, Japanese, Chinese (Simplified), Korean, Arabic, Hindi.

Advanced Examples

Custom Themed Component

<rozz-searchbox
  data-initial-status="closed"
  data-theme-color="#007bff"
  data-font-family="'Inter', sans-serif"
  data-button-text="HELP CENTER"
  data-button-animation="true"
  data-max-width="1200px"
  data-query-background="#007bff"
  data-result-text-color="#2c3e50">
</rozz-searchbox>

Embedded Search Page

<rozz-searchbox
  data-initial-status="static"
  data-max-width="100%"
  data-max-height="100vh"
  data-theme-color="#28a745">
</rozz-searchbox>

Multi-Domain Product Catalog

<rozz-searchbox id="product-search" data-initial-status="link"></rozz-searchbox>
<div class="product-grid">
  <div class="product" data-domain="electronics.shop" data-query="Tell me about this laptop">
    <img src="laptop.jpg" alt="Laptop">
    <button class="ask-rozz">Ask about this product</button>
  </div>
  <div class="product" data-domain="electronics.shop" data-query="What are the specs of this phone?">
    <img src="phone.jpg" alt="Phone">
    <button class="ask-rozz">Ask about this product</button>
  </div>
</div>
<script>
const searchbox = document.getElementById('product-search');
document.querySelectorAll('.ask-rozz').forEach(button => {
  button.addEventListener('click', function() {
    const product = this.closest('.product');
    searchbox.openClickLink(product.dataset.domain, product.dataset.query);
  });
});
</script>

Browser Support

The page lists test coverage for major browsers and versions, including Chrome/Edge, Firefox, Safari, and mobile browsers.

Performance Considerations

Troubleshooting

Support

For issues or feature requests, contact rozz@rozz.site.

Author

Adrien Schmidt, Co-Founder & CEO, ROZZ.

Adrien has experience building AI systems and products for eBay and Cartier.

ROZZ is an AI infrastructure company.

Embedded Notes

ROZZ - AI Search Infrastructure.

rozz@rozz.site.

San Francisco Bay Area.

© 2026 ROZZ. All rights reserved.