# 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](https://playground.altcha.org). ## CSS & Themes The widget includes prebuilt themes to help you quickly match your brand identity. Apply a theme using the `theme` attribute: ```js import "altcha/themes/cyberpunk.css"; ```` ```html ; ```` 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. Example using the `type` attribute: ```html ``` ## 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](/docs/integration/widget/#events) to manage UI feedback Example: ```html ``` ## Localization ALTCHA supports **50+ languages**. You can import individual language translations or a bundle that includes all of them. To import all translations: ```js import "altcha/i18n/all"; ``` To import specific languages only: ```js import "altcha/i18n/de"; import "altcha/i18n/fr-fr"; ``` Alternatively, you can import the combined bundle, which includes both the widget and all translations: ```js import "altcha/i18n"; ``` When using the CDN: ``` https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/i18n/fr-fr.min.js ``` ### Language Detection The widget automatically detects the language from: - The `` attribute - The user's browser settings (`navigator.languages`) To override the language manually, use the `language` attribute: ```html ``` ### Customizing Translations You can override default translations by updating the global `$altcha.i18n` registry (`globalThis.$altcha.i18n` or `window.$altcha.i18n`): ```js import "altcha/i18n/de"; $altcha.i18n.set('de', { ...$altcha.i18n.get('de'), label: 'Ich bin ein Mensch' // Custom label }); ``` ### Supported Languages - Afrikaans (`af`) - Albanian (`sq`) - Amharic (`am`) - Arabic (`ar`) - Armenian (`hy`) - Azerbaijani (`az`) - Bengali (`bn`) - Basque (`eu`) - Belarusian (`be`) - Bosnian (`bs`) - Bulgarian (`bg`) - Catalan (`ca`) - Chinese - Simplified (`zh-cn`) - Chinese - Traditional (`zh-hk`) - Chinese - Traditional (`zh-tw`) - Croatian (`hr`) - Czech (`cs`) - Danish (`da`) - Dutch (`nl`) - English (`en`) - Estonian (`et`) - Finnish (`fi`) - French - Canada (`fr-ca`) - French - France (`fr-fr`) - Georgian (`ka`) - German (`de`) - Greek (`el`) - Hebrew (`he`) - Hindi (`hi`) - Hungarian (`hu`) - Icelandic (`is`) - Indonesian (`id`) - Italian (`it`) - Irish (`ga`) - Japanese (`ja`) - Kazakh (`kk`) - Korean (`ko`) - Latvian (`lv`) - Lithuanian (`lt`) - Luxembourgish (`lb`) - Macedonian (`mk`) - Maltese (`mt`) - Marathi (`mr`) - Montenegrin (`me`) - Norwegian Bokmål (`nb`, `no`) - Persian (`fa`) - Polish (`pl`) - Portuguese - Brazil (`pt-br`) - Portuguese - Portugal (`pt-pt`) - Romanian (`ro`) - Russian (`ru`) - Serbian (`sr`) - Slovak (`sk`) - Slovenian (`sl`) - Spanish - Spain (`es-es`) - Spanish - Latin America (`es-419`) - Swahili (`sw`) - Swedish (`sv`) - Tamil (`ta`) - Telugu (`te`) - Thai (`th`) - Turkish (`tr`) - Turkmen (`tk`) - Ukrainian (`uk`) - Urdu (`ur`) - Vietnamese (`vi`) - Yoruba (`yo`) Regional packages: - All (`all`) - Africa (`africa`) - Americas (`americas`) - Asia (`asia`) - Europe (`europe`)