Integrating a Vaadin Web Application into External Webpages

#java #vaadin #microfrontends

Have you created a web application that would make more sense embedded into another web page?

In my previous blog, I created an NPS (Net Promoter Score) widget that stores data directly into Google Sheets, and in this blog, we look at what it takes to embed this single Vaadin-based view as a part of any other web page. After all, you want to collect user feedback like NPS in the right place and context.

Our primariry goal is to have the web application embedded into another web page. Furthermore, having it in a popup instead of directly on the page makes sense. The example.html is our host page with two examples: direct embedding and a JavaScript popup.

Export a web component...

First, we need to export the application to use from another page. In Vaadin, a utility called WebComponentExporter takes any Vaadin view and exports it as a single custom element. To export a custom element called nps-feedback we create the following class:

public class CustomElementExporter extends WebComponentExporter<NPSView> {
    public CustomElementExporter() {        
        super("nps-feedback");
        // ... [further configuration goes here] ...
    }
}

We can add attribute handling to allow NPS view configuration when using it as custom element. Like passing the header title:

addProperty("header", "Thank you for visiting us").onChange(NPSView::setHeader);

This adds a element property named header with a default value . Whenever the property changes, the setHeader method of NPSView will be called with the new value.

...and embed to a page.

Let's jump into our example host page and see how to embed the NPS feedback there.

The simplest way is to include the component just as-is:

<script type="module" src="./web-component/nps-feedback.js"</script>
<nps-feedback id="nps-web-component" product="page" header="Thanks for being here" question="How like you are to come back?"></nps-feedback>

This will import show the web component to the page. However, I wanted to have the NPS survey presented in a popup dynamically. So, let's check further.

Micro frontend in a dynamic popup

Micro frontends is an architectural style that extends the concepts of microservices to the frontend. It advocates splitting the frontend into smaller, more manageable pieces, each deployable independently.

For our use case of NPS feedback, including it non-intrusively as a popup that the user can open (or can be opened programmatically) on desired pages often makes much sense.

The popup functionality is in a separate JS file. Here, the npm.js module also imports the web component dynamically when needed. It exports the popup functionality in logical methods that we import in our host page:

<script type="module">
import {createNpsPopup, openNpsPopup, closeNpsPopup} from './nps.js';
createNpsPopup("myappfeedback", "Thank you for visiting the service");
</script>

To create a button on the host page to open the created popup, you can attach a click listener as follows.

document.querySelector("#openNpsBtn").addEventListener('click',openNpsPopup);

Conclusion

Embedding your NPS widget as a micro frontend within another webpage is a leap towards enhanced user engagement and modular code. Definitely the way to go with small apps like this.

If you wish to explore more, let the GitHub repository be your launchpad into an ecosystem where web applications no longer need to be monoliths.