Ventana de chat (iFrame)

En este artículo te explicamos cómo incrustar la ventana de chat de Wazzup en tu CRM y cómo configurar el funcionamiento del menú desplegable de “Ofertas” (Deals) a través de eventos.

Recomendamos trabajar con el menú “Ofertas” utilizando webhooks. Y si no es posible usar webhooks, entonces mediante eventos.

Cómo incrustar la ventana de chat de Wazzup en tu CRM

Para obtener el enlace que abrirá la ventana de chat, necesitas realizar la siguiente solicitud:

 POST https://api.wazzup24.com/v3/iframe

Parámetros de la solicitud

Si no existe un contacto con el chatType y chatId especificados en la base de datos de Wazzup, se creará automáticamente cuando se abra en la ficha del contacto desde el CRM.

Se usará el campo name como nombre del contacto, o el chatId si name no se proporciona.

Ejemplo de solicitud

 curl --location --request POST 'https://api.wazzup24.com/v3/iframe' \
--header 'Authorization: Bearer c8cf90554027882f912520f454468d27' \
--header 'Content-Type: application/json' \
--data-raw '
{

"user": {
"id": "222555",
"name": "User Name"
},

"scope": "card",
"filter": [

{
"chatType": "whatsapp",
"chatId": "79998887766"
}

],
"activeChat": {
"chatType": "whatsapp",
"chatId": "79998887766"
}
}
'

Respuesta exitosa

La respuesta incluirá un archivo JSON con un enlace para abrir la ventana de chat.

Si abre el enlace en el iframe, añada el atributo allow="microphone *; clipboard-write *" a la etiqueta.

Debe especificar "microphone" para que los usuarios puedan grabar mensajes de voz desde la ventana de chat. De lo contrario, el usuario verá un error al hacer clic en el icono del micrófono para grabar.

Es necesario especificar "clipboard-write" para que la copia del portapapeles funcione correctamente en nuestro iframe. Por ejemplo, el usuario podría copiar el código de error de la notificación en el botón.

 <iframe src="link" allow="microphone *; clipboard-write *"></iframe>

Ejemplo de respuesta

{
"url": "https://12345678.wazzup24.com/chat/0e812899-e25b-4a18-a3e4-d1f5890f9de7?token=${token}"
}

In case of an error, the response will receive a json containing the error property, or an http code 500.

Respuesta en caso de error

 { "error": { "code": "NO_SUCH_ACCOUNT" }

Eventos enviados por iFrame

Esta sección describe cómo configurar la operación desplegable "Ofertas" en iframes mediante eventos. Se recomienda configurarlo con webhooks.

El iframe puede enviar eventos que indican la necesidad de:

• Crear una nueva oferta (deal)
• Mostrar una entidad específica
• Crear un nuevo contacto

¿Qué eventos puede reportar un iFrame?

El usuario hace clic en el "+" desde el “maletín” para crear una oferta (deal)

Esto significa: debes crear una nueva oferta (deal) con los parámetros que se pasaron al iFrame en el evento.

Nombre del evento: WZ_CREATE_ENTITY

Cómo recibirlo: Debes enviar el parámetro options.useDealsEvents: true al generar el enlace del iFrame.

¿Qué contiene?

Campo	Tipo	Descripción
type	String	Nombre del evento: WZ_CREATE_ENTITY
data	Object	Objeto que contiene los datos del evento
data.chatType	String	Tipo de mensajero: whatsapp, instagram, telegram, vk, avito
data.chatId	String	ID del chat (cuenta del contacto en el mensajero)
data.channelId	String	ID del canal
data.userId	Number	ID del usuario del CRM
data.integrationId	String	ID de la integración

Ejemplo de un evento:

{
  type: 'WZ_CREATE_ENTITY',
  data: {
    chatType: whatsapp,
    chatId: 79998887766,
    channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
    userId: test_id,
    integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222
  } 
}

Después de crear una oferta, debes enviar los datos de la nueva oferta desde el CRM a Wazzup.

El usuario intenta abrir un trato, contacto u otra entidad desde "maleta"

Significado: El usuario desea abrir una transacción, un contacto u otra entidad con los parámetros transferidos desde el iFrame.

Nombre: WZ_OPEN_ENTITY

Cómo obtener: Envíenos el valor `options.useDealsEvents: true` al generar el enlace del iFrame.

Contenido:

Campo	Tipo	Descripción
type	String	Nombre del evento WZ_CREATE_ENTITY
data	Object	El objeto que contiene los datos del evento.
data.chatType	String	Tipo de mensajería de chat: WhatsApp, Instagram, Telegram, VK, Avito
data.chatId	String	ID de chat (cuenta de mensajería del contacto)
data.channelId	String	ID del canal
data.userId	Number	ID de usuario de CRM
data.integrationId	String	ID de integración
data.entity	Object	El objeto que contiene los datos de la entidad.
data.entity.closed	Boolean	Bandera. Indica si un trato está cerrado o abierto.
data.entity.id	Number	Identificador de la entidad que abre el usuario
data.entity.link	String	Enlace a la entidad. No puede haber nada.
data.entity.name	String	Nombre de la entidad
data.entity.responsibleUserName	String	Nombre del usuario responsable de la entidad

Ejemplo de un evento:

{
  type: 'WZ_OPEN_ENTITY',
  data: {
    chatType: whatsapp,
    chatId: 79998887766,
    channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
    userId: test_id,
    integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222,
    entity: {
      closed: false,
      id: clientId3,
      link: #,
      name: TestDeal,
      responsibleUserName: TestUser
    }
  } 
}

El usuario envió un mensaje desde el iframe y se mostró en el iFrame

Significa: Debe crear un contacto con los parámetros transferidos desde el iframe.

El evento se generará cada vez que el vendedor envíe un mensaje, no solo cuando escriba al cliente por primera vez. Por lo tanto, el evento puede generarse incluso cuando el contacto ya se haya creado en el CRM.

Nombre: WZ_OUTPUT_MESSAGE

Cómo obtener: envíenos options.useMessageEvents: true al generar el enlace del iframe.

Contenido:

Campo	Tipo	Descripción
type	String	Nombre del evento WZ_CREATE_ENTITY
data	Object	El objeto que contiene los datos del evento.
data.chatType	String	Tipo de mensajería de chat: WhatsApp, Instagram, Telegram, VK, Avito
data.chatId	String	ID de chat (cuenta de mensajería del contacto)
data.channelId	String	ID del canal
data.userId	Number	ID de usuario de CRM
data.integrationId	String	ID de integración
data.messageId	String	ID del mensaje enviado
data.name	String	Nombre de un contacto en messenger, redes sociales
data.username	String	@nombredeusuario del contacto en Telegram
data.telephone	String	Número de teléfono del contacto en Telegram

Ejemplo de un evento:

{
  type: 'WZ_OUTPUT_MESSAGE',
  data: {
    chatType: whatsapp,
    chatId: 79998887766,
    channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
    userId: test_id,
    integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222,
    messageId: 7886о490-49df-8hj3-3jkj-wes4xc54fwd
  } 
}

Después de crear un contacto, debes enviar datos sobre el contacto desde CRM a Wazzup.

Hemos creado una página HTML que sirve como ejemplo de cómo capturar eventos de iframe. Cómo usar:

1. Generar un enlace al iframe mediante el método API.
2. Insertar ese enlace en el campo de entrada de la página HTML.
3. Se mostrará la interfaz de chat. Podrás pulsar los botones necesarios para activar un evento; los datos de este evento aparecerán sobre el iframe.