Инструкция по интеграции GIG Support Chat

Этот модуль представляет собой автономный виджет чата техподдержки для Vue 3 приложений.

1. Установка

npm install @vunex/support-chat

2. Инициализация (main.ts)

import { createApp } from 'vue';
import App from './App.vue';
import GigSupportChat from '@gig/support-chat';
import '@gig/support-chat/style.css';

const app = createApp(App);

app.use(GigSupportChat, {
  config: {
    // URL бэкенда техподдержки
    apiUrl: 'https://support-api.digitaltaxtech.kz',
    // Путь для сокетов (дефолтно /ws)
    path: '/ws',
    // Ключ системы, выдается администратором
    apiKey: 'your_project_api_key',
    // Уникальный ID текущего пользователя
    uuid: 'user-unique-id',
    // Данные для отображения оператору (необязательно)
    metaUser: {
      name: 'Иван Иванов',
      phone: '+7 777 000 00 00',
      role: 'CLIENT'
    }
  }
});

app.mount('#app');

3. Компонент (App.vue)

Разместите компонент в корневом шаблоне вашего приложения:

<template>
  <div id="app">
    <router-view />
    <!-- Виджет чата появится в правом нижнем углу -->
    <GigSupportChat />
  </div>
</template>

4. Особенности

• Изоляция стилей: Все CSS классы начинаются с префикса gig-, что предотвращает конфликты с вашими стилями.
• Адаптивность: Окно чата оптимизировано для десктопных и мобильных браузеров.
• Дизайн: Современный интерфейс с эффектами глассморфизма и плавными анимациями.
• Зависимости: Модуль сам управляет соединением через socket.io-client.