Integrating a Vaadin Web Application into External Webpages
Tags: java, vaadin, microfrontends
Published: 2023-10-13 10:39:41

---
title: Integrating a Vaadin Web Application into External Webpages

published: true
description: Micro-frontends don't have to be large web applications to be effective. This is a practical demonstration of integrating a feedback app onto a webpage
tags: java, vaadin, microfrontends
series: Creating an NPS Feedback App
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-13 10:32 +0000
---

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

![Embedded custom NPS Survey Written in Java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibhcgttgbpvac8mif0ug.gif)
In my [previous blog](https://dev.to/samiekblad/push-data-to-google-sheets-from-your-java-app-4hio), 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](https://github.com/samie/nps/blob/v24/demo/src/main/resources/static/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](https://vaadin.com/docs/latest/integrations/embedding/exporter) 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](https://github.com/samie/nps/blob/v24/demo/src/main/resources/static/example.html) 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](https://micro-frontends.org/) 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](https://github.com/samie/nps/blob/v24/demo/src/main/resources/static/nps.js) 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](https://github.com/samie/nps) be your launchpad into an ecosystem where web applications no longer need to be monoliths.