Integrating the Rozz Searchbox into Your Website
Introduction
Rozz is easy to install on your website, either via HTML or a WordPress plugin.
Adding Rozz to a Standard Website
1. Insert the Script
To embed Rozz, you’ll need to add the following script to your website. 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>
2. Insert the HTML
Add the rozz-searchbox tag to your HTML, configuring its various parameters using attributes. An example is shown below:
<rozz-searchbox data-initial-status="closed" data-theme-color="blue"></rozz-searchbox>
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. In a flex container, align and justify properties can help in positioning the searchbox more precisely.
Integrating Rozz with WordPress
1. Plugin Installation
Download the plugin from 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.
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.