How It Works | KazyUI
KazyUI

How it Works

KazyUI is meant to extend standard editors with small, self‑contained code blocks. The process is straightforward:

1Select Your Component

Browse the library to find the element you want. Each option is a lightweight snippet built with plain CSS and vanilla JS.

2Customize via Sliders

Before copying any code, adjust the look and feel using the slider interface. You can change:

  • Colors: Match your brand palette.
  • Radius & Style: Fit the geometry into your layout.
  • Animation Speed: Control the intensity of effects.

This keeps customization simple and avoids manual edits.

3Copy & Paste

Once you’re happy with the settings, copy the snippet. In Systeme.io, drag a Raw HTML element onto your page and paste the code.

  • Zero‑Conflict Injection: Each snippet is scoped to a block ID, so styles don’t leak on the platform.
  • One Block Rule: Place each snippet in its own Raw HTML block for clarity.

4Preview & Optimize

Check your funnel in preview mode before publishing.

  • Mobile Awareness: Make sure animations feel smooth on mid‑range devices.
  • Less Is More: Use a few components to highlight your call‑to‑action rather than stacking too many effects.

Compatibility & Behavior

This system is primarily designed for the Systeme.io editor. However, many components may also work in other page builders that support custom HTML, CSS, and JavaScript injection, compatibility outside Systeme.io is not guaranteed.

The "Target Block ID" field is used to define where styles and scripts are applied. In Systeme.io, this typically refers to a Raw HTML block ID. Other environments may use different selectors such as IDs, classes, or data attributes.

Examples:
Systeme.io
#rawhtml-a7c2984b#button-5c4b6321#row-235ba3dc
Other Builders
#custom-code-tDMUHF2c5i.custom-class#section-12345678

Components are generated using scoped selectors to help reduce style conflicts and unintended effects on other page elements. While generated selectors are optimized for Systeme.io, many components may also function in other page builders without modification.

Component behavior may vary depending on the platform's structure, styling system, rendering rules, installed scripts, and custom CSS. Manual adjustments may occasionally be required for optimal results outside Systeme.io.