Widget de chat moderno e responsivo para qualquer website
chat-widgetchat-widget pode ser incorporada em qualquer lugar do seu HTML, mas é
recomendado colocar no final do body no index.html do seu projeto para garantir
que o chat apareceça em todas as páginas.
Caso queira incorporar o chat em uma seção específica do seu sistema, você pode colocar a tag dentro da propria tela mas em alguns frameworks como Angular pode ser necessário adicionar a flag schemas: [CUSTOM_ELEMENTS_SCHEMA].
scripts de incorporação do chat deve ser feito de forma global, ou seja, em um local que seja carregado em todas as páginas do seu sistema.
<chat-widget
instance-id="floating" bot-name="Assistente Digital"
placeholder="Digite sua mensagem..." position="bottom-right">
</chat-widget>
👆 Veja o chat flutuante no canto inferior direito desta página!
O widget flutuante aparece como um botão azul redondo que você pode clicar para abrir o chat.
<div style="height: 400px; padding: 15px;">
<chat-widget
instance-id="fullscreen"
bot-name="Assistente Digital"
placeholder="Digite sua mensagem..."
fullscreen
>
</chat-widget>
</div>
script no header do seu projeto.
this.assistenteDigitalService.obterLinkChat().subscribe({
next: (data) => {
const script = document.createElement('script');
script.src = data.url;
script.async = true;
script.type = 'module';
document.head.appendChild(script);
},
});
this.assistenteDigitalService.obterLinkChat() precisa ser criada em um serviço que faça a requisição GET para a API.
https://assistentedigital-api.br/componente/assistente-digital
{ "url": "string" }
ChatWidget através do
window.ChatWidget e crie uma classe dedicada aos métodos publicos do chat para facilitar o acesso em todo o sistema
//chat-widget.ts
declare global {
interface ChatWidgetInstanceFacade {
open(): void;
close(): void;
showToggle(): void;
hiddenToggle(): void;
}
interface ChatWidgetGlobal {
getInstance(id: string): ChatWidgetInstanceFacade | null;
listInstances(): string[];
setUserName(name: string): void;
setCanalAtendimento(canal: string): void;
clearCanalAtendimento(): void;
setAccessToken(token: string): void;
}
interface Window {
ChatWidget?: ChatWidgetGlobal;
}
}
export class ChatWidget {
private async readyInstance(instance: string): Promise<ChatWidgetInstanceFacade | undefined> {
await customElements.whenDefined('chat-widget');
const instanceChat = window.ChatWidget?.getInstance(instance);
return instanceChat ?? undefined;
}
private async ready(): Promise<ChatWidgetGlobal | undefined> {
await customElements.whenDefined('chat-widget');
return window.ChatWidget;
}
isDisponivel(instanceId: string) {
return !!window.ChatWidget?.getInstance(instanceId);
}
async setUserName(nome: string): Promise<void> {
(await this.ready())?.setUserName(nome);
}
async setCanalAtendimento(token: string): Promise<void> {
(await this.ready())?.setCanalAtendimento(token);
}
async clearCanalAtendimento(): Promise<void> {
(await this.ready())?.clearCanalAtendimento();
}
async setAccessToken(token: string): Promise<void> {
(await this.ready())?.setAccessToken(token);
}
async open(instance: string): Promise<void> {
(await this.readyInstance(instance))?.open();
}
async close(instance: string): Promise<void> {
(await this.readyInstance(instance))?.close();
}
async showToggle(instance: string): Promise<void> {
(await this.readyInstance(instance))?.showToggle();
}
async hiddenToggle(instance: string): Promise<void> {
(await this.readyInstance(instance))?.hiddenToggle();
}
}
chatWidget: ChatWidget = new ChatWidget();
esconderChat() {
this.chatWidget.hiddenToggle('floating');
}
mostrarChat() {
this.chatWidget.showToggle('floating');
}
esconderChat() {
window.ChatWidget?.getInstance('fullscreen')?.hiddenToggle();
}
mostrarChat() {
window.ChatWidget?.getInstance('fullscreen')?.showToggle();
}
chatWidget: ChatWidget = new ChatWidget();
setarTokenAssistenteDigital() {
let token = this.authService.obterToken();
this.chatWidget.setAccessToken(token);
//caso não tenha criado a classe chatWidget
//window.ChatWidget?.setAccessToken(token);
}
setarNomeUsuarioAssistenteDigital() {
const dadosUsuario = this.authService.obterDadosDoToken();
const nome = dadosUsuario?.name ?? 'Usuário';
this.chatWidget.setUserName(nome);
//caso não tenha criado a classe chatWidget
//window.ChatWidget?.setUserName(nome);
}
| Inputs | Tipos | Padrão | Descrição |
|---|---|---|---|
instance-id |
string | "default" | ID único para identificar a instância do chat widget. |
bot-name |
string | "Chat Bot" | Nome do bot que aparecerá no cabeçalho do chat. |
placeholder |
string | "Digite sua mensagem..." | Texto placeholder do input de mensagem. |
position |
string | "bottom-right" | Posição do chat na tela. Opções: "bottom-right", "bottom-left". |
fullscreen |
boolean | false | Se true, o chat ocupa toda a largura disponível na seção onde está inserido. |
| Método | Descrição |
|---|---|
ChatWidget.setUserName(name: string) |
Define o nome do usuário que aparecerá no chat. |
ChatWidget.setAccessToken(token: string) |
Define o token de acesso para autenticação com a API. |
ChatWidget.getInstance(instanceId: string) |
Retorna a instância do chat widget pelo ID fornecido. |
ChatWidget.setCanalAtendimento(canal: string) |
Define o canal de atendimento usado para filtrar os temas. (Valido sómente para a versão Flutuante) |
ChatWidget.clearCanalAtendimento() |
Limpa os canais de atendimento que filtrava os temas. (Valido sómente para a versão Flutuante) |
ChatWidget.listInstances() |
Lista as instâncias do chat ativa no sistema. |
instance.open() |
Abre o chat widget. (Valido sómente para a versão Flutuante) |
instance.close() |
Fecha o chat widget. (Valido sómente para a versão Flutuante) |
instance.showToggle() |
Mostra o botão de toggle do chat widget. (Valido sómente para a versão Flutuante) |
instance.hiddenToggle() |
Esconde o botão de toggle do chat widget. (Valido sómente para a versão Flutuante) |
(fullscreen) rodando ao mesmo tempo, mas para isso temos que
gerenciar essas instâncias de formas independentes atravez de seus IDs (instance-id).