So you’ve tested your new Rozz chatbot and you’re read to roll it out to your users? Congratulations! Let the fun begin!
It’s really easy to install Rozz on your website. You can do it by editing the HTML of your site, or with a plugin if your site is on WordPress. Here’s how to do it.
Adding Rozz to a Website Using HTML
1. Insert the Script
Add the following script to your website. If you can, simply copy/paste it into the code. A good practice is to insert this code before the closing </body> tag for better performance and user experience:
<script src="https://rozzum-bucket.rozz.site/rozz-searchbox.js"></script>Using Rozz with Common Website Builders
Most major CMS and site builders provide a dedicated panel for inserting code into the <head> or at the end of <body>.
Squarespace: Settings → Advanced → Code Injection.
Wix: Settings → Advanced → Custom Code.
Webflow: Project Settings → Custom Code (before </head> or before </body>).
Shopify: Online Store → Themes → Customize → Theme settings → Custom Code.
Drupal / Joomla: Many themes/modules provide “Custom Code” or “Head scripts” fields.
If that doesn’t work, as a workaround you can you an “Embed Block” on the pages where you want Rozz to be:
- Squarespace / Webflow / Wix: Drag & drop an “Embed” or “Custom HTML” block into a page/section.
- Drupal / Joomla: Use modules like Custom Block, Custom HTML, or Modules Anywhere.
- Ghost (blog CMS): Insert in Code Injection under Site Header or use HTML card in posts.
If you’re on a big enterprise site, it might be easier to use Google Tag Manager.
2. Insert the HTML
All major builders (Squarespace, Wix, Webflow, Shopify, Drupal, Joomla, Ghost, etc.) have an “Embed” or “Custom HTML” block. Add a new section, or block.
Add the rozz-searchbox tag to the HTML block, configuring its various parameters using attributes. An example of the HTML is shown below. Just paste it into the block.
<rozz-searchbox data-theme-color="blue"></rozz-searchbox>
Then Save, and Publish.
This method works per page, or in a shared footer/header block if you want Rozz everywhere.
There’s a lot of documentation online on how to embed code in your website for each website builder. For example, here’s how to use Embed Blocks on Squarespace:
3. Set Initial Status (optional)
The initial-status attribute controls whether the searchbox is open or closed by default.
data-initial-status="closed" <!-- default option where the search bar is closed, button to open it is displayed -->
data-initial-status="open" <!-- search bar is open by default but can be closed -->
data-initial-status="static" <!-- search bar is open by default and cannot be closed -->
data-initial-status="link" <!-- search bar is closed by default and opened with a custom HTML element -->
4. Place in a DIV or Flex Container (optional)
You can place the searchbox inside a div or a flex container and it will inherit many features of the container. In a flex container, align and justify properties can help in positioning the searchbox more precisely.
Integrating Rozz with WordPress
If you’re running your site on WordPress, then adding Rozz is super simple. Rozz uses a standard WordPress feature called a plugin. Just follow the steps below.
1. Install the plugin
Download the plugin here: Rozz Searchbox Plugin.
In your WordPress dashboard, navigate to ‘Plugins’ > ‘Add New’ > ‘Upload Plugin’. Choose the downloaded file and install it.
Activate the plugin once installed by clicking “Activate Plugin”.
Here’s a video on how to do just that. As we said, super simple.
2. Insert the Rozz Shortcode and Use Attributes to Customize Appearance
Place the following shortcode where you want the searchbox to appear:
[rozz-searchbox]Add attributes to the shortcode to configure the button as you like. Check out the page dedicated to WordPress attributes here.
For a briefing about WordPress shortcodes check out this video.