Widget Customization

The ALTCHA Widget is highly customizable, offering built-in themes, flexible display modes, CSS variables, and support for 50+ languages. To experiment with different configurations, visit the Playground.

CSS & Themes

The widget includes prebuilt themes to help you quickly match your brand identity.

default

aqua

business

caramel

cupcake

cyberpunk

lime

wireframe

Apply a theme using the theme attribute:

import "altcha/themes/cyberpunk.css";

<altcha-widget theme="cyberpunk"></altcha-widget>;

You can also create custom themes by overriding CSS variables or modifying the stylesheet directly. For advanced customization, refer to the source code on GitHub.

Checkbox & Switch

Select the interaction style that best fits your UI: a styled checkbox, a modern switch, or a native browser checkbox.

type="checkbox"

Default styled checkbox.

type="switch"

Animated switch (or toggle) style.

type="native"

Browser "native" checkbox, ideal for custom styling.

Example using the type attribute:

<altcha-widget type="switch"></altcha-widget>

Display Modes

Choose from multiple display modes to control how the widget appears in your interface:

• standard — Default visible widget
• floating — Floating bubble (v2-style)
• overlay — Modal-style overlay
• bar — Slim bar at the top or bottom of the screen
• invisible — Fully hidden; use events to manage UI feedback

Example:

<altcha-widget display="invisible"></altcha-widget>

Localization

ALTCHA supports 50+ languages, enabling localized user experiences out of the box. See the Internationalization guide for setup details.