Código de exemplo do SDK da Web de bate-papo

Esta página fornece código de amostra para mostrar a funcionalidade principal, como trocar mensagens ou enviar eventos de digitação. As amostras são retiradas do aplicativo de bate-papo de amostra .

Funcionalidade de mensagens de bate-papo

Obter ou criar instâncias de thread

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

Enviar mensagens

thread.sendTextMessage('Message text');	
		

Ouvir novas mensagens

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

Carregar mais mensagens

const loadMoreMessageResponse = await thread.loadMoreMessages();

Iniciar e terminar bate-papos para LiveChat

Para iniciar e encerrar um chat com um canal LiveChat, chame os métodos startChat() e endChat().

await thread.startChat();

Recursos de bate-papo personalizados

Atribuir mensagens aos agentes

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

Lidar com anexos

await thread.sendAttachments(fileList);

Enviar eventos de digitação

O seguinte pode ser chamado várias vezes, por exemplo, a cada pressionamento de tecla.

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

Receber eventos de digitação

// 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 mensagens como lidas

await thread.lastMessageSeen();

Obter posição na fila para LiveChat

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

Ações de vários conversas

Obter lista de conversas

const threads = await sdk.getThreadList();

Carregar metadados

const metadata = await thread.getMetadata();

Arquivar conversa

await thread.archive();

Definir o nome da conversa

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