Vue 3 integration

Create a composable that loads the widget on the client only:

src/composables/useSupportDesk.ts

import { watch } from 'vue';
import { useAuthStore } from '@/stores/auth';

const WIDGET_URL = import.meta.env.VITE_SUPPORTDESK_WIDGET_URL;
const APP_ID = import.meta.env.VITE_SUPPORTDESK_APP_ID;
const PUBLIC_KEY = import.meta.env.VITE_SUPPORTDESK_PUBLIC_KEY;

let scriptLoaded = false;

export function useSupportDesk() {
  const auth = useAuthStore();

  const init = (user: any) => {
    if (!(window as any).SupportDesk) return;
    (window as any).SupportDesk.destroy();
    (window as any).SupportDesk.init({
      appId: APP_ID,
      apiKey: PUBLIC_KEY,
      customer: {
        externalId: user.id,
        email: user.email,
        name: user.name,
      },
      theme: { primaryColor: '#2563eb', showButton: false },
    });
  };

  watch(
    () => auth.user,
    (user) => {
      if (!user) return;

      if (scriptLoaded) {
        init(user);
        return;
      }

      const script = document.createElement('script');
      script.src = WIDGET_URL;
      script.async = true;
      script.onload = () => {
        scriptLoaded = true;
        init(user);
      };
      document.head.appendChild(script);
    },
    { immediate: true },
  );

  const toggle = () => (window as any).SupportDesk?.toggle();
  return { toggle };
}

Usage in a component

<script setup lang="ts">
import { useSupportDesk } from '@/composables/useSupportDesk';

const { toggle } = useSupportDesk();
</script>

<template>
  <button @click="toggle">Contact support</button>
</template>