Can I use my own button to open the Rozz chatbot on my website?

Direct Answer

Yes, you can customize the way Rozz is triggered in your HTML page.
You might want to do this if you wish to use another button than our default ‘Ask Anything’ button.

Detailed Explanation

HTML Structure

The rozz-searchbox component is included in the HTML structure.
The clickable image element triggers the searchbox.
The initial-status attribute must be set to “link”.

<rozz-searchbox id="rozz-searchbox" initial-status="link"></rozz-searchbox>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rozz Searchbox Example</title>
<script src="https://rozzum-bucket.rozz.site/rozz-searchbox.js"></script>
</head>
<body>
<div id="rozz-container">
<rozz-searchbox id="rozz-searchbox" initial-status="link"></rozz-searchbox>
</div>
<div>
<img src="https://your-bucket.amazonaws.com/example.com.png"
id="example.com"
data-domain="example.com"
alt=" my website"
title="Example Website"
style="cursor: pointer;">
</div>
<script>
document.getElementById('example.com').addEventListener('click', function() {
const domain = this.dataset.domain;
const searchbox = document.getElementById('rozz-searchbox');
if (searchbox) {
searchbox.openClickLink(domain); // Opens and connects the searchbox
}
});
</script>
</body>
</html>

Javascript

An event listener is added to the image element with the id of example.com.
When the image is clicked, the data-domain attribute of the clicked image is retrieved.
The openClickLink(domain) method of the rozz-searchbox element is called with the retrieved domain.

Customizing the Domain

To customize the domain, you can change the data-domain attribute of the image element.
The JavaScript will automatically use the updated domain value when the image is clicked.

<img src="https://example.com/logo.png" id="example" data-domain="example.com" alt="Example Domain" title="Example Domain" style="cursor: pointer;">

document.getElementById('example').addEventListener('click', function() {
const domain = this.dataset.domain;
const searchbox = document.getElementById('rozz-searchbox');
if (searchbox) {
searchbox.openClickLink(domain);
}
});

That’s how you can integrate and use the rozz-searchbox component in your HTML page with a single clickable element that sets the data-domain attribute dynamically based on user interaction.

Posted August 5, 2024

---

Explanations

HTML Structure

The <div id="rozz-container"> contains the <rozz-searchbox> element.
The image element (<img/>) represents the clickable source that will trigger the searchbox. It has an id, a data-domain attribute, and other standard attributes.

Javascript

An event listener is added to the image element with the id of example.com.
When the image is clicked, the data-domain attribute of the clicked image is retrieved.
The openClickLink(domain) method of the <rozz-searchbox> element is called with the retrieved domain.

Customizing the Domain

To customize the domain, you can change the data-domain attribute of the image element. The JavaScript will automatically use the updated domain value when the image is clicked.

That’s how you can integrate and use the rozz-searchbox component in your HTML page with a single clickable element that sets the data-domain attribute dynamically based on user interaction. I hope this helps!

---

Research Foundation

This answer synthesizes findings from more than 35 peer-reviewed research papers.
The papers cover GEO, RAG systems, and LLM citation behavior.

Author

Adrien Schmidt, Co-Founder & CEO, ROZZ.
The author has more than ten years of experience building AI systems, including Aristotle (conversational AI analytics) and products for eBay and Cartier.