Интеграция 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

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

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