Integrating LiveView Applications with External Sites Using LiveViewPortal

This article introduces LiveViewPortal, a Proof of Concept (PoC) library that enables developers to embed LiveView applications within third-party web pages while maintaining reactivity and real-time updates. The core functionality of LiveViewPortal revolves around using the Shadow DOM to achieve HTML and styling isolation, allowing the LiveView to be embedded via a JavaScript fetch request to the LiveView route. The guide outlines necessary configurations within a Phoenix application for proper operation. It describes the server-side and client-side components, demonstrating how to configure the endpoint and router along with the use of the LivePortal class for managing LiveView connections. By embedding LiveViews within Shadow DOM, developers gain improved performance, better communication capabilities, and SEO benefits. Various potential applications of this library are also suggested, contributing to the broader Phoenix ecosystem.