Código de muestra de SDK web de chat

Esta página proporciona muestras de código para presentar funciones básicas, como el intercambio de mensajes o el envío de eventos de escritura. Las muestras se han tomado de la aplicación de chat de muestra .

Funcionalidad de mensajes de chat

Obtener o crear instancias de hilo

const thread = await sdk.getThread('thread-id');
// Optionally recover a thread state (messages) from the server
const threadRecoveredData = await thread.recover();
		

Enviar mensajes

thread.sendTextMessage('Message text');	
		

Escuchar nuevos mensajes

thread.onThreadEvent(ChatEvent.MESSAGE_CREATED, (event: CustomEvent<ChatEventData>) => {
	// Do something with the event
	event.detail.data.message;
});	
		

Cargar más mensajes

const loadMoreMessageResponse = await thread.loadMoreMessages();

Iniciar y finalizar chats para LiveChat

Para iniciar y finalizar un chat con un canal LiveChat, invoque el método startChat() y endChat().

await thread.startChat();

Funciones de chat personalizadas

Asignar mensajes a agentes

sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, (event: CustomEvent<ChatEventData>) => {
	const agentName = parseAgentName((event.detail.data as AssignedAgentChangedData).inboxAssignee);
});

Gestionar archivos adjuntos

await thread.sendAttachments(fileList);

Enviar eventos de escritura

Los siguientes eventos se pueden ejecutar varias veces, por ejemplo, en cada pulsación de tecla.

thread.keystroke();
// Optionally call stopTyping() when the user stops typing or leaves 
thread.stopTyping();

Recibir eventos de escritura

// Listen for START and STOP typing events
thread.onThreadEvent(ChatEvent.AGENT_TYPING_STARTED, (event: CustomEvent<ChatEventData>) => {
	// Do something with the event
});

thread.onThreadEvent(ChatEvent.AGENT_TYPING_STOPPED, (event: CustomEvent<ChatEventData>) => {
// Do something with the event
});

Marcar mensajes como leídos

await thread.lastMessageSeen();

Obtener posición en la cola de LiveChat

sdk.onChatEvent(ChatEvent.SET_POSITION_IN_QUEUE, (event) => {
	if (isSetPositionInQueuePayload(event.detail)) {
		setQueuePosition(event.detail.data.positionInQueue);
	}
});

Acciones multihilo

Obtener lista de hilos

const threads = await sdk.getThreadList();

Cargar metadatos

const metadata = await thread.getMetadata();

Archivar hilo

await thread.archive();

Establecer nombre de hilo

await thread.setName('New thread name');