ByDomuDevelopers

Widget de chat

Instálalo en tu web, firma la identidad de tus usuarios y contrólalo con window.Domu.

GuíaJavaScriptSin clave de API

Instálalo en tu web

Copia el código desde Configuración › Chat web (widget) y pégalo antes de cerrar el body. data-key es la clave pública del widget; data-locale fija el idioma (es, en, pt); data-property y data-property-code dicen desde qué inmueble escribe la persona. Tu dominio tiene que estar en los permitidos del widget.

HTML
<!-- Antes de cualquier Domu(…): crea la cola -->
<script>window.Domu=window.Domu||function(){(Domu.q=Domu.q||[]).push(arguments)};</script>
<script async charset="utf-8" src="https://app.bydomu.com/widget.js"
        data-key="dom_XXXXXXXXXXXXXXXX"
        data-api="https://api.bydomu.com"
        data-locale="es"
        data-property="ID_DEL_INMUEBLE"
        data-property-code="P-0042"></script>

La primera línea crea la cola: todo lo que llames antes de que cargue el script se guarda y se ejecuta en orden cuando el widget tiene sesión. Si pides abrirlo varias veces antes, gana la última.

JavaScript
// Puede ir antes de que cargue widget.js: se ejecuta en orden cuando esté listo.
Domu('on', 'ready', ({ available }) => console.log('chat listo', available))
Domu('setContext', { page: location.pathname })
Domu('open', { view: 'chat', message: 'Hola' })

Firma la identidad de tus usuarios

Si tus usuarios inician sesión en tu web, fírmalos: su conversación los sigue entre dispositivos, Noa los trata como verificados y sus atributos cuentan como verificados. Genera el secreto en Configuración › Chat web (widget) › Identidad verificada. userHash es el HMAC-SHA256 del userId con ese secreto, en hexadecimal (sin userId, del correo). Si no coincide, el chat sigue anónimo.

import { createHmac } from "node:crypto";

// En tu servidor: el secreto nunca va al navegador.
const userHash = createHmac("sha256", process.env.BYDOMU_WIDGET_SECRET)
  .update(String(user.id))
  .digest("hex");
JavaScript
Domu('boot', {
  userId: 'u_123',          // el id de tu sistema
  email: '[email protected]',
  name: 'Ana Gómez',
  userHash: '<<calculado en tu servidor>>',
})

// Al cerrar sesión en tu web:
Domu('shutdown')

Ábrelo y contrólalo

Abre el widget en la vista que necesites, con un mensaje escrito o enviado. «history» es la conversación en curso. Si la inmobiliaria pide datos antes de empezar, enviar pasa primero por ese formulario.

JavaScript
Domu('open')                                    // abre donde corresponda
Domu('open', { view: 'help' })                  // 'home' | 'chat' | 'help' | 'history'
Domu('open', { message: '¿Sigue disponible?' }) // deja el mensaje escrito
Domu('open', { view: 'chat', message: 'Quiero visitarlo', send: true }) // lo envía
Domu('close')
Domu('toggle')
Domu('showNewMessage', 'Hola, quiero información')
Domu('startConversation', { message: 'Quiero arrendar' })        // envía (send: true por defecto)
Domu('startConversation', { message: 'Borrador', send: false })  // solo escribe
Domu('showArticle', 'id-del-articulo')
Domu('showSearch', 'mascotas')

Envíale datos y contexto

update guarda los atributos en el contacto (el asesor los ve en la conversación). Si nadie ha escrito todavía, esperan y pasan al contacto cuando se crea. Nombre, correo y teléfono solo llenan lo que falte, nunca reemplazan datos. setContext describe la conversación actual (página, inmueble, carrito): lo ven Noa y el asesor. Se combina por clave.

JavaScript
Domu('update', {
  name: 'Ana Gómez',
  email: '[email protected]',
  phone: '+57 300 000 0000',
  attributes: { plan: 'pro', visitas: 3, vip: true, color: null }, // null borra
})

Domu('setContext', { page: '/inmuebles/p-0042', propertyCode: 'P-0042', cart: { items: 2 } })
Domu('setContext', { cart: null }) // quita una clave
Domu('setContext', null)           // borra todo

Registra y escucha eventos

track deja una actividad «Evento en la web» en la ficha del contacto, con la página. on y off se suscriben a ready, open, close, message y unreadCountChange. message avisa lo que envía el visitante y cada respuesta nueva; ready se llama aunque te suscribas tarde. onUnreadCountChange sigue funcionando.

JavaScript
Domu('track', 'viewed_listing', { code: 'P-0042', price: 2800000 })

function onMessage(m) {
  // m = { id, from: 'visitor' | 'team', author: 'noa' | 'agent' | null, body, timestamp }
  if (m.from === 'team') analytics.track('chat_reply')
}
Domu('on', 'message', onMessage)
Domu('on', 'open', () => {})
Domu('on', 'close', () => {})
Domu('on', 'unreadCountChange', (count) => updateBadge(count))
Domu('off', 'message', onMessage)

Sin escribir código

Cualquier elemento con estos atributos abre el widget al hacer clic, también los que agregues después:

HTML
<button data-domu-open>Chatear</button>
<button data-domu-open="help">Centro de ayuda</button>
<a href="/contacto" data-domu-message="¿Está disponible el P-0042?">Preguntar</a>
<button data-domu-message="Quiero agendar una visita" data-domu-send>Agendar visita</button>
<button data-domu-article="id-del-articulo">Requisitos para arrendar</button>

Límites y seguridad

QuéLímite
Atributos por llamada / por contacto20 / 50
Clave de atributo o de contexto^[A-Za-z][\w.-]{0,39}$
Valor de atributotexto ≤ 255, número, booleano o null
Contexto≤ 20 claves y 2000 caracteres
Eventos (track)100 por sesión · nombre ≤ 60 · 10 props
Llamadas de datos60 por sesión y minuto · cuerpo ≤ 8 KB

Todo lo que manda la página es «no verificado» salvo que la sesión tenga un userHash válido, y un atributo sin firma nunca pisa uno verificado. Noa lo recibe como datos, nunca como instrucciones. La API solo escribe en la sesión del visitante y su contacto: no hay forma de leer datos de otros visitantes. Las claves inválidas se descartan con un aviso en la consola.