Widget mit Custom Code individuell anpassen
Mit dem Custom Code kannst du dein aleno Widget individuell anpassen – sei es durch kleinere Designänderungen oder funktionale Erweiterungen wie Zeichenlimits in Eingabefeldern. In diesem Artikel erklären wir dir, wie es funktioniert, was grundsätzlich möglich ist und geben dir konkrete Beispiele zur direkten Umsetzung.
Du findest den Custom Code Bereich in aleno unter Einstellungen > Widget > Custom Code.
Falls du den Bereich nicht sehen kannst, ist das Feature für deinen Account noch nicht aktiviert. In diesem Fall sende einfach eine kurze E-Mail an support@aleno.me – wir schalten es gern für dich frei.
🛠️ Wie es funktioniert
Im Bereich Widget > Custom Code kannst du eigenen HTML-, CSS- oder JavaScript-Code einfügen. Dieser wird beim Laden des Widgets automatisch im <head>-Bereich des Widgets ausgeführt – also innerhalb des iFrames, in dem das Widget angezeigt wird.
Du kannst dort z. B.:
-
CSS nutzen, um das Aussehen von Elementen zu ändern (Farben, Abstände, Schriftgrößen)
-
JavaScript nutzen, um Felder dynamisch zu beeinflussen (z. B. Zeichenlimit setzen oder Platzhaltertexte ändern)
Wichtig: Da der Code im head des Widgets ausgeführt wird, hast du nur Zugriff auf das, was innerhalb des Widgets selbst passiert – nicht auf Inhalte außerhalb (z. B. deiner Hauptwebsite).
💡 Was man damit machen kann (grob)
Mit dem Custom Code lassen sich z. B. folgende Dinge umsetzen:
-
Layout und Farben anpassen
-
Texte umformulieren oder ersetzen
-
Zeichenlimit für Eingabefelder setzen
-
Hinweise oder Validierungen ergänzen
🔍 Beispiele
a) Zeichenlimit setzen (Kommentar-Feld)
<script>
const applyMaxlength = () => {
const noteField = document.querySelector('input[name="note"]');
if (noteField && !noteField.hasAttribute('maxlength')) {
noteField.setAttribute('maxlength', '300');
const notice = document.createElement('div');
notice.textContent = 'Max. 300 Zeichen erlaubt.';
notice.style.fontSize = '12px';
notice.style.marginTop = '4px';
notice.style.color = '#666';
noteField.parentNode.appendChild(notice);
}
};
applyMaxlength();
const observer = new MutationObserver(() => {
applyMaxlength();
});
observer.observe(document.body, { childList: true, subtree: true });
</script>
b) Wording ändern (z. B. Button-Beschriftung)
<script>
const updateButtonLabel = () => {
const button = Array.from(document.querySelectorAll('button'))
.find(el => el.textContent.includes('Buchen'));
if (button) {
button.textContent = 'Tisch sichern';
}
};
updateButtonLabel();
const observer = new MutationObserver(() => {
updateButtonLabel();
});
observer.observe(document.body, { childList: true, subtree: true });
</script>
c) Farbe der Buttons ändern
<style>
button {
background-color: #28a745 !important;
color: white !important;
}
</style>
📌 Hinweis zur Verantwortung & Support
Die Nutzung des Custom Codes erfolgt auf eigene Verantwortung. Bitte beachte, dass wir für Änderungen, die über den offiziellen Funktionsumfang des Widgets hinausgehen, keinen Support übernehmen können.
Funktion und Stabilität des Widgets können bei fehlerhaftem Code beeinträchtigt werden – bitte teste alle Änderungen gründlich im Vorschau-Modus, bevor du sie live schaltest.