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.

Connecting the widget

Javascript

<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.vivochat.ai/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>

React

import { useEffect } from 'react';

const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID

const WIDGET_SRC = `//widget.vivochat.ai/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 <>{/* ... */}</>;
}

Nextjs

  '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.vivochat.ai/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.vivochat.ai/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>

Nuxt

<script setup lang="ts">
  const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID

  onMounted(() => {
    useHead({
      script: [
        {
          src: `//widget.vivochat.ai/script/widget/${WIDGET_ID}`,
          async: true,
          tagPosition: 'bodyClose',
          onload: () => window.vivo_api?.run({ withIcon: true }),
        },
      ],
    });
  });

  onBeforeUnmount(() => {
    window.vivo_api?.destroy();
  });
</script>

Nuxt 3.11+

<script setup lang="ts">
  const WIDGET_ID = 'YOUR_WIDGET_ID'; // Replace with YOUR_WIDGET_ID

  const { onLoaded } = useScript(
    `//widget.vivochat.ai/script/widget/${WIDGET_ID}`,
    { trigger: 'client' },
  );

  onLoaded(() => {
    window.vivo_api?.run({ withIcon: true });
  });

  onBeforeUnmount(() => {
    window.vivo_api?.destroy();
  });
</script>

Angular

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.vivochat.ai/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();
  }
}