Adding Rozz to Your Website: Data Attributes Guide

The <rozz-box> web component allows for extensive customization using several data-* attributes. These attributes control the look and feel of the component, from button styling to box behavior.

WordPress Shortcode Users The attributes are simplified in WP: remove the ‘data-‘ and replace ‘-‘ with ‘_’. For example: data-button-background becomes button_background. The full list of shortcodes is available here. The WP plugin itself is available here.

Button Attributes

• data-button-background
• Default: #b7238b
• Description: Sets the background of the button using a CSS color or formula.
• Usage Example:

  <rozz-box data-button-background="linear-gradient(90deg, #ff0000, #00ff00)"></rozz-box>
  

• data-button-text
• Default: ASK ANYTHING
• Description: Customizes the text displayed inside the button.
• Usage Example:

  <rozz-box data-button-text=" Now"></rozz-box>
  

• data-button-animation
• Default: false
• Description: Enables or disables the animation effect on the button.
• Values: true : Enables animation / false : Disables animation.
• Usage Example:

  <rozz-box data-button-animation="true"></rozz-box>
  

• data-button-top-position
• Default: 30%
• Description: Defines the vertical position of the button relative to the viewport height.
• Usage Example:

  <rozz-box data-button-top-position="70vh"></rozz-box>
  

• data-button-right-position
• Default: 5 %
• Description: Defines the horizontal position of the button relative to the viewport width.
• Usage Example:

  <rozz-box data-button-right-position="10vw"></rozz-box>
  

• data-button-positioning-method
• Default: fixed
• Description: Controls how the button is positioned on the page.
• Most common values:
• fixed: Button is fixed to a position relative to the viewport.
• absolute: Button is positioned relative to the nearest positioned ancestor.
• relative: Button is positioned relative to its normal position in the flow of the document.
• sticky: Button stays fixed while scrolling within its container.
• Usage Example:

  <rozz-box data-button-positioning-method="absolute"></rozz-box>
  

Box Attributes

• data-max-width
• Default: 900px
• Description: Defines the maximum width for the component. Supports various units such as px, %, vw, vh, em, rem, cm.
• Usage Example:

  <rozz-box data-max-width="50%"></rozz-box>
  

• data-max-height
• Default: 75vh
• Description: Defines the maximum height for the component. Supports various units such as px, %, vh, etc.
• Usage Example:

  <rozz-box data-max-height="600px"></rozz-box>
  

• data-font-family
• Default: Verdana, Arial, sans-serif
• Description: Sets the font family used in the box component, allowing for custom fonts.
• Usage Example:

  <rozz-box data-font-family="'Courier New', monospace"></rozz-box>
  

• data-initial-status
• Default: closed
• Description: Defines the initial state of the box when the page loads.
• Values:
• closed: The box is closed initially.
• open: The box is open initially and can be closed.
• static: The box is in a static, open state and remains open.
• link: The box is opened by another component on your page. Check here for details on how that works.
• Usage Example:

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

• data-theme-color
• Default: #b7238b
• Description: Controls the primary theme color of the box, affecting elements like the button, border, and outlines.
• Usage Example:

  <rozz-box data-theme-color="blue"></rozz-box>
  

• data-query-background
• Default: #E3E3E3
• Description: Sets the background color of the query block, where the user’s query is displayed.
• Usage Example:

  <rozz-box data-query-background="pink"></rozz-box>
  

• data-query-text-color
• Default: #8A1968
• Description: Defines the text color for the query block.
• Usage Example:

  <rozz-box data-query-text-color="red"></rozz-box>
  

• data-result-text-color
• Default: #000000 (black)
• Description: Controls the text color of the result block, where responses to queries are displayed.
• Usage Example:

  <rozz-box data-result-text-color="purple"></rozz-box>
  

Technical Details

All attributes are implemented using CSS variables and Lit component properties, ensuring flexibility and ease of customization. When these attributes are provided, they are reflected in the underlying DOM, allowing the user to change the appearance and behavior of the box without modifying the core code.

• CSS Variables: CSS variables like --theme-color, --query-background, and --result-text-color are updated dynamically based on the attribute values. If no value is provided, default values are applied.
• Property Reflection: Each attribute is mapped to a corresponding property in the Lit component using the reflect: true option, ensuring the attribute value is synced with the property and available for both rendering and styling.

Example of Integrating Rozz

Here’s an example of integrating Rozz to your website with custom settings. Note that you only need to include in your code the attributes that you wish to customize, the others will fall back to defaults if they are not present.

<rozz-box
  data-button-background="pink"
  data-button-text="hello world"
  data-button-animation="true"
  data-button-top-position="50vh"
  data-button-right-position="5vw"
  data-button-positioning-method="fixed"
  data-max-width="900px"
  data-max-height="75%vh"
  data-font-family="courier"
  data-initial-status="closed"
  data-theme-color="blue"
  data-query-background="pink"
  data-result-text-color="purple"
  data-query-text-color="red"
></rozz-box>

By using these data attributes, you can easily customize Rozz to fit seamlessly into your website’s design and functionality!

Posted September 3, 2024

---

Searchbox Attributes

The following attributes pertain to the searchbox portion of Rozz and mirror many of the box attributes above.

• data-max-width
• Default: 900px
• Description: Defines the maximum width for the component. Supports various units such as px, %, vw, vh, em, rem, cm.
• Usage Example:

  <rozz-box data-max-width="50%"></rozz-box>
  

• data-max-height
• Default: 75vh
• Description: Defines the maximum height for the component. Supports various units such as px, %, vh, etc.
• Usage Example:

  <rozz-box data-max-height="600px"></rozz-box>
  

• data-font-family
• Default: Verdana, Arial, sans-serif
• Description: Sets the font family used in the searchbox component, allowing for custom fonts.
• Usage Example:

  <rozz-box data-font-family="'Courier New', monospace"></rozz-box>
  

• data-initial-status
• Default: open
• Description: Defines the initial state of the searchbox when the page loads.
• Values:
• closed
• open
• static
• link
• Usage Example:

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

• data-theme-color
• Default: #b7238b
• Description: Controls the primary theme color of the searchbox component, affecting elements like the button, border, and outlines.
• Usage Example:

  <rozz-box data-theme-color="blue"></rozz-box>
  

• data-query-background
• Default: #E3E3E3
• Description: Sets the background color of the query block, where the user’s query is displayed.
• Usage Example:

  <rozz-box data-query-background="pink"></rozz-box>
  

• data-query-text-color
• Default: #8A1968
• Description: Defines the text color for the query block.
• Usage Example:

  <rozz-box data-query-text-color="red"></rozz-box>
  

• data-result-text-color
• Default: #000000 (black)
• Description: Controls the text color of the result block, where responses to queries are displayed.
• Usage Example:

  <rozz-box data-result-text-color="purple"></rozz-box>
  

Example of Integrating Rozz (Searchbox-focused)

<rozz-box
  data-button-background="pink"
  data-button-text="hello world"
  data-button-animation="true"
  data-button-top-position="50vh"
  data-button-right-position="5vw"
  data-button-positioning-method="fixed"
  data-max-width="900px"
  data-max-height="75vh"
  data-font-family="courier"
  data-initial-status="closed"
  data-theme-color="blue"
  data-query-background="pink"
  data-result-text-color="purple"
  data-query-text-color="red"
></rozz-box>

Technical Details (continued)

• All attributes are reflected into CSS variables and Lit properties, enabling dynamic styling and behavior customization.

Example of Integrating Rozz (Final)

<rozz-box
  data-button-background="pink"
  data-button-text="hello world"
  data-button-animation="true"
  data-button-top-position="50vh"
  data-button-right-position="5vw"
  data-button-positioning-method="fixed"
  data-max-width="900px"
  data-max-height="75vh"
  data-font-family="courier"
  data-initial-status="closed"
  data-theme-color="blue"
  data-query-background="pink"
  data-result-text-color="purple"
  data-query-text-color="red"
></rozz-box>

Posted September 3, 2024