Anpassung des Designs
CaptchaFox kann durch die Anpassung der Design-Optionen an Ihre Markenfarben angepasst werden.
Dies kann über die Einstellungen im Admin-Portal, durch die Auswahl eines vorgefertigten Designs oder durch die Bereitstellung eines eigenen Designs erfolgen.
Beispiel:
![Individuelles Design](/_next/image?url=%2Fassets%2Ftheme-custom.png&w=750&q=75)
Designs
Die folgenden Basis-Designs können aktiviert werden, indem das Attribut data-theme
auf dem Container-Element oder die Eigenschaft theme
über die JavaScript-API angegeben wird.
Hell (Standard)
![Helles Design](/_next/image?url=%2Fassets%2Ftheme-light.png&w=750&q=75)
Dunkel
![Dunkles Design](/_next/image?url=%2Fassets%2Ftheme-dark.png&w=750&q=75)
Portal Einstellungen
Das CaptchaFox Admin-Portal ermöglicht es Benutzern mit den entsprechenden Berechtigungen, Farben und Einstellungen schnell und einfach zu aktualisieren, ohne die Hilfe eines Entwicklers in Anspruch nehmen zu müssen.
Die folgenden Designeinstellungen können über das Portal angepasst werden:
- CaptchaFox Logo ein-/ausblenden (nur im Portal verfügbar)
- Primär-Farbe
- Fehler-Farbe
- Erfolg-Farbe
- Radius des Rahmens
Individuelles Design (Beta)
Ein benutzerdefiniertes Design kann zum Zeitpunkt des Renderns angegeben werden, um alle Designoptionen außer Kraft zu setzen. Auf diese Weise können Sie das Design vollständig anpassen, um Ihre eigene Marke widerzuspiegeln.
Da das benutzerdefinierte Design eine höhere Priorität hat, werden über die Portal-Benutzeroberfläche vorgenommene Farbänderungen nicht mehr übernommen.
captchafox.render(element, {
sitekey: 'IHR_SITEKEY',
theme: {
// Design Definition
},
});
{
general: {
primary: string;
success: string;
error: string;
borderRadius: number;
};
button: {
background: string;
backgroundHover: string;
text: string;
checkbox: string;
};
panel: {
background: string;
border: string;
text: string;
};
slider: {
background: string;
knob: string;
};
}