O Webchat do G-bot permite que você incorpore um chatbot em seu site.
Esse recurso autônomo do webchat não requer vinculação a plataformas de terceiros, como Facebook, Telegram, WhatsApp ou Google. Isso elimina a necessidade de seus clientes criarem novas contas e facilita interações mais fáceis.
Além disso, se você coletar e-mails ou números de telefone de clientes por meio do webchat, sua empresa poderá se comunicar facilmente com eles por meio de um SMS ou e-mail sempre que necessário.
# Incorporando o código do Webchat em seu site
1 – Copie e insira o seguinte código no corpo ou rodapé do seu site.
Código da cópia:
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "COR_DESEJADA"
});
</script>Este trecho de código simples irá incorporar um webchat em seu site. Implementando como uma Página Autônoma:
# Alternando modelos de Webchat
Atualmente, o G-Bot oferece três modelos. Em breve, ofereceremos mais opções de modelos. Para alterar o modelo, inclua um atributo ‘template’ na função de instalação da seguinte maneira:
Código da cópia:
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "COR_DESEJADA"
modelo: "template1"
});
</script>Atualmente, o G-Bot fornece três modelos: um modelo padrão e dois modelos adicionais chamados “template1” e “template2“. Mais modelos serão introduzidos no futuro.
# Exibindo a foto do perfil da conta como persona
Para mostrar a imagem do perfil da sua conta como uma persona no bate-papo, use o atributo ‘showPersona’ da seguinte maneira:
Código da cópia:
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "COR_DESEJADA"
showPersona: "true"
});
</script>
# Modificando o icone de bate-papoPara alterar o ícone de bate-papo, use o atributo ‘icon’ e especifique a URL da imagem desejada:
Código da cópia:
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "COR_DESEJADA"
showPersona: "true"
icon: "LINK_DA_IMAGEM"
});
</script>Substitua "LINK_DA_IMAGEM" pelo URL da imagem escolhida.# Configurações Gerais do Webchat
| Nome da Opção | Descrição | Valores Possíveis | Padrão |
|---|---|---|---|
| type | Determina como o chatbot aparece na página. | floating / window / container | floating |
| template | Escolhe o template para a aparência do webchat. | template1 / template2 | template1 |
| color | Define a cor primária da interface do webchat. | Qualquer nome de cor ou código hexadecimal | #36D6B5 |
| headerTitle | O título exibido no cabeçalho do webchat. | Qualquer texto | Nome da Conta |
| hideHeader | Opção para ocultar a seção de cabeçalho que contém o nome do negócio. | true / false | FALSE |
# Configurações de Posição do Webchat
| Nome da Opção | Descrição | Valores Possíveis | Padrão |
|---|---|---|---|
| element | Especifica o elemento HTML no qual o chatbot será embutido (aplicável apenas se o tipo for “contêiner”). | Qualquer ID ou classe válida de elemento HTML | — |
| right | Distância do ícone do chat à borda direita da tela. | Qualquer unidade CSS válida (ex.: px, em) | 20px |
| bottom | Distância do ícone do chat à borda inferior da tela. | Qualquer unidade CSS válida (ex.: px, em) | 20px |
# Configurações de Comportamento do Webchat
| Nome da Opção | Descrição | Valores Possíveis | Padrão |
|---|---|---|---|
| loadMessages | Carrega conversas anteriores com o contato quando o webchat é aberto. | true / false | TRUE |
| hideComposer | Opção para ocultar a área de entrada de mensagens (composer). | true / false | FALSE |
| showPersona | Exibe a imagem de perfil da conta como uma persona dentro do chat. | true / false | FALSE |
# Ações Avançadas do Webchat
| Nome da Opção | Descrição | Valores Possíveis | Padrão |
|---|---|---|---|
| ref | Envia automaticamente um fluxo ou ID de etapa específico quando o ícone do chat é clicado. | Qualquer ID de fluxo/etapa | — |
| setCustomFields | Permite definir múltiplos campos personalizados, incluindo campos do sistema como email, telefone, etc. | Campos personalizados e campos do sistema | — |
# Personalização do Ícone da Bolha do Webchat
| Nome da Opção | Descrição | Valores Possíveis | Padrão |
|---|---|---|---|
| icon | URL de um ícone de bolha de chat personalizado para substituir o ícone padrão no canto inferior direito. | URL da imagem | — |
| chat-avatar | CSS para ajustar o tamanho e aparência do avatar do chat, incluindo largura, altura e raio da borda. | width: 20px; height: 20px; border-radius: 50%; overflow: hidden; margin-left: -8px; | — |
# Tabela formatada com Classe CSS para implantar dentro do Editor de WEB Chat:
| # | Classe CSS | Descrição | Exemplo de Implementação |
|---|---|---|---|
| 1 | .chat-header | Estiliza a área do cabeçalho do chat. | .chat-header { background-color: #f4f4f4; padding: 10px; } |
| 2 | .m-0 | Remove todas as margens (margin: 0). | .m-0 { margin: 0; } |
| 3 | .py-3 | Adiciona padding na parte superior e inferior (padding: 1rem). | .py-3 { padding-top: 1rem; padding-bottom: 1rem; } |
| 4 | .chat-area | Estiliza a área principal do chat. | .chat-area { background: linear-gradient(90deg, #FFDEE9 0%, #B5FFFC 100%); padding: 20px; } |
| 5 | .py-4 | Adiciona padding na parte superior e inferior (padding: 1.5rem). | .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; } |
| 6 | .px-4 | Adiciona padding nas laterais (padding: 1.5rem). | .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; } |
| 7 | .chat-area2 | Estilização alternativa para a área do chat sem cabeçalho. | .chat-area2 { background-color: #e0f7fa; } |
| 8 | .my-message | Estiliza as mensagens do próprio usuário. | .my-message { background-color: #d1e7dd; padding: 10px; border-radius: 10px; } |
| 9 | .animate__animated | Aplica animação ao elemento (da biblioteca Animate.css). | .animate__animated { animation-duration: 1s; } |
| 10 | .animate__slideInRight | Anima o elemento com efeito de entrada pela direita. | .animate__slideInRight { animation-name: slideInRight; } |
| 11 | .other-message | Estiliza as mensagens de outros usuários. | .other-message { background-color: #f8d7da; padding: 10px; border-radius: 10px; } |
| 12 | .animate__slideInLeft | Anima o elemento com efeito de entrada pela esquerda. | .animate__slideInLeft { animation-name: slideInLeft; } |
| 13 | .clearfix | Limpa os flutuantes dos dois lados do elemento. | .clearfix { clear: both; } |
| 14 | .chat-avatar | Estiliza a imagem do avatar no chat. | .chat-avatar { width: 40px; height: 40px; border-radius: 50%; } |
| 15 | .float-left | Alinha o elemento à esquerda. | .float-left { float: left; } |
| 16 | .mr-2 | Adiciona margem à direita (margin-right: 0.5rem). | .mr-2 { margin-right: 0.5rem; } |
| 17 | .mt-2 | Adiciona margem superior (margin-top: 0.5rem). | .mt-2 { margin-top: 0.5rem; } |
| 18 | .my-0 | Remove margens superior e inferior (margin-top: 0; margin-bottom: 0). | .my-0 { margin-top: 0; margin-bottom: 0; } |
| 19 | .px-4 | Adiciona padding nas laterais (padding: 1.5rem). | .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; } |
| 20 | .text-center | Centraliza o texto horizontalmente dentro do elemento. | .text-center { text-align: center; } |
| 21 | .text-secondary | Aplica estilo de cor secundária ao texto. | .text-secondary { color: #6c757d; } |
| 22 | .message | Estiliza a área de conteúdo da mensagem. | .message { padding: 10px; border-radius: 8px; } |
| 23 | .my-2 | Adiciona margens verticais (margin-top: 0.5rem; margin-bottom: 0.5rem). | .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } |
| 24 | .message-text | Estiliza o texto dentro de uma mensagem. | .message-text { font-size: 14px; } |
| 25 | .m-0 | Remove todas as margens (margin: 0). | .m-0 { margin: 0; } |
| 26 | .message-attach | Estiliza o container de mídia anexada nas mensagens. | .message-attach { padding: 10px; } |
| 27 | .message-attach-big | Estiliza a mídia anexada maior nas mensagens. | .message-attach-big { padding: 20px; } |
| 28 | .flow | Aplica estilo relacionado a fluxo no elemento. | .flow { display: flex; } |
| 29 | .flow-text | Estiliza o texto dentro de elementos relacionados a fluxo. | .flow-text { font-size: 16px; } |
| 30 | .div_flow_content | Estiliza o container de conteúdo dentro de um fluxo. | .div_flow_content { padding: 15px; } |
| 31 | .pb-0 | Remove padding na parte inferior (padding-bottom: 0). | .pb-0 { padding-bottom: 0; } |
| 32 | .textarea_c | Estiliza o container da área de texto. | .textarea_c { padding: 10px; } |
| 33 | .div_text_c | Estiliza o conteúdo de texto dentro de uma área de texto. | .div_text_c { font-size: 14px; } |
| 34 | .div_btts | Estiliza o container de botões em um fluxo ou mensagem. | .div_btts { display: flex; justify-content: space-around; } |
| 35 | .p_add_btt | Estiliza botões adicionais na interface do chat. | .p_add_btt { padding: 10px; background-color: #007bff; color: white; } |
# Adicionando webchat no formato container no seu site:
<style>
#webchat-container {
width: 500px; /* Defina a largura desejada */
height: 600px; /* Defina a altura desejada */
border-radius: 10px; /* Cantos arredondados */
overflow: hidden; /* Garante que a sombra seja aplicada corretamente */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Sombra centralizada e suave */
}
</style>
<div id="webchat-container"></div>
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "#000000",
type: "container",
element: "#webchat-container"
});
</script># Botão com webchat customizado na lateral da tela
<script src="https : //app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>ktt10.setup( {
id : "ID_DO_PLUGIN",
accountId : "ID_DA_CONTA",
color : "#6B38FF",
model : "template1"
});
</script>
<style>.ktt10-btn {
height : 31px !important;
width : 103px !important;
object-fit : contain !important;
top : 34%;
right : -36px !important;
rotate : 270deg;
border-bottom-left-radius : 0px !important;
border-bottom-right-radius : 0px !important;
border-top-left-radius : 10px !important;
border-top-right-radius : 10px !important;
background-color : #6B38FF;
color : white;
font-size : 14px;
display : flex;
justify-content : center;
align-items : center;
}
.ktt10-btn img {
display : none;
}
.ktt10-flt {
box-shadow: -3px 2px 21px 0px rgba(0, 0, 0, .8) !important;
bottom : 20% !important;
}
@media (max-width: 460px), (max-height : 520px) {
.ktt10-btn{display : none !important;
}
}.ktt10-btn : before {
content : "Ajudante IA";
font-family : monospace;
}
.ktt10-btn : hover {
transform: none!important;
background : #007bff!important;
}
</style># Imagem mudando imagem do ícone e pulsando
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "#9900ff",
showPersona: true,
});
</script>
<style>
.ktt10-btn img {
display: none;
}
.ktt10-flt.ktt10-flt2 {
box-shadow: -2px 0px 14px 0px rgb(0 0 0 / 66%) !important;
}
.ktt10-btn {
animation: pulseShadow 1.5s infinite;
background-image: url('LINK_DA_SUA_IMAGEM');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes pulseShadow {
0% {
box-shadow: 0 0 0 0 rgba(39, 0, 255);
}
50% {
box-shadow: 0 0 20px 10px rgba(39, 0, 255, 30%);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 209, 251, 0);
}
}
</style># Fazendo a transição da conversa de qualquer canal para o Webchat
Nem todos os canais suportam os recursos abrangentes oferecidos. Por exemplo, se um cliente estiver se comunicando com sua empresa via SMS e você quiser exibir uma lista de galeria de seus serviços, você poderá transferir a conversa para o webchat.
Basta enviar ao usuário uma mensagem contendo o seguinte campo personalizado do sistema: {{webchat}}
Para iniciar automaticamente um fluxo ou etapa específica quando o usuário acessar este link, acrescente “&ref=ID_DO_FLUXO_OU_ETAPA” ao final.
Por exemplo, se o ID_DO_FLUXO For 111111, o link será:
{{webchat}}&ref=111111
Esse link carregará mensagens anteriores da conversa entre o bot e o usuário.
Se preferir não carregar mensagens antigas, acrescente “&lc=0” no final do link:
{{webchat}}&ref=111111&lc=0
# Como Abrir Automaticamente o Webchat
Configuração do Script do G-bot com Tempo Limite
Para configurar o plugin G-bot e incluir uma função setTimeout para clicar em um botão após 4 segundos, siga o formato do script abaixo:
<script src="https://app.gbotpro.com/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "#7E66D9"
});
setTimeout(function() {
ktt10Btn.click();
}, 4000);
</script>Este script inicializa o plugin G-bot com a configuração especificada e define um tempo limite para clicar automaticamente no botão ktt10Btn após 4 segundos.
# Botão estilo WhatsApp com carregamento em pop-up:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
button {
padding: 10px 30px 15px;
font-size: 24px;
font-weight: 600;
cursor: pointer;
border: none;
border-radius: 45px;
color: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
padding-right: 60px;
padding-left: 50px;
background-image: radial-gradient(at center center, #00990F 0%, #00DF50 100%);
display: flex;
align-items: center;
transition: all .3s;
}
button#openPopupBtn:hover {
scale: 0.9;
}
button:hover {
background-color: #0056b3;
}
.popup-container {
display: none; /* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup-content {
position: relative;
width: 90%;
max-width: 600px;
height: 55%; /* Adjusted height */
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
padding: 0; /* Remove padding */
overflow: hidden;
}
#webchat-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
background: #f3f3f3;
border: none;
color: #000;
z-index: 1001;
box-shadow: none;
padding: 0;
padding-right: 8px;
padding-left: 8px;
line-height: 1;
padding-bottom: 7px;
}
.close-btn:hover {
color: #ffffff;
}
.whatsapp-icon {
margin-right: 10px;
font-size: 24px; /* Adjust as needed */
margin-right: 50px;
}
</style>
</head>
<body>
<button id="openPopupBtn"><i class="fa-brands fa-whatsapp whatsapp-icon"></i> Agendar Reunião</button>
<div id="popupContainer" class="popup-container">
<div class="popup-content">
<button id="closePopupBtn" class="close-btn">×</button>
<div id="webchat-container"></div>
</div>
</div>
<script>
document.getElementById('openPopupBtn').addEventListener('click', function() {
document.getElementById('popupContainer').style.display = 'flex';
if (!window.webchatLoaded) {
var script = document.createElement('script');
script.src = "https://app.gbotpro.com/webchat/plugin.js?v=5";
script.onload = function() {
ktt10.setup({
id: "ID_DO_PLUGIN",
accountId: "ID_DA_CONTA",
color: "#00e30f",
type: "container",
element: "#webchat-container"
});
window.webchatLoaded = true;
};
document.body.appendChild(script);
}
});
document.getElementById('closePopupBtn').addEventListener('click', function() {
document.getElementById('popupContainer').style.display = 'none';
});
</script>
</body>
</html>