Описание

В данной статье рассмотрены необходимые методы и инструменты для интеграции с панелью оператора.

Это может быть необходимо для подключения функционала панели оператора в свой интерфейс (например, окно оператора в едином окне CRM)

Интеграция

Основные шаги интеграции

Авторизация

Чтобы использовать панель оператора, нужно получить авторизационный токен оператора. 

Для этого можно воспользоваться методом авторизации:

Важно:

- У токена есть время жизни

- Рекомендуем устанавливать время жизни токена 24 часа и обновлять за 15 минут до окончания

- Также токен нужно обновлять при получении 403 ошибки от любого метода Twin

- Для обновления можно использовать тот же метод или метод обновления по рефреш токену

Управление оператором и работа с сообщениями

Основные методы API

Полная документация по всем доступным эндпоинтам (раздел "Chat API")

Управление оператором и очередями 

Работа с сообщениями

Live события 

Подключение к соккет-серверу

Для работы с соккет-сервером используется инструмент Centrifuge. 

Подробности о доступных SDK для работы с Centrifuge можно получить в официальной документации Centrifuge. 

Эндпоинт для подключения: https://twin24.ai/centrifugo/connection/websocket 

Пример на js

1. Создаем экземпляр класса Centrifuge, передаем ему URL сервера и создаем подключение:

const centrifuge = new Centrifuge(
  `${protocol}://${window.location.host}/centrifugo/connection/websocket`,
  {
    data: {
      application: 'notifications',
      settings: { token: 'your_auth_token_here' },
    },
  },
)

2. Обрабатываем connection, и publication события, в самом publication получаем и реагируем на события

centrifuge.on('connected', () => {
  // some logic when connected
})
centrifuge.on('publication', (publication) => {
  const payload = publication.data

  switch (payload.event) {
    case 'chatMessageRead':
      // handle chatMessageRead event
      break
    default:
      console.warn('Unknown event type:', payload.event)
  }
})


Список событий

События, которые получает оператор

chatSessionStarted: {
  event: 'chatSessionStarted',
  data: {
    id: string;
    chatId: string;
    clientId: string | null;
    name: string;
    markedAsSpam: boolean;
    operatorId: string | number | null;
    operatorType?: string;
    channel: string;
    botStatus?: string | null;
    status: string;
    startedAt: string;
    clientOnlineAt?: string | null;
    clientOfflineAt?: string | null;
    lastMessageCreatedAt: string | null;
    lastMessage?: Unknown | null;
    clientExternalId?: string | null;
    clientBanned?: boolean | null;
    referer?: string;
    clientIp?: string | null;
    coordinates?: {
      city?: string | null;
      latitude?: number | null;
      zip_code?: string | null;
      longitude?: number | null;
      time_zone?: string | null;
      region_name?: string | null;
      country_code?: string | null;
      country_name?: string | null;
    } | null;
    unreadClientMessageCount?: number | null;
    unreadClientMessageExists?: boolean | null;
    messengerType?: string | null;
    whatsappPhone?: string | null;
    timerFirstAnswer?: number;
    timerNextAnswers?: number;
    lastOperatorMessage?: Unknown | null;
    firstClientMessageAfterLastOperatorMessage?: Unknown | null;
    operatorAssignedAt: string | null;
    previousOperator?: {
      id?: string | null;
      name?: string | null;
    } | null;
  }
}

operatorNotFound: {
  action: 'operatorNotFound';
  data: {
    botStatus: string; // например, 'HELP'
    chatId: string;
    operatorType: string;
    sessionId: string;
    status: string;
  };
}

chatSessionAdded: {
  action: 'chatSessionAdded';
  data: {
    id: string;
    chatId: string;
    clientId: string | null;
    name: string;
    markedAsSpam: boolean;
    operatorId: string | number | null;
    operatorType?: string;
    channel: string;
    botStatus?: string | null;
    status: string;
    startedAt: string;
    clientOnlineAt?: string | null;
    clientOfflineAt?: string | null;
    lastMessageCreatedAt: string | null;
    lastMessage?: Unknown | null;
    clientExternalId?: string | null;
    clientBanned?: boolean | null;
    referer?: string;
    clientIp?: string | null;
    coordinates?: {
      city?: string | null;
      latitude?: number | null;
      zip_code?: string | null;
      longitude?: number | null;
      time_zone?: string | null;
      region_name?: string | null;
      country_code?: string | null;
      country_name?: string | null;
    } | null;
    unreadClientMessageCount?: number | null;
    unreadClientMessageExists?: boolean | null;
    messengerType?: string | null;
    whatsappPhone?: string | null;
    timerFirstAnswer?: number;
    timerNextAnswers?: number;
    lastOperatorMessage?: Unknown | null;
    firstClientMessageAfterLastOperatorMessage?: Unknown | null;
    operatorAssignedAt: string | null;
    previousOperator?: {
      id?: string | null;
      name?: string | null;
    } | null;
  };
}

chatMessageCreated: {
  action: 'chatMessageCreated';
  data: {
    id: string;
    sessionId: string;
    clientId: string | null;
    authorId: string;
    authorType: string;
    authorName: string | null;
    type: 'REGULAR' | 'TERMINAL';
    body: string;
    attachments: unknown[];
    createdAt: string;
    updatedAt?: string | null;
    readAt?: string | null;
    deletedAt?: string | null;
    actions?: unknown[];
    replyTo?: {
      id: string;
      authorType: string;
      body: string;
      attachments: unknown[];
      authorName: string | null;
    } | null;
    history?: {
      editedAt?: string | null;
    }[];
  }
  replyToMessage?: {
    id: string;
    authorType: string;
    body: string;
    attachments: unknown[];
    authorName: string | null;
  } | null;
}

chatMessageEdited: {
  action: 'chatMessageEdited';
  data: {
    body: string;
    messageId: string;
    attachments: unknown[];
  };
}

chatMessageRead: {
  action: 'chatMessageRead';
  data: {
    messageId: string;
  };
}

chatSessionDeleted: {
  action: 'chatSessionDeleted';
  data: {
    sessionId: string;
  };
};

chatSessionSwitchedFromBotToOperator: {
  action: 'chatSessionSwitchedFromBotToOperator';
  data: {
    operatorId: string;
    operatorName: string;
    sessionId: string;
  };
};

sessionClosedByClient: {
  action: 'sessionClosedByClient';
  data: {
    chatId: string;
    sessionId: string;
  };
}

operatorBlocked: {
  action: 'operatorBlocked',
  data: Unknown,
}

chatUserExists: {
  action: 'chatUserExists';
  data: Unknown;
}

typing: {
  action: 'typing',
  data: Unknown,
}

operatorLoggedOut: {
  action: 'operatorLoggedOut,
  data: Unknown,
}

clientOnline: {
  action: 'clientOnline',
  data: {
    id: string;
  }
}

clientOffline: {
  action: 'clientOffline',
  data: {
    id: string;
  }
}

События, которые отправляет оператор