LoyJoy Chat‑Widget 2.0

Native Web‑Komponente statt iFrame – was sich ändert und warum das für dich wichtig ist

Früher setzte LoyJoy – wie fast alle Chat‑Widgets – auf ein eingebettetes iFrame. Damit ließen sich Browser‑Inkonsistenzen elegant umgehen, allerdings war der Ansatz nie ganz befriedigend: Styling und Tracking waren eingeschränkt, Content‑Security‑Policies (CSP) erforderten Zusatzarbeit und das iFrame fühlte sich immer wie ein „Fremdkörper im Fremdkörper“ an.

Mit der neuen Version verabschieden wir uns vom iFrame und liefern das LoyJoy‑Widget jetzt als ES6‑Modul und echte Web‑Komponente aus. Unser CTO Ulrich fasst es so zusammen:

„LoyJoy wird jetzt per ES6‑Modul bereitgestellt. In der Webseite kann der Chat als Custom Element <loyjoy-app> eingefügt werden. Attribute wie process wählen die gewünschte Experience. Damit erfüllen wir die Anforderungen an ein komponentenbasiertes Web.“

Nachfolgend erklären wir, was hinter diesen Schlagworten steckt – praxisnah für Entwickler*innen, aber ebenso verständlich für Marketing‑ und Fachabteilungen.

---

1. ES6‑Module – moderne JavaScript‑Pakete zum Importieren

Was ist das?
ES6‑Module (auch „JavaScript Modules“) sind seit 2015 Teil des Sprachstandards. Sie erlauben, Funktionen oder Klassen sauber zu exportieren und per import einzubinden – ganz ohne globale Variablen.

Warum ist das relevant?

• Saubere Abhängigkeiten: Dein Browser lädt exakt das, was gebraucht wird.
• Performance: Module lassen sich automatisch cachen und per HTTP/2 parallel laden.
• CSP‑Konformität: Module arbeiten problemlos mit strengen Sicherheits­richtlinien.

---

2. Web Components – der Chat als nativer Baustein

Web Components sind ein W3C‑Standard, der drei Kerntechniken kombiniert: Custom Elements, Shadow DOM und HTML Templates.

Vorteile für Entwickler*innen

• Native Integration: Keine iFrame‑Grenze – der Chat verhält sich wie jedes andere HTML‑Element.
• Styling‑Freiheit: Über CSS‑Custom‑Properties passt du das Widget pixel­genau an deine CI an.

Vorteile für Marketing‑Teams

• Schnelleres Laden: Kein zusätzlicher Frame‑Overhead, geringere First Contentful Paint.
• Bessere User Experience: Der Chat passt sich responsiv an und wirkt wie „Teil der Seite“.
• Flexible Platzierung: Ob im Fließtext, als Pop‑up oder Vollbild‑Overlay – ein Tag genügt.

---

3. Das bringt die Zukunft

Mit ES6‑Modulen und Web Components steht LoyJoy auf derselben technologischen Basis wie moderne Frameworks (React, Angular, Vue). Das öffnet Türen für mehrere LoyJoy‑Instanzen auf derselben Seite, ohne Konflikte

---

TL;DR

• Neu: LoyJoy‑Chat als ES6‑Modul & Web Component
• Vorteil: native Integration, bessere Performance, voll CSP‑kompatibel
• Migration: iFrame raus, <script> + <loyjoy-app> rein – fertig!