Рабочий кейс: Интеграция Intercom в Vue.js

Что такое Intercom и зачем он нужен?

Intercom является платформой для коммуникации с клиентами, которая объединяет в себе несколько функций: чат-бот с искусственным интеллектом для автоматизации ответов и взаимодействия с клиентами, службу поддержки для консультаций.

Intercom нужен для создания более тесной и эффективной связи между компанией и ее клиентами, автоматизации процесса обслуживания, улучшения качества поддержки.

Как использовать Intercom во Vue?

Чтобы добавить Intercom в Vue-приложение, в документации представлена IIFE-функция для инициализации чата. Я взялся за адаптацию этого кода, сделав его более доступным и понятным для разработчиков. Вот результат:

const app_id = import.meta.env.VITE_APP_INTERCOM_APP_ID;
const api_base = 'https://api-iam.intercom.io';

export function initIntercom() {
  const intercom = window.Intercom;

  if (typeof intercom === 'function') {
    intercom('reattach_activator');
    intercom('update', window.intercomSettings);
  } else {
    const intercomTemplate = function () {
      intercomTemplate.c(arguments);
    };

    intercomTemplate.q = [] as any;
    intercomTemplate.c = function (args: any) {
      intercomTemplate.q.push(args);
    };

    window.Intercom = intercomTemplate;

    const addIntercomToDOM = function () {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = `https://widget.intercom.io/widget/${window.intercomSettings.app_id}/?version=${Date.now()}`;
      const firstScriptOnPage = document.getElementsByTagName('script')[0];
      // @ts-expect-error
      firstScriptOnPage.parentNode.insertBefore(script, firstScriptOnPage);
    };

    if (document.readyState === 'complete') {
      addIntercomToDOM();
      // @ts-expect-error
    } else if (window.attachEvent) {
      // @ts-expect-error
      window.attachEvent('onload', addIntercomToDOM);
    } else {
      window.addEventListener('load', addIntercomToDOM, false);
    }
  }
}

Возможности взаимодействия с Intercom

Чтобы открыть чат, необязательно полагаться на стандартную иконку. Если вы используете собственные кнопки для обращения в поддержку, вот функция для вас:

export function showIntercom() {
  if (typeof window.Intercom === 'function') {
    window.Intercom('show');
  }
}

Если нужно отправить в чат предварительное сообщение от пользователя, например, ID заказа для упрощения работы службы поддержки, используйте следующий код. Однако учтите, что эта функция может работать неидеально при наличии чат-бота в Intercom.

export function showIntercomWithCustomMessage(message: string) {
  if (typeof window.Intercom === 'function') {
    window.Intercom('showNewMessage', message);
  }
}

Для скрытия чата, например, при клике вне его, воспользуйтесь следующей функцией:

export function hideDialogIntercom() {
  window.Intercom('hide');
}

Установка базовых настроек для чата, включая скрытие стандартной кнопки на мобильных устройствах, производится так:

export function setIntercomSettings(user_id: number, company_name: string, phone: string, isMobile: boolean) {
  window.intercomSettings = {
    api_base,
    app_id,
    hide_default_launcher: isMobile,
    name: company_name,
    phone,
    user_id: `project-name_${user_id}`,
  };
}