Rozz Box Component API Reference

Source:

Published:

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

Document ID: rozz_site_pages_rozz-chatbot-component-api-specs.html

Overview

The Rozz Search Box is a web component built with Lit that provides an AI-powered interface. It supports multiple display modes, real-time streaming responses, and flexible integration options. Key features include:

Quick Start

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

<!-- 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>

Table of Contents

Basic Usage

To use the component, include the script and insert the element as shown above.

Component Attributes

Display Configuration

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

Styling Attributes

Color Customization

Button Configuration

Alternative via CSS: 

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

Button Positioning

Position properties:

Example: <rozz-searchbox data-initial-status="fixed" data-button-bottom-position="20px" data-button-right-position="20px"> </rozz-searchbox>

Programmatic API

Methods

Parameters:

Returns:

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: 

<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

Closed Mode

Component starts as a floating button. User clicks to open the search interface.

<rozz-searchbox data-initial-status="closed" data-button-text="ASK ANYTHING"></rozz-searchbox>

Open Mode

Component opens automatically on page load with input ready.

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

Static Mode

Component is always visible without a close button. Ideal for dedicated search pages.

<rozz-searchbox data-initial-status="static" data-max-width="100%"></rozz-searchbox>

Link Mode

Component is hidden until programmatically opened via openClickLink(). Perfect for multi-tenant scenarios or context-specific queries.

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

Features

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

Performance Considerations

<script src="/static/rozz-searchbox.js" defer></script>

Troubleshooting

Component Not Rendering

Connection Issues

Styling Conflicts

Support

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

Author

Adrien Schmidt, Co-Founder & CEO, ROZZ

ROZZ

rozz@rozz.site

San Francisco Bay Area

© 2026 ROZZ. All rights reserved.