Skip to content
English
create Ticket
Go to aleno.me
  • There are no suggestions because the search field is empty.

Customize the widget individually with custom code

With custom code, you can individually customize your Aleno widget—whether through minor design changes or functional enhancements such as character limits in input fields. In this article, we explain how it works, what is generally possible, and provide concrete examples for direct implementation.

You can find the Custom Code section in aleno under Settings > Widget > Custom Code.

If you don’t see this section, the feature hasn’t been activated for your account yet. In that case, simply send a quick email to support@aleno.me – we’ll be happy to enable it for you.

🛠️How it works

In the Widget > Custom Code section, you can insert your own HTML, CSS, or JavaScript code. This code is automatically executed in the section of the widget when it loads—meaning it runs within the iframe where the widget is displayed.

There, you can, for example:

  • Use CSS to change the appearance of elements (colors, spacing, font sizes).
  • Use JavaScript to dynamically influence fields (e.g., set a character limit or change placeholder text).

Important: Since the code is executed in the <head> section of the widget, you only have access to what happens within the widget itself—not to content outside of it (e.g., your main website).

💡What can be done 

With custom code, the following things can be implemented, for example:

  • Adjust layout and colors
  • Reword or replace text
  • Set character limits for input fields
  • Add hints or validations

🔍Examples

a) Set character limit (comment field)

<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) Change wording (e.g., button label)

 

<script>
  const updateButtonLabel = () => {
    const button = Array.from(document.querySelectorAll('button'))
      .find(el => el.textContent.includes('Reservieren'));

    if (button) {
      button.textContent = 'Tisch sichern';
    }
  };

  updateButtonLabel();

  const observer = new MutationObserver(() => {
    updateButtonLabel();
  });

  observer.observe(document.body, { childList: true, subtree: true });
</script>

c) Change the color of buttons

<style>
  button {
    background-color: #28a745 !important;
    color: white !important;
  }
</style>

📌Note on responsibility & support

The use of custom code is at your own risk. Please note that we cannot provide support for changes that go beyond the official functionality of the widget.

The functionality and stability of the widget may be affected by faulty code—please thoroughly test all changes in preview mode before making them live.