LoyJoy Chat Widget 2.0

Native Web Component instead of iFrame – what’s changing and why it matters

In the past, like most chat widgets, LoyJoy used an embedded iFrame. It helped deal with browser inconsistencies, but the solution was never ideal: styling and tracking were limited, content security policies (CSP) required workarounds, and the iFrame always felt like a “foreign body within a foreign body.”

With the new version, we’re saying goodbye to the iFrame and now delivering the LoyJoy widget as an ES6 module and native Web Component. Our CTO Ulrich sums it up like this:

“LoyJoy is now delivered as an ES6 module. On the website, the chat can be added as a custom element <loyjoy-app>. Attributes like process define the selected experience. This meets the requirements for a component-based web.”

Here’s what that means in practice – clearly explained for developers, and equally understandable for marketers and business users.

---

1. ES6 Modules – modern JavaScript packages

What is it?
ES6 modules (aka JavaScript Modules) have been part of the language standard since 2015. They allow clean exporting and importing of functionality – without global variables.

Why does it matter?

• Clean dependencies: The browser loads exactly what’s needed
• Performance: Modules are cached and load in parallel via HTTP/2
• CSP compatibility: Modules work seamlessly with strict security policies

---

2. Web Components – the chat as a native building block

Web Components are a W3C standard combining Custom Elements, Shadow DOM, and HTML Templates.

Benefits for developers

• Native integration: No iFrame boundary – the chat behaves like any HTML element
• Full styling control: Tweak the widget via CSS custom properties

Benefits for marketing teams

• Faster load times: Less overhead, better performance
• Better UX: The chat feels like a native part of the site
• Flexible placement: Embed inline, as a pop-up, or full-screen – one tag does it all

---

3. Ready for the future

With ES6 modules and Web Components, LoyJoy is built on the same foundation as modern frameworks like React, Angular, or Vue. This opens the door for multiple LoyJoy instances on one page, no conflicts

---

TL;DR

• New: LoyJoy chat as an ES6 module & Web Component
• Benefits: Native integration, better performance, full CSP support
• How to switch: Remove iFrame, add <script> and <loyjoy-app> – done!