In Nuxt/VueJs, how can I get SendInBlue Chat Widget to see route changes?

Question

I'm using SendInBlue chat widget on a Nuxt/VueJs website. Through the SendInBlue Conversations UI, the widget reports the visitor's page current location (url and title).
However, the location does not change when the internal route changes (no hard browser location change). I want to see the location changes.

How can I notify the SendInBlue Chat Widget that the route is changing?

score 2 · Accepted Answer · edited Aug 27 '22 at 17:52

The SendInBlue Chat Widget API includes a pageView method that can be called to alert the widget to a route change.

SibConversations('pageView')

This Answer about watching a route provides the basic framework. Note that in my case I added the code to the /layouts/default.vue since it renders most of my pages. (Add to all necessary layouts.)

<script>
export default {
  watch: {
    $route() {
      // on route change, notify SendInBlue Chat Widget so it updates visitor location
      if (process.client) {
        // delay 0.5 seconds to be sure route has actually changed ($nexttick does show correct page title)
        window.setTimeout(() => {
          window.SibConversations('pageView')
        }, 500)
      }
    },
  },
  // ... and data, methods, etc., as needed
}
</script>

So now when the route changes, we notify the widget.

Note: If we trigger window.SibConversations('pageView') without a delay, I found that the title is not correct. I'm assuming the page is not yet rendered. I tried using this.$nexttick, but the title is still not present. So, I use window.setTimeout() to provide a short delay. I found that 100ms works for me, but I used a longer time in case a slower computer took longer. (And we aren't worried about half-second accuracy.)

I also wrapped the call to ensure it's only called on client side. No nasty "windows undefined" errors.

In Nuxt/VueJs, how can I get SendInBlue Chat Widget to see route changes?

1 Answers1