Install

Widget installation
‍
‍Add the VivoChat widget to the pages of your website.

Installation steps
‍
1. Create a channel
Go to the section:
`Management → Communication channels`
Create a channel with the type: `Website widget`

2. Get the WIDGET_ID
Open the channel settings:
`Management → Communication channels → [channel] → Options`
Copy the value:
`Channel identifier`
`WIDGET_ID` is the public identifier of the channel. It is used to connect the widget to your website.

3. Connect the widget
Insert the code before the closing `</body>` tag on every page where the chat should be displayed.The script loads asynchronously and does not block page rendering.Connecting the script again does not create a duplicate interface.

<script defer>
  (
    () => {
      const loadScript = (callback) => {
        const widgetId = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = '//widget.vivo-chat.com/script/widget/' + widgetId;
        script.onload = callback;
        const sourceScript = document.getElementsByTagName('script')[0];
        sourceScript.parentNode.insertBefore(script, sourceScript);
      }    
        const initWidget = () => {
          const withIcon = true; 
          vivo_api.run({withIcon});
        }        
          loadScript(initWidget)  }
  )();
</script>

tsximport {
  useEffect
}
from 'react';
const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID
const WIDGET_SRC = `//widget.vivo-chat.com/script/widget/${WIDGET_ID}`;
declare global {
  interface Window {
    vivo_api ? : {
      run: (opts: {
        withIcon: boolean
      }) => void;destroy: () => void;
    };
  }
}
export function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = WIDGET_SRC;
    script.async = true;
    script.onload = () => window.vivo_api?.run({
      withIcon: true
    });
    document.body.appendChild(script);
    return () => {
      window.vivo_api?.destroy();
      script.remove();
    };
  }, []);
  return < > {
    /* ... */ } < />;}

tsx 'use client';
import Script from 'next/script';
const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID
export function VivoChat() {
  useEffect(() => {
    return () => {
      window.vivo_api?.destroy();
    };
  }, []);
  return ( < Script src = {
        `//widget.vivo-chat.com/script/widget/${WIDGET_ID}`
      }
      strategy = "afterInteractive"
      onLoad = {
        () => window.vivo_api?.run({
          withIcon: true
        })
      }
      />    );  }

vue < script setup lang = "ts" >
  import {
    onMounted,
    onBeforeUnmount
  } from 'vue';
const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID
let script: HTMLScriptElement | null = null;
onMounted(() => {
  script = document.createElement('script');
  script.src = `//widget.vivo-chat.com/script/widget/${WIDGET_ID}`;
  script.async = true;
  script.onload = () => window.vivo_api?.run({
    withIcon: true
  });
  document.body.appendChild(script);
});
onBeforeUnmount(() => {
  window.vivo_api?.destroy();
  script?.remove();
}); < /script>

vue < script setup lang = "ts" >
  const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID    
onMounted(() => {
  useHead({
    script: [{
      src: `//widget.vivo-chat.com/script/widget/${WIDGET_ID}`,
      async: true,
      tagPosition: 'bodyClose',
      onload: () => window.vivo_api?.run({
        withIcon: true
      }),
    }, ],
  });
});
onBeforeUnmount(() => {
  window.vivo_api?.destroy();
}); < /script>

vue < script setup lang = "ts" >
  const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID
const {
  onLoaded
} = useScript(`//widget.vivo-chat.com/script/widget/${WIDGET_ID}`, {
  trigger: 'client'
}, );
onLoaded(() => {
  window.vivo_api?.run({
    withIcon: true
  });
});
onBeforeUnmount(() => {
  window.vivo_api?.destroy();
}); < /script>

ts
import {
  Component,
  OnInit,
  OnDestroy
} from '@angular/core';
declare const vivo_api: {
  run: (opts: {
    withIcon: boolean
  }) => void;destroy: () => void;
};
@Component({
  selector: 'app-root',
  standalone: true,
  template: `<!-- ... -->`,
}) export class AppComponent implements OnInit, OnDestroy {
  private readonly WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID  
  private script?: HTMLScriptElement;
  ngOnInit(): void {
    this.script = document.createElement('script');
    this.script.src = `//widget.vivo-chat.com/script/widget/${this.WIDGET_ID}`;
    this.script.async = true;
    this.script.onload = () => vivo_api.run({
      withIcon: true
    });
    document.body.appendChild(this.script);
  }
  ngOnDestroy(): void {
    vivo_api?.destroy();
    this.script?.remove();
  }
}

Let's Talk