How to determine what Widget version is installed

There are currently 2 flavours of installations, HTML script tag or NPM install. This document will cover both these cases. It requires a bit of sleuthing in browser dev tools, which we have documented here.

HTML script tag installations

This is the most common installation type our customers use due to its simplicity. I will use nowcircular.com.au in my examples.

1. Load up the website, and then open Devtools (fn + F12) or Right click on a blank space and followed by Inspect in the context menu.

   

2. Then click on the Network tab, then search for web.js. In the search results, hover over them to see which file it is. In Circular’s case, the file points to https://cdn.jsdelivr.net/npm/@brainfish-ai/widgets-initiator@latest/dist/web.js.

:::info There are currently 2 web widget packages which are identical. Just named differently. They are web-widget and widgets-initiator.

Widgets initiator is the old name of web widget. It was kept to prevent customers from having to change their scripts to adopt the new one.

:::

1. Hovering on the other web.js file will show you what widget version is loaded.

   

So in this case, we can see that Circular is using the latest web-widget package. The tell-tale sign is widgets-initiator@latest in the first web.js result.

Then we can then see that it’s using version 0.16.7-circular of the legacy search widget. The telltale sign is search-widget@0.16.7-circular.

NPM installations

Now, if you have tried the above and don’t see either a web-widget or widgets-initiator script, then the chances are they’ve installed the widget via npm (node package manager). Our platform exhibits this.

1. In devtools, go to the Console tab. This is where you can type in javascript to get some answers.
2. In the console, type in window.Brainfish.Widgets and press ⏎ return This will then print out an expandable object. Go ahead, expand it. Then expand init as well.
3. You will then see a FunctionLocation. Click on that.
4. You’ll then be taken to the Sources tab, which displays to you the contents of that file you just clicked on. Click anywhere in that file and press CMD + F to find something in the file.
5. In the search, type in WebWidgetVersion and hit enter. You’ll then be taken to the section of the code where the version number is used.

This is how you can reliably find out which web widget version is loaded.