API JS del Widget

HTMLcopiar<script>
  // Configuración — establecer antes de cargar el script del widget
  window.SvyazioConfig = {
    orgId: "TU_ORG_ID"
  };
  window.Svyazio = window.Svyazio || function() {
    (window.Svyazio.q = window.Svyazio.q || []).push(arguments);
  };
</script>
<script async src="https://app.svyazio.ru/widget/svyazio.js"></script>

El objeto window.SvyazioConfig (o alias window.SvyazioSetup) debe establecerse antes de que el script cargue. Los parámetros anulan la configuración del panel de administración.

Apariencia

Parámetro	Tipo	Por defecto	Descripción
buttonStyle	'round' | 'tab'	'round'	Estilo del botón de chat.
buttonPosition	string	'br'	Posición del botón: bl, bc, br, lt, lm, lb, rt, rm, rb.
buttonSize	number	60	Tamaño del botón redondo (px).
chatWidth	number	400	Ancho de la ventana de chat (mín. 280px).
chatHeight	number	600	Alto de la ventana de chat (mín. 300px).
zIndex	number	999999	Z-index del widget.
accentColor	string	desde ajustes	Color de acento, p.ej. '#6C63FF'.
colors	object	—	Esquema de colores (ver setColors).

Comportamiento

Parámetro	Tipo	Por defecto	Descripción
startHidden	boolean	false	Ocultar widget al cargar. Muéstralo con Svyazio('show').
disabledOnMobile	boolean	false	No mostrar en dispositivos móviles.
mobileOnly	boolean	false	Mostrar solo en dispositivos móviles.
disableChatOpenHash	boolean	false	Desactivar control por hash URL #svyazioChatExpanded.
deferredLoading	boolean	false	Cargar widget tras carga completa de la página.
customWidgetButton	string	—	Selector CSS para botón personalizado. El botón predeterminado se ocultará.

Texto del Widget

Parámetro	Tipo	Descripción
headerText	string	Título del encabezado de la ventana de chat.
welcomeText	string	Texto de bienvenida al abrir el chat.
onlineTitle	string	Subtítulo cuando los agentes están en línea.
offlineTitle	string	Subtítulo cuando los agentes están fuera de línea.
offlineText	string	Texto cuando no hay nadie en línea.

Idioma y Región

Parámetro	Tipo	Descripción
locale	string | object	Código de idioma ('ru', 'en', 'es', 'pt') o un objeto con anulaciones de cadenas de interfaz.
language	string	Alias de locale.

Datos del Visitante

Parámetro	Tipo	Descripción
clientId	string	ID único del usuario en tu sistema — une el historial entre dispositivos y sesiones.
groupId	string	ID del departamento para enrutar conversaciones (Configuración → Departamentos).

Callbacks

Parámetro	Tipo	Descripción
onNewMessage	function(msg)	Con cada nuevo mensaje. msg: { id, text, createdAt, type }
onAnalyticEvent	function(eventName)	Con eventos analíticos del widget.

Ejemplo completo de configuración:

JScopiarwindow.SvyazioConfig = {
  orgId: "TU_ORG_ID",
  buttonPosition: "br",
  chatWidth: 380,
  startHidden: true,
  language: "es",
  groupId: "abc123",
  clientId: "usuario_42",
  headerText: "Soporte Técnico",
  colors: { buttonBg: "#6C63FF", buttonText: "#fff" },
  onNewMessage: function(msg) {
    console.log("Nuevo:", msg.text, "de", msg.type);
  }
};

Alternativa al método setIntegrationData — pasa datos del usuario antes de que cargue el widget.

HTMLcopiar<script>
  window.SvyazioIntegration = {
    name: "Juan García",
    email: "juan@ejemplo.com",
    phone: "+34 600 000 000",
    plan: "pro",     // campos personalizados
    userId: "12345"
  };
</script>
<script async src="https://app.svyazio.ru/widget/svyazio.js"></script>

Añade el hash #svyazioChatExpanded a cualquier enlace — al hacer clic se abrirá el chat automáticamente:

HTMLcopiar<a href="#svyazioChatExpanded">Contáctanos</a>

<button onclick="location.hash='#svyazioChatExpanded'">Hacer una pregunta</button>

JScopiarSvyazio('openChat');
Svyazio('openChat', true); // con foco

JScopiarSvyazio('expandWidget', true);

JScopiarSvyazio('minimizeWidget');
Svyazio('closeChat'); // alias

JScopiarSvyazio('hide');

JScopiarSvyazio('show');

JScopiarSvyazio('setIntegrationData', {
  name: "Juan García",
  email: "juan@ejemplo.com",
  phone: "+34 600 000 000",
  plan: "pro",
  userId: "12345"
});

JScopiarSvyazio('updateIntegrationData', { email: "nuevo@ejemplo.com" });
Svyazio('updateIntegrationData', { phone: null }); // eliminar

JScopiarSvyazio('setButtonPosition', 'bl'); // izquierda inferior
Svyazio('setButtonPosition', 'rt'); // derecha superior

JScopiarSvyazio('setButtonSize', 72);

JScopiarSvyazio('setChatWidth', 480);

JScopiarSvyazio('setChatHeight', 700);

JScopiarSvyazio('setZIndex', 100);

JScopiarSvyazio('setColors', {
  buttonBg: '#6C63FF',
  buttonText: '#fff',
  clientBubbleBg: '#e8e5ff',
  agentBubbleBg: '#f4f4f5'
});

JScopiarSvyazio('resetColors');

JScopiarSvyazio('setLanguage', 'es');
Svyazio('setLanguage', 'en');

JScopiarSvyazio('setLocale', 'es');
Svyazio('setLocale', {
  placeholder: 'Escribe tu mensaje…',
  headerTitle: 'Soporte'
});

JScopiarSvyazio('sendAutoMessage', '¡Hola! ¿Necesitas ayuda con tu pedido?');

JScopiarSvyazio('pageView');

JScopiarSvyazio('setGroupId', 'id_depto_ventas');
Svyazio('setGroupId', null); // restablecer

JScopiarSvyazio('restart');

JScopiarSvyazio('kill');

onNewMessage

JScopiarwindow.SvyazioConfig = {
  orgId: "TU_ORG_ID",
  onNewMessage: function(msg) {
    // msg.id, msg.text, msg.createdAt (ms), msg.type: "agent"|"client"|"bot"
    console.log(msg);
  }
};

// Ejemplo: contador de no leídos en el título
let noLeidos = 0;
window.SvyazioConfig.onNewMessage = function(msg) {
  if (msg.type === 'agent' || msg.type === 'bot') {
    document.title = '(' + (++noLeidos) + ') ' + document.title;
  }
};

onAnalyticEvent

JScopiarwindow.SvyazioConfig = {
  orgId: "TU_ORG_ID",
  onAnalyticEvent: function(eventName) {
    // Google Analytics 4
    gtag('event', eventName, { event_category: 'Live Chat' });

    // Mixpanel / Amplitude
    if (window.mixpanel) {
      mixpanel.track('chat_' + eventName);
    }
  }
};

Mostrar chat después de N segundos

JScopiarsetTimeout(function() {
  Svyazio('show');
  Svyazio('openChat');
}, 15000);

Pasar datos tras el inicio de sesión

JScopiarfunction alIniciarSesion(usuario) {
  Svyazio('setIntegrationData', {
    name: usuario.name,
    email: usuario.email,
    plan: usuario.plan,
    clientId: 'usuario_' + usuario.id
  });
}

Enrutar clientes VIP al departamento prioritario

JScopiarif (usuarioActual.plan === 'enterprise') {
  Svyazio('setGroupId', 'id_depto_vip');
}

Ocultar en páginas específicas

JScopiarif (window.location.pathname === '/pago') {
  Svyazio('hide');
} else {
  Svyazio('show');
}

Botón personalizado

HTMLcopiar<button id="mi-btn-chat">Contactar Soporte</button>

<script>
  window.SvyazioConfig = {
    orgId: "TU_ORG_ID",
    customWidgetButton: "#mi-btn-chat"
  };
</script>

clientId — historial entre dispositivos

JScopiarwindow.SvyazioConfig = {
  orgId: "TU_ORG_ID",
  clientId: "usuario_" + usuarioActual.id
};

La mayoría de los métodos del API JS de Chatra son compatibles con Svyazio. Migrar tu código solo requiere renombrar objetos y llamadas:

1. Reemplaza ChatraSetup → SvyazioSetup
2. Reemplaza ChatraIntegration → SvyazioIntegration
3. Reemplaza todas las llamadas Chatra('método') → Svyazio('método')

Método	Argumentos	Descripción
openChat	focus?	Abrir chat
expandWidget	focus?	Abrir (solo escritorio)
minimizeWidget	—	Minimizar chat
closeChat	—	Alias de minimizeWidget
hide	—	Ocultar widget
show	—	Mostrar widget
setIntegrationData	data	Datos del visitante (sobrescribir)
updateIntegrationData	data	Datos del visitante (merge)
setButtonPosition	code	Mover botón
resetButtonPosition	—	Restablecer posición
setButtonSize	size	Tamaño del botón (px)
setChatWidth	width	Ancho de ventana (px)
setChatHeight	height	Alto de ventana (px)
setZIndex	value	Z-index del widget
setColors	colors	Anular colores
resetColors	—	Restablecer colores
setLanguage	code	Cambiar idioma
setLocale	code | object	Idioma o textos personalizados
sendAutoMessage	text	Mensaje automático del bot
pageView	—	Registrar página (SPA)
setGroupId	id | null	Enrutar a departamento
restart	—	Reiniciar widget
kill	—	Destruir widget