Подключение в одностраничных приложениях: Next.js, React, Vue, TypeScript, смена страниц без перезагрузки.

React, Vue и другие SPA

Проще всего вставить код установки в общий HTML-шаблон приложения (index.html) — виджет переживает переходы между страницами без перезагрузки. Он сам проверяет адрес раз в две секунды и записывает переходы в историю посетителя. Если триггер по странице должен сработать сразу, вызывайте pageView при смене маршрута.

React Router

SvyazioPageTracker.jsx

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export function SvyazioPageTracker() {
  const location = useLocation();
  useEffect(() => {
    window.Svyazio?.('pageView');
  }, [location.pathname]);
  return null;
}

Next.js (App Router)

components/svyazio-widget.tsx

'use client';

import Script from 'next/script';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

// Подключите один раз в app/layout.tsx: <SvyazioWidget />
export function SvyazioWidget() {
  const pathname = usePathname();

  useEffect(() => {
    window.Svyazio?.('pageView');
  }, [pathname]);

  return (
    <Script id="svyazio-widget" strategy="afterInteractive">{`
      (function(d, w, c) {
        w.SvyazioConfig = { orgId: "ВАШ_ORG_ID", serverUrl: "https://app.svyazio.ru" };
        w[c] = w[c] || function() { (w[c].q = w[c].q || []).push(arguments); };
        var s = d.createElement('script');
        s.async = true;
        s.src = 'https://app.svyazio.ru/widget/svyazio.js';
        if (d.head) d.head.appendChild(s);
      })(document, window, 'Svyazio');
    `}</Script>
  );
}

Vue Router

JavaScript

// router/index.js
router.afterEach(() => {
  window.Svyazio?.('pageView');
});

Типы для TypeScript

Чтобы TypeScript знал о глобальных объектах виджета, добавьте объявление в проект:

svyazio.d.ts

// svyazio.d.ts
export {};

declare global {
  interface Window {
    Svyazio?: (command: string, ...args: unknown[]) => void;
    SvyazioConfig?: Record<string, unknown>;
    SvyazioIntegration?: Record<string, string | number>;
  }
}