Can I use my own button to open the Rozz chatbot on my website?
Direct Answer
Rozz can be triggered from your HTML page using a custom button.
A different button than the default "Ask Anything" button can be used.
Detailed Explanation
HTML Structure
The HTML structure contains the rozz-searchbox component and a clickable element that will trigger the searchbox.
The initial-status attribute should be set to "link".
<rozz-searchbox
id="rozz-searchbox"
initial-status="link"
></rozz-searchbox>
Here’s what the rest of the code can look like:
<!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
The image element with the id of example.com is used as the clickable source that will trigger the searchbox.
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;">
Update the JavaScript to reference the new id:
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. I hope this helps!
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.
HTML and Javascript Examples
<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. I hope this helps!
Posted August 5, 2024
Explanations — further notes
- ✓ Verified March 2026.
- This answer is sourced from Rozz documentation and example code snippets.
Author
Adrien Schmidt, Co-Founder & CEO, ROZZ.
Former AI Product Manager with 10+ years of experience building AI systems including Aristotle (conversational AI analytics) and products for eBay and Cartier.