Интеграция CRM с онлайн чатом на сайте (Replain)

Введение

Есть замечательный онлайн чат для сайта Replain, позволяющий быстро добавить возможность обработки запросов посетителей сайта. 

В бесплатной версии есть ряд ограничений, но для простого использования этого вполне хватает. 

Совсем недавно мы стали использовать платную версию Replain (стоит базовая версия порядка 5тр в год). Что это дает: 

  • интеграция с системами аналитики
  • API 
  • рекламные баннеры 
  • видеоприветствие 
  • обратный звонок
  • история переписки
  • и многое другое, см. https://replain.cc/pricing-ru

Для нас главную роль играет возможность работы по API. Мы можем передавать дополнительные данные о пользователе в replain (например, его username, или какие-то другие объекты), а также получать в свою систему всю информацию по взаимодействию через чат онлайн. 

JS настройка виджета для передачи дополнительных параметров

Сначала разберем, как передавать информацию с сайта в Replain. Делается это через JS. 

Пример кода подключения счетчика с 2 дополнительными полями username и falconGuid

$(function(){
		window.replainSettings = {
		   id: '22bb302e-57a6-4d21-a58a-58f1a79f6289',
		   fields:{
				username : $('.as-username').val(),
				falconGuid : as.sys.cookie.get('falconGuid') || ''
		   }
		};
		(function(u){var s=document.createElement('script');s.async=true;s.src=u;
		var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);
		})('https://widget.replain.cc/dist/client.js');
});

Подробности - https://replain.notion.site/607c70a502384310a200e3fb7343b760

В итоге оператор по кнопке Инфо увидит не только IP, локацию пользователя, но и указанные дополнительные параметры. 

API передачи данных из веб-хука в CRM

Мы можем сохранять все необходимые данные по переписке в CRM в карточке клиента, а также автоматически создавать клиента в системе по обращению в Replain. Раньше мы это делали вручную - т.е. копировали значимые моменты в CRM по обращению через Replain. Теперь все автоматом попадает в комментарии по лиду. 

Документация по веб-хукам API - https://replain.notion.site/Re-plain-API-Webhooks-64927eb510d941d1a1a538cfe7ccc378

Веб-хук - это уведомление во внешнюю систему о каком-то событии с передачей всех необходимых данных. В данном случае Replain уведомляет нашу систему по определенному адресу, что произошло такое-то событие. 

Как настроить: 

1. Указываем вебхук в настройках API (в Телеграм - Replain -выбор виджета - API - Управление Выбрать webhooks - Указать хук). 

Пример: https://falconspace.ru/api/action/replainapi?token=YYYY  

2. Создадим таблицу для хранения событий replain

CREATE TABLE [dbo].[as_replainEvents](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[eventType] [nvarchar](128) NULL,
	[eventID] [nvarchar](128) NULL,
	[clientID] [nvarchar](128) NULL,
	[chatID] [nvarchar](128) NULL,
	[realName] [nvarchar](128) NULL,
	[form] [nvarchar](1024) NULL,
	[ip] [nvarchar](32) NULL,
	[page] [nvarchar](128) NULL,
	[geolocation] [nvarchar](128) NULL,
	[operator] [nvarchar](128) NULL,
	[text] [nvarchar](max) NULL,
	[fileUrl] [nvarchar](128) NULL,
	[utm] [nvarchar](1024) NULL,
	[nickname] [nvarchar](128) NULL,
	[created] [datetime] NULL,
 CONSTRAINT [PK_as_replainEvents] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

ALTER TABLE [dbo].[as_replainEvents] ADD  CONSTRAINT [DF_as_replainEvents_created]  DEFAULT (getdate()) FOR [created]
GO

Также добавим в crm_client поле replainClientID nvarchar(128). По нему мы будем понимать, что входящий event относится к существующему клиенту или нет. 

3. Создаем Входящий API метод в /asapi

CREATE PROCEDURE [dbo].[api_replainaoi_replainapi]
@parameters ExtendedDictionaryParameter READONLY,
@username nvarchar(256)
as
begin

	-- https://replain.notion.site/Re-plain-API-Webhooks-64927eb510d941d1a1a538cfe7ccc378 дока replain API Hook
	declare @token nvarchar(max) = (select top 1 lower(Value2) from @parameters where [Key] = 'token')
    if(@token<>'YYYY') begin 
    	select 0 Result, 'Invalid token' Msg
        return
    end 
    declare @s nvarchar(max) = (select top 1 Value2 from @parameters where [Key] = 'InputStream')
	
    --exec as_print @json
    
       
    declare @eventID nvarchar(max) = JSON_VALUE(@s, '$.event.id')
    declare @clientID nvarchar(max) = JSON_VALUE(@s, '$.client.id')
    declare @nickname nvarchar(max) = JSON_VALUE(@s, '$.client.nickname')
    declare @realname nvarchar(max) = JSON_VALUE(@s, '$.client.realname')
    declare @operator nvarchar(max) = JSON_VALUE(@s, '$.operator.name')
    declare @eventType nvarchar(max) = JSON_VALUE(@s, '$.event.type')
     declare @text nvarchar(max) = JSON_VALUE(@s, '$.message.text')
     declare @fileName nvarchar(max) = JSON_VALUE(@s, '$.message.file.name')
     declare @fileUrl nvarchar(max) = JSON_VALUE(@s, '$.message.file.url')
     
     
    declare @form nvarchar(max) = JSON_query(@s, '$.client.form')
     declare @utm nvarchar(max) = JSON_query(@s, '$.utm')
   
    if(exists(select id from as_replainEvents where eventID = @eventID)) begin 
    	select 0 Result, 'Double' Msg
        return
    end 
    
    INSERT INTO [dbo].[as_replainEvents]
               ([eventType],[eventID],[clientID],[chatID],[realName],[form],[nickname],[ip],[page]
               ,[geolocation],[operator],[text],[fileUrl],[utm])
    SELECT *
    FROM OPENJSON(@s, N'$')
    WITH (
        eventType      NVARCHAR(max)    N'$.event.type',
        eventID        NVARCHAR(max)        N'$.event.id',
         clientID        NVARCHAR(max)        N'$.client.id',
    chatID        NVARCHAR(max)        N'$.client.chatId',
    realname        NVARCHAR(max)        N'$.client.realname',
    form        NVARCHAR(max)        N'$.client.form' as JSON,
    nickname        NVARCHAR(max)        N'$.client.nickname',
    ip        NVARCHAR(max)        N'$.client.ip',
    page        NVARCHAR(max)        N'$.client.page',
    geolocation        NVARCHAR(max)        N'$.client.geolocation',
    --dateCreate        NVARCHAR(max)        N'$.client.dateCreate',
    operator        NVARCHAR(max)        N'$.operator.name',
    text        NVARCHAR(max)        N'$.message.text',
    fileUrl        NVARCHAR(max)        N'$.message.file.url',
    utm        NVARCHAR(max)        N'$.utm' as json

    )
    
    
    declare @crmInstanceID int = (select instanceID from crm_clients where replainClientID = @clientID)
    if(@crmInstanceID is null) begin 
    	-- создаем клиента 
        declare @ps  ExtendedDictionaryParameter
        insert into @ps ([Key], Value2)
        select 'name' [Key], isnull(@nickname, '') + ' ' + isnull(@realname, '') Value2
        union
        select 'phone' [Key], '' Value2
        union
        select 'email' [Key], '' Value2
        union
        select 'comment' [Key], 
        	'Создан из Replain чата 
'+
            'Страница ' + isnull(page, '--')+ '
' + 
        	'Место '+ isnull(geolocation, '') + '
' +
            'IP '+ isnull(''+ip+'', '') + '
'+
            'Поля '+ isnull(form, '') + '
' + 
            iif(len(@utm)>5, 'UTM '+ isnull(@utm, '') + '
', '' )
            
            Value2
        from as_replainEvents where eventID = @eventID
    
        exec [dbo].[crm_createClient]
			@parameters  = @ps,
			@username = '',
			@instanceID  = @crmInstanceID output

		update crm_clients set replainClientID = @clientID where instanceID = @crmInstanceID
    end 
    -- добавляем коммент к клиенту. 
    declare @commentText nvarchar(max) =''    
    select  top 1  @commentText = isnull(@eventType, '') + ' ' + isnull(@nickname, '') + ' ' + isnull(@realname, '') + ' '+ isnull(@text, '')
    
    if(@eventType='clientSentMessage') 
    	set @commentText = 'Клиент написал: ' + isnull(@text, '')  + 
    	iif(len(@fileUrl)>0, 'Файл '+ isnull(@fileName, '')+' '+@fileUrl+'', '')
    if(@eventType='clientSentContactForm') set @commentText = 'Клиент отправил контакты: ' + isnull(@form, '') + ' ' + isnull(@realname, '')
    if(@eventType='clientSentOfflineForm') set @commentText = 'Клиент отправил контакты в Оффлайн: ' + isnull(@form, '')+ ' ' + isnull(@realname, '')
    if(@eventType='clientSentAutoContactForm') set @commentText = 'Клиент отправил контакты (автоформа): ' + isnull(@form, '')+ ' ' + isnull(@realname, '')
    if(@eventType='clientSentCallbackRequest') set @commentText = 'Клиент запросил обратный звонок: ' + isnull(@form, '')
    if(@eventType='clientSentCallRequest') set @commentText = 'Клиент запросил видео звонок: ' + isnull(@form, '')
    if(@eventType='operatorAcceptedCallRequest') set @commentText = 'Оператор принял запрос на звонок: ' + isnull(@form, '')
    if(@eventType='operatorChoseClient') set @commentText = 'Оператор '+isnull(@operator, '')+' взял в обработку клиента '
    if(@eventType='operatorSentMessage') set @commentText = 'Оператор '+isnull(@operator, '')+' ответил: ' + isnull(@text, '')
   
    insert into as_comments (username, text, created, itemID, type, color, guid)    
    select '',@commentText, getdate(), @crmInstanceID, 'client', '', newid()
   
	-- SELECT 1 - вывод метаданных о результате операции метода API 
	select '' Msg, 1 Result, 0 errorCode	
end	

Что происходит в процедуре: 

1. проверяем что на входе передан верный токен в адресе (минимальная проверка). 

2. Извлекаем поля и сохраняем в таблицу events (возможно для будущих дополнительных манипуляций с данными). 

3. Проверяем был ли клиент с таким clientID. Если не был, то создаем его и записываем общие данные из replain по нему (локация, IP, UTM и т.д.)

4. Добавляем комментарий к карточке клиента. Текст комментария зависит от типа события (eventType)

В итоге при переписке в Replain в CRM в комментарии сохраняются данные по ней. 

Заключение

Подобная интеграция упрощает работу оператора. Не нужно копировать в CRM важные данные по переписке.

Дополнительный плюс - можно контролировать через свою систему как работают операторы. Насколько оперативно они отвечают клиенту. 

Еще дополнительное применение - это обслуживание своих зарегистрированных пользователей. В этом случае вы можете дополнительно передавать и другие данные для того, чтобы оператор сразу понимал лучше контекст пользователя (например, это может быть прямая  ссылка на карточку пользователя для быстрого перехода). 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK