Модуль интеграции ваших сайтов с Pipeline24

Для работы необходимо подключить скрипт интеграции на ваш сайт

Ссылку на скрипт интеграции можно получить в разделе **Настройки - Источники - Web. **Ссылка будет содержать все необходимые для работы параметры.

Функциональность

• Аналитика

• Отзывы

• Сообщения

• Защита от спама

Аналитика

Будут собраны данные об источнике трафика включая utm метки. Информация доступна в разделе Web.

Отзывы

Работайте с клиентами - отправка, получение (с пагинацией), редактирование отзывов.

Для работы данной функциональности необходимо искользовать публичные методы скрипта интеграции.

Сообщения

Оперативно реагируйте на все обращения - сценарии рассылки помогут вам не пропутить ни одного обращения.

Для работы данной функциональности необходимо искользовать публичные методы скрипта интеграции.

Защита от спама

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

Техническая реализация

Инициализация

Скрипт инициализируется автоматически и доступен в window - window.Pipeline24WebPlugin

Готовность плагина хорактеризует публичный флаг pluginReady;

window.Pipeline24WebPlugin.pluginReady

Как только плагин готов можно использовать его публичные методы:

Сообщение

messageSend(data: {
	message: string,
	phone?: string,
	telegram?: string,
	type: "message" | "callback",
	name: string
})

• message - текст сообщения (max 500)

• phone - номер телефона

• telegram - telegram аккаунт

• type - тип сообщения (различаются на ui)

• name - имя пользователя

Отзывы

Получить список

reviewsList(data: { page: number, limit: number } = { page: 1, limit: 10 })

Отправить отзыв

reviewSend(data: { message: string, phone: string | null, telegram: string | null, name: string, rate: number })

SPA

Если у вас SPA прилижение для корректного сбора статистики при навигации надо вызывать метод
navigateEvent()

Пример (Angular)

import { Injectable, afterNextRender } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MessageDialogComponent } from '@shared/components/message-dialog/message-dialog.component';
import { SendMessageDialogComponent } from '@shared/components/send-message-dialog/send-message-dialog.component';
import { BehaviorSubject } from 'rxjs';

export interface ApiError {
  message: string[];
  details: ApiErrorDetails;
}
export interface ApiErrorDetails {
  field_errors: Record<string, ApiErrorList[]>;
  non_field_errors: ApiErrorList[];
}
export interface ApiErrorList {
  [key: string]: string[] | Record<string, ApiErrorList[]>;
}

export interface reviewInterface {
  count: number;
  data: reviewItem[];
}

export interface reviewItem {
  rate: string;
  message: string;
  name: string;
  date: { date: string; time: string };
  telephone: string;
}

export interface promiseData<T> {
  errors: null | ApiError;
  result: T;
}

@Injectable({ providedIn: 'root' })
export class SendDataService {
  private interval: any = null;
  private pipeLineCore: any = null;
  private _pipelineState: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public get pipelineState$() {
    return this._pipelineState.asObservable();
  }
  constructor(private dialogService: MatDialog) {
    afterNextRender(() => {
      this.checkPipeline();
    });
  }

  public validatePhone(phone: string): boolean {
    const valueLength = phone.replace(/[^\d;]/g, '').length;
    return valueLength === 12;
  }

  public promiseError(): Promise<promiseData<any>> {
    return new Promise((resolve, reject) => {
      reject({
        errors: null,
        result: 'Расширение отправки сообщений не подключено',
        pipelineStatus: false,
      });
    });
  }

  sendMessage() {
    const dialogRef = this.dialogService.open(SendMessageDialogComponent, {
      disableClose: true,
      maxWidth: '400px',
      width: '90%',
    });
  }

  sendReview(message: string, name: string, telegram: string, rate: number) {
    const sendData = {
      message: message,
      name: name,
      telegram: telegram,
      rate: rate,
    };
    if (this.pipeLineCore) {
      return this.pipeLineCore.reviewSend(sendData) as Promise<promiseData<string>>;
    }
    return this.promiseError();
  }

  getReviews(page: number, limit?: number): Promise<promiseData<reviewInterface>> {
    if (this.pipeLineCore) {
      return this.pipeLineCore.reviewsList({ page: page, limit: limit ?? 10 }) as Promise<
        promiseData<reviewInterface>
      >;
    }
    return this.promiseError();
  }
  navigate() {
    if (!this.pipeLineCore) {
      return;
    }
    this.pipeLineCore.navigateEvent();
  }
  public sendDataMessage(
    telegram: string,
    name: string,
    message?: string,
  ): Promise<promiseData<string>> {
    const sendData = {
      type: 'message',
      telegram: telegram,
      name: name,
      message: message ? message : 'Форма',
    };
    if (this.pipeLineCore) {
      return this.pipeLineCore.messageSend(sendData) as Promise<promiseData<string>>;
    }
    return this.promiseError();
  }

  private getPipeline() {
    let pipelineCore = null;
    try {
      // @ts-ignore
      pipelineCore = window?.Pipeline24WebPlugin ?? null;
    } catch (err) {}
    return pipelineCore;
  }

  private checkPipeline() {
    this.interval = setInterval(() => {
      const pipelineCore = this.getPipeline();
      if (!pipelineCore || !pipelineCore.pluginReady) {
        return;
      }
      try {
        clearInterval(this.interval);
        this.pipeLineCore = pipelineCore;
        this._pipelineState.next(true);
      } catch (err) {
        console.warn(err);
      }
    }, 100);
  }
}

В примере реализован сервис обертка для взаимодействия с web Plugin для angular
В сервисе имплементированы:

• Проверка готовности плагина

• Отравка сообщений и отзывов

• Отправка статистики при маршрутизации