pendo or similar service inside Vaadin app

Vaadin 6 / 7 / 8 Framework UI
1

How do people use [pendo]
(https://www.pendo.io/) inside a Vaadin 7 application? I know of the following things that need to be done, with my current pendo knowledge:

  1. Embed pendo JavaScript snippet on every page. So, since most Vaadin apps are single page apps, I guess this snippet needs to be loaded in UI, maybe using Page.getCurrent().getJavaScript().execute or JavaScript.getCurrent().execute. I think there is also a @JavaScript annotation, but I have tried that a few times and could not get it to work (see https://vaadin.com/forum/thread/18363995/referencing-javascript-with-javascript-annotation and https://stackoverflow.com/questions/62961073/how-to-add-a-javascript-plugin-to-vaadin-website for one place where I could not get it to work).
  2. Initialize pendo by calling pendo.initialize({...});. I guess this needs to be done after logging into my application (so have user id at this point) via JavaScript.getCurrent().execute, but not entirely sure where to do this. Also, according to Pendo, it needs to be done on every windows reload. I guess I could do this in my UI class, only occuring after login is complete. But do I also need to do it when going between views? That is not, strictly speaking, a reload, so just not sure.

Basically, I figure someone out there has used Pendo in a Vaadin application, so looking for any advice I can get.

2

There is not much Vaadin 7 examples around here, but there is using JavaScript and integrating JavaScript learning resource for Vaadin 8 here https://vaadin.com/learn/training/client-side-javascript-components And that part has been fairly unchanged between the two versions. So I would recommend to check that first.

3

Since mine is not a component, I went a different route:

  1. Based on the fact that this is a single page app, I followed the directions [here]
    (https://support.pendo.io/hc/en-us/articles/360031862272-Installation-for-Single-Page-Frameworks#YourInstallationSnippet) and [here]
    (https://support.pendo.io/hc/en-us/articles/360022819711-Snippet-Install#Step3InstallthePendoJavaScriptSnippet), and created a pendo.js script in my resources directory. This script only has the “Part 1 of Snippet” from the first link, and obviously I got rid of <script> and </script>, since I put it in a file by itself.
  2. In my UI class, I added @com.vaadin.annotations.JavaScript("pendo.js")
  3. After logging in, I run JavaScript.getCurrent().execute(pendoInitialization);, where “pendoInitialization” is Visitor and account information as requested in the first link above, in my case something like pendo.initialize({visitor: {id: 'VDR_JCARROS'}, account: {id: 'VEEDER'}});.

This seems to work well.