📦 sw-console-chat

Chat module for personal accounts using GREEN-API.

📥 Installation

To install dependencies:

npm install

🚀 Development Mode

Start the development server:

npm run dev

📦 Production Build

Build the app for production:

npm run build

Compiled files will be located in the dist/ directory.

---

🔐 Authorization Methods

You can provide authorization data to the chat module using either postMessage or URL query parameters.

---

1. Authorization via postMessage

To send authorization data from a parent window to an embedded iframe, use the postMessage API.

Example:

iframeReference.current?.contentWindow?.postMessage(
  {
    type: MessageEventTypeEnum.INIT,
    payload: {
      login: login,
      apiTokenUser: apiTokenUser,
      idUser: idUser,
      idInstance: instanceData.idInstance,
      apiTokenInstance: instanceData.apiTokenInstance,
      apiUrl: instanceData.apiUrl,
      mediaUrl: instanceData.mediaUrl,
      tariff: instanceData.tariff,
      locale: resolvedLanguage,
      theme: currentTheme,
      platform: platform,
      projectId: projectId,

      // customization
      brandDescription: 'Welcome to our support chat!',
      logo: 'https://example.com/logo.png',
    },
  },
  CHAT_APP_URL // Replace with the actual iframe URL
);

Payload Fields

Field	Type	Description
login	string	User login
apiTokenUser	string	User API token
idUser	string	User ID
idInstance	number	Instance ID
apiTokenInstance	string	API token for the instance
apiUrl	string	Base API URL
mediaUrl	string	Media upload URL
tariff	TariffsEnum	Tariff plan (see below)
locale	string | undefined	Optional language code (e.g., en, ru)
theme	ThemesEnum	Theme mode (see below)
platform	string	Platform ID (e.g., web, android, ios)
projectId	string	Project identifier
brandDescription	string	Welcome message when no chat is selected
logo	string	Image/logo URL above the description

TariffsEnum

export const enum TariffsEnum {
  Developer = 'DEVELOPER',
  Business = 'BUSINESS',
  BusinessUSD = 'BUSINESS_USD',
  BusinessKZT = 'BUSINESS_KZT',
}

ThemesEnum

export const enum ThemesEnum {
  Default = 'default',
  Dark = 'dark',
}

---

2. Authorization via URL Query Parameters

You can also pass authorization and customization data via the URL:

http://localhost:5173/?idInstance=YOUR_ID&apiTokenInstance=YOUR_API_TOKEN&apiUrl=https://api.green-api.com/&mediaUrl=https://media.green-api.com/&lng=ru&dsc=Добро%20пожаловать%20в%20чат&logo=https://example.com/logo.png

Required Query Parameters

Parameter	Description
idInstance	Instance ID
apiTokenInstance	API token for the instance
apiUrl	Base API URL
mediaUrl	Media API URL

Optional Customization Parameters

Parameter	Description
lng	Language (ru, en, he)
dsc	Description text on home screen when no chat is selected
logo	Image/logo URL shown above the description

📄 License

MIT License

---

📦 sw-console-chat

Модуль чата с использованием GREEN-API.

📥 Установка

Для установки зависимостей:

npm install

🚀 Режим разработки

Запуск сервера разработки:

npm run dev

📦 Сборка для продакшена

Сборка приложения для продакшена:

npm run build

Скомпилированные файлы будут находиться в директории dist/.

---

🔐 Методы авторизации

Вы можете передать данные авторизации в модуль чата с помощью postMessage или параметров URL.

---

1. Авторизация через postMessage

Чтобы отправить данные авторизации из родительского окна в встроенный iframe, используйте API postMessage.

Пример:

iframeReference.current?.contentWindow?.postMessage(
  {
    type: MessageEventTypeEnum.INIT,
    payload: {
      login: login,
      apiTokenUser: apiTokenUser,
      idUser: idUser,
      idInstance: instanceData.idInstance,
      apiTokenInstance: instanceData.apiTokenInstance,
      apiUrl: instanceData.apiUrl,
      mediaUrl: instanceData.mediaUrl,
      tariff: instanceData.tariff,
      locale: resolvedLanguage,
      theme: currentTheme,
      platform: platform,
      projectId: projectId,

      // кастомизация
      brandDescription: 'Добро пожаловать в наш чат поддержки!',
      logo: 'https://example.com/logo.png',
    },
  },
  CHAT_APP_URL // Замените на фактический URL iframe
);

Поля payload

Поле	Тип	Описание
login	string	Логин пользователя
apiTokenUser	string	API токен пользователя
idUser	string	ID пользователя
idInstance	number	ID инстанса
apiTokenInstance	string	API токен инстанса
apiUrl	string	Базовый URL API
mediaUrl	string	URL для загрузки медиа
tariff	TariffsEnum	Тарифный план (см. ниже)
locale	string | undefined	Необязательный код языка (например, en, ru, he)
theme	ThemesEnum	Тема интерфейса (см. ниже)
platform	string	Платформа (web, android, ios)
projectId	string	Идентификатор проекта
brandDescription	string	Текст приветствия, когда чат не выбран
logo	string	Ссылка на логотип, отображаемый над описанием

TariffsEnum

export const enum TariffsEnum {
  Developer = 'DEVELOPER',
  Business = 'BUSINESS',
  BusinessUSD = 'BUSINESS_USD',
  BusinessKZT = 'BUSINESS_KZT',
}

ThemesEnum

export const enum ThemesEnum {
  Default = 'default',
  Dark = 'dark',
}

---

2. Авторизация через параметры URL

Вы также можете передать данные авторизации и кастомизации через параметры URL при загрузке приложения:

http://localhost:5173/?idInstance=YOUR_ID&apiTokenInstance=YOUR_API_TOKEN&apiUrl=https://api.green-api.com/&mediaUrl=https://media.green-api.com/&lng=ru&dsc=Добро%20пожаловать%20в%20чат&logo=https://example.com/logo.png

Обязательные параметры

Параметр	Описание
idInstance	ID инстанса
apiTokenInstance	API токен инстанса
apiUrl	Базовый URL API
mediaUrl	URL для загрузки медиафайлов

Необязательные параметры кастомизации

Параметр	Описание
lng	Язык интерфейса (ru, en, he)
dsc	Описание, отображаемое на главной странице, когда чат не выбран
logo	Ссылка на изображение/логотип, отображаемое над описанием

📄 Лицензия

Лицензия MIT