Inicio rápido: un chat operativo en cinco minutos

1. Obtener la clave del sitio y añadir su dominio

En su cuenta, en Proyecto → Instalación, encontrará el código de inserción con la clave del sitio. En Orígenes permitidos, introduzca todos los dominios donde deba funcionar el chat (se incluyen los subdominios: your-company.com abarca www.your-company.com y shop.your-company.com). El servidor de chat solo acepta conexiones desde esos dominios.

2. Una sola línea

Coloque el código de su cuenta antes de </body> o dentro de <head>:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="en"
        async></script>

El código de su cuenta también incluye data-rc-brand con el color de su marca, para que el botón del chat aparezca desde el principio con el color correcto. Por ello, lo mejor es copiarlo sin cambios. Todos los atributos: Referencia de la etiqueta de script.

3. Ampliar la política de seguridad de contenido

Si su sitio web establece una CSP, añada:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Por qué se necesitan las dos entradas de connect-src: Seguridad y CSP.

4. Comprobar

Abra su página con las herramientas de desarrollo:

• Elementos: al final de <body> aparece <reactive-chat>.
• Red: loader.js, después (como muy tarde, al pasar el ratón por el botón del chat) core.<hash>.js y una conexión WebSocket a wss://ws.reactive.chat/rc_wss/ con el código de estado 101.
• Consola: una vez cargado, ReactiveChat('getSession') devuelve { sessionId, visitorId, tabId }.

Escriba un mensaje de prueba; aparecerá en el panel de agentes de su cuenta. Si no se establece la conexión, consulte Solución de problemas.

Variantes

Mediante un gestor de etiquetas: el cargador lee los atributos de su propio elemento <script>. Por ello, cree una etiqueta que inserte un <script src> real con los atributos, o establezca antes la configuración:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

Con una CSP estricta, el script en línea necesita un nonce que debe establecer su gestor de etiquetas.

Servir loader.js desde su infraestructura: si carga el archivo desde su propio directorio, indique expresamente la dirección del chat; de lo contrario, el widget buscará el servidor de chat en su dominio y no llegará ningún mensaje, sin que aparezca un mensaje de error:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        data-rc-cdn-base="https://cdn.reactive.chat/"
        async></script>

Con data-rc-cdn-base, el cargador sigue obteniendo de nosotros el núcleo correspondiente. Tenga en cuenta que una copia de loader.js no se actualiza; cuando cambie el núcleo, tendrá que renovarla personalmente. Se sigue recomendando insertarlo desde cdn.reactive.chat o a través de un dominio propio.

Dominios con terminación de dos partes (.co.uk, .com.au …) cuando sirve el archivo desde su infraestructura: establezca siempre data-rc-ws-url expresamente.

Aplicaciones de una sola página: insértelo una vez en la estructura principal de la aplicación; véase SPA y cambios de página.

Aplicaciones móviles: Aplicaciones móviles.

Siguientes pasos

• Reconocer a los usuarios que han iniciado sesión: ReactiveChat('identify', …) con una firma de su servidor – Identificar visitantes.
• Sus propios botones y enlaces: <a href="#rc-open">Help</a> – Abrir el chat desde un enlace propio.
• Reaccionar a eventos: ReactiveChat('on', 'message', …) – Eventos.
• Conectar su backend: Webhooks, API de servidor, Datos de clientes.
• Aspecto y comportamiento: Personalización.