Olá comunidade Discourse,
Espero que todos estejam bem!
Configurei um chatbot com uma persona de IA (LLM GPT-4 Omni-Mini), e ele tem funcionado maravilhosamente! Mas notei que as interações dos clientes são bem baixas. Atualmente, para conversar com o bot, eles precisam clicar neste pequeno ícone de robô na barra superior, e acho que isso pode não ser muito óbvio.
Criei um tópico explicando como encontrá-lo, mas ainda parece um pouco escondido. Gostaria de saber se há alguma maneira de criar um ícone de widget de chat maior em um canto da tela para destacá-lo mais?
Li sobre a integração do Help Scout ou Zendesk, mas prefiro usar o que já tenho no Discourse sem custos extras ou mais complicações.
Alguma dica ou truque que vocês possam compartilhar? Agradeceria qualquer orientação que puderem me dar! Ainda estou me familiarizando com tudo isso, então qualquer ajuda significa muito.
Obrigado Lilly, essa é uma ótima ideia!
não funcionaria muito bem para o nosso fórum, removi a barra lateral, pensando em torná-lo menos lotado… Posso trazê-la de volta se não encontrar outra solução
Obviamente, eu não me importaria de escalar um pouco…
Eu estava pensando em usar minha própria imagem para este botão (já a adicionei ao meu tema), mas não sei como chamar essa imagem personalizada como ícone nas opções do componente (GitHub - literatecomputing/discourse-custom-components)
Além disso, também não consigo mudar a posição… preciso criar uma seção personalizada no código do tema??
Após alguma pesquisa aqui e ali, o ChatGPT me ajudou a -quase- atingir meu objetivo
Adicionei o botão como Lily sugeriu, e também passei bastante tempo lendo sobre alternativas aqui e ali. Afinal, pedi ao ChatGPT para me ajudar a escrever o código para criar tal botão, ou na verdade um “avatar” flutuante baseado em uma imagem que carreguei em meu tema.
Coloquei o código que estou usando aqui caso possa ajudar alguém no futuro!
HTML:
<a id="chatbot-avatar" href="https://YOUR_URL_HEREs" title="AI chatbot">
<img src="https://YOUR_IMAGE_URL_HERE__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* Fixa o avatar no lugar */
bottom: 50px; /* Distância da parte inferior da página */
right: 50px; /* Distância da parte direita da página */
cursor: pointer; /* Muda o cursor para ponteiro ao passar o mouse */
z-index: 1000; /* Garante que o avatar fique acima de outros conteúdos */
text-align: center; /* Centraliza o texto da tooltip diretamente abaixo do avatar */
}
#chatbot-avatar img {
width: 200px; /* Ajuste o tamanho conforme necessário */
height: 200px; /* Ajuste o tamanho conforme necessário */
transition: transform 0.3s; /* Efeito suave ao passar o mouse */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Amplia ligeiramente o avatar ao passar o mouse */
}
.tooltip {
visibility: hidden; /* Oculto por padrão */
width: 200px; /* Largura da tooltip */
background-color: #000C34; /* Cor de fundo da tooltip */
color: #fff; /* Cor do texto da tooltip */
text-align: center; /* Centraliza o texto */
border-radius: 5px; /* Cantos arredondados */
padding: 8px; /* Espaçamento interno da tooltip */
position: absolute; /* Posicionamento absoluto */
bottom: 220px; /* Posicionado acima do avatar */
right: 50%; /* Centraliza com o avatar */
transform: translateX(50%); /* Ajusta para centralização */
opacity: 0; /* Transparente por padrão */
transition: opacity 0.3s; /* Transição suave */
z-index: 999; /* Posicionado logo abaixo do avatar */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Mostra a tooltip */
opacity: 1; /* Torna totalmente visível */
}
É assim que fica na página (O texto “start a conversation…” aparece apenas ao passar o mouse sobre o avatar.
Só há uma coisa que ainda não consegui fazer, que é fazê-lo aparecer apenas na página inicial, no momento ele aparece em todas as páginas, incluindo a página de discussão do chatbot de IA, onde é claramente redundante… Tentei adicionar um script para identificar a página e bloqueá-lo em todos os lugares, exceto na página inicial, etc… não funcionou até agora. Verei se consigo fazer mais amanhã!
Mas notei que as interações dos clientes são bem baixas. Atualmente, para conversar com o bot, eles precisam clicar neste pequeno ícone de robô na barra superior, e acho que isso pode não ser muito óbvio.
