How to integrate Jivosite into Vue on VuePress?

Question

Vue.js

If there is a ready-made solution, I will be very grateful
. I try to connect it myself, but it gives errors during the build stage on build, and everything works fine on dev.
Here is the code:

import VueYandexMetrika from 'vue-yandex-metrika' 
import YmapPlugin from 'vue-yandex-maps'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData // site metadata
  }) => {
    // Яндекс карты
    Vue.use(YmapPlugin);
    // Яндекс Метрика
    Vue.use(VueYandexMetrika, {
      id: 47871251,
      options:{
        accurateTrackBounce: false,
        clickmap: true,
        defer: false,
        ecommerce: false,
        params: [],
        userParams: {},
        trackHash: false,
        trackLinks: true,
        type: 0,
        webvisor: true,
        triggerEvent: false
      },
      router: router,
      env: process.env.NODE_ENV
      // other options
  });
    // Jivosite
    Vue.component('jivosite', function (widgetId){ 
      var widget_id = 'VMKQR5FXUR';
      var d=document;
      var w=window;
      
      function l(){
      var s = document.createElement('script'); 
      s.type = 'text/javascript'; 
      s.async = true; 
      s.src = '//code.jivosite.com/script/widget/'+widget_id; 
      var ss = document.getElementsByTagName('script')[0]; 
          ss.parentNode.insertBefore(s, ss);
          }
          if(d.readyState=='complete'){
              l();
          }
          else {
              if (w.attachEvent) {
                  w.attachEvent('onload',l);
                  }
              else {
                  w.addEventListener('load',l,false);
                  }
                }
          })
                  
      ();

            
  }

I don’t understand where the error is. just learning javascript and vuejs

Rendering static HTML...
Rendering page: /contacts.htmlError rendering /contacts.html:
ReferenceError: document is not defined
    at server-bundle.js:3431:11
    at enhanceApp (server-bundle.js:3455:5)
    at createApp (Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/app/app.js:81:2)
    at module.exports.__webpack_exports__.default (Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/app/serverEntry.js:4:26)
    at new Promise (<anonymous>)
    at module.exports.__webpack_exports__.default (Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/app/serverEntry.js:3:26)
    at /Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8426:15
    at new Promise (<anonymous>)
    at /Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8388:14
    at Object.renderToString (/Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8564:9)
    at renderPage (/Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/build.js:143:29)
    at build (/Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/build.js:66:11)
    at <anonymous>
MacBook-Pro-Samil:vpress samildasapylov$ vuepress build

Rendering static HTML...
Rendering page: /contacts.html(node:18595) UnhandledPromiseRejectionWarning: ReferenceError: document is not defined
    at /Users/samildasapylov/.config/yarn/global/node_modules/vue-yandex-metrika/dist/vue-yandex-metrika.js:1:8198
    at new Promise (<anonymous>)
    at new n (/Users/samildasapylov/.config/yarn/global/node_modules/vue-yandex-metrika/dist/vue-yandex-metrika.js:1:1784)
    at i (/Users/samildasapylov/.config/yarn/global/node_modules/vue-yandex-metrika/dist/vue-yandex-metrika.js:1:8170)
    at a (/Users/samildasapylov/.config/yarn/global/node_modules/vue-yandex-metrika/dist/vue-yandex-metrika.js:1:9968)
    at Function.Vue.use (/Users/samildasapylov/.config/yarn/global/node_modules/vue/dist/vue.runtime.common.js:4751:14)
    at enhanceApp (server-bundle.js:3429:9)
    at createApp (server-bundle.js:3554:3)
    at module.exports.__webpack_exports__.default (server-bundle.js:3574:13)
    at new Promise (<anonymous>)
    at module.exports.__webpack_exports__.default (server-bundle.js:3573:110)
    at /Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8426:15
    at new Promise (<anonymous>)
    at /Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8388:14
    at Object.renderToString (/Users/samildasapylov/.config/yarn/global/node_modules/vue-server-renderer/build.js:8564:9)
    at renderPage (/Users/samildasapylov/.config/yarn/global/node_modules/vuepress/lib/build.js:143:29)
(node:18595) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:18595) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Generating service worker...

Answer 1

Why register jivosite as a component?
It is better to arrange it with a plugin (like Metrica and Maps).