Escolar Documentos
Profissional Documentos
Cultura Documentos
Para incorporar o Ubots Webchat ao site o cliente deve importar dois arquivos CSS, dois
arquivos JavaScript e executar a função init UbotsWC.
Webchat responsivo
Adicionar meta tag, essa tag serve para os browsers dos dispositivos mobiles conseguirem
redimensionar o webchat.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.ubots.com.br/webchat/ubots.min.css"
rel="stylesheet" />
<script type="text/javascript">UbotsWC.init(options);</script>
Opções de inicialização (options)
Dados do usuário do
webchat, no logout da
página obrigatório
user chamar Json Não
UbotsWC.destroySessio
n()
Parâmetros de
remoteConfiguration
remoteConfiguration configuração dispostas String (URL
é obrigatória
em um arquivo remoto
Identificador único
da empresa que
tenant importou o Ubots String Sim
Webchat
Definição dos
campos do
formulário exibido
form (caso necessário) Json Não
para identificar o
usuário antes de
iniciar o chat
Definição da
imagem e nome do
avatar Jason Não
avatar caso a
feature for habilitada
Identificador único
do bot da página
botId String Sim
gerado pela Ubots.
Identificador único
originId da origem gerado String Sim
pela Ubots.
Identificador único
companyId da empresa gerado String Sim
pela Ubots.
Versão da
version String não
documentação
Define se o Ubots
Não (false por
webChatEnabled Webchat deve ou Boolean
default)
não ser exibido
Define se a opção
de upload de Não (false por
fileUpload Boolean
arquivos deve ser default)
disponibilizada
Define se o
formulário de
Não (false por
preForm identificação de Boolean
default)
usuário pode ou não
ser exibido
Define se as ações
de abertura
Não (false por
uiActions automática de chat Boolean
default)
estão ou não
disponíveis
Define se a opção
de funcionamento Não (false por
onlinePeriod Boolean
por período está ou default)
não disponível
Define se será ou
não utilizado um
Não (false por
customIcon ícone customizado Boolean
default)
para iniciar o Ubots
Webchat
padrão de páginas
disabledPages onde o webchat String Array Não
estará desabilitado
Define se será
habilitada a opção
rateSystem do usuário avaliar o Boolean Não
atendimento ao
fechar a conversa
Define se será
welcomeAnimation exibida uma Boolean Não
mensagem
chamando o usuário
para conversa
quando seu primeiro
acesso no site
Define se deverá
ser exibida a
avatar imagem de um Boolean Não
avatar no cabeçalho
da conversa
Pré-formulário (form)
Formulário que pode ser exibido para requisitar dados de usuários antes de iniciar o
atendimento. Ideal para usuários que não possuem login no site onde o Ubots Webchat está
sendo executado.
"form": {
"title": "Atendimento online"
"messageOnline": "Para falar com nossos atendentes, preencha o
formulário abaixo.",
"messageOffline": "O nosso chat funciona de segunda a sexta-feira das
8 ás 18 horas.",
"fields": [
{
"label": "ubots-name",
"type": "text",
"display": "Nome"
},
{
"label": "ubots-email",
"type": "email",
"display": "E-mail",
"isId": true
}
]
}
"onlinePeriod": {
"daysRange": "segunda-sexta",
"fromTime": "08:00",
"toTime": "18:00"
}
"actions": [
{
"page": "/open-on-page-changed-2.html",
"message": "Olá [nome] bem vindo ao chat",
"action": "openChat"
}
]
Exemplo:
Exemplo:
www.exemplo.com.br/produtos/*
Desabilitará para todas as páginas que casarem com este padrão exemplo
www.exemplo.com.br/produtos/meu-produto.html
Avatar
Definição da imagem e nome do avatar que deve ser utilizado quando habilitada a feature
toggle avatar
Exemplo:
"avatar": {
"image": "https://img.icons8.com/windows/420/bot.png"
"name": "Bot"
}
Funções
Minimiza o webchat
hidePanel() hidePanel()
exibindo o ícone de iniciar
Envia um evento para o sendEventToBackend("userChanged
sendEventToBackend(eventN
atendente ou Bot Page")
ame)
Remover sessão do
usuário logado, obrigatório
destroySession() destroySession()
chamar após logout na
página
isChatOnline(“https://s3.amazonaws.c
isChatOnline(configUrl,
funcão para fazer om/ubots-webchat/{env}/config/Tena
tratamento do horário de
onlineCallback, offlineCallback) nt.json”, function(){console.log(‘online’},
atendimento do chat
function(){console.log(‘offline’)})
Eventos
Evento Descrição
<script type="text/javascript">
UbotsWC.init({remoteConfiguration:'https://s3.amazonaws.com/ubots-webcha
t/{env}/config/Tenant.json'});
</script>
Usuário definido:
Após a inicialização do webchat com usuário definido, são salvos no session storage estes
dados, caso o cliente não feche a aba os dados permanecem salvos, quando o usuário fizer
logout na página é obrigatório que seja chamado UbotsWC.destroySession() para limpar o
session storage.
O campo id do usuário deve ser String obrigatoriamente.
<script type="text/javascript">
UbotsWC.init({
user: { id: "joao@email.com", name: "João", phone: "9999-9999" },
remoteConfiguration:
"https://s3.amazonaws.com/ubots-webchat/{env}/config/Tenant.json"
});
</script>
Capturando eventos
<script type="text/javascript">
UbotsWC.init({
user: { id: "rafael@email.com", name: "Rafael" },
remoteConfiguration:
"https://s3.amazonaws.com/ubots-webchat/{env}/config/Tenant.json"
});
Emitindo eventos
<script type="text/javascript">
UbotsWC.sendEventToBackend(“<EVENT_NAME>”, "<EVENT_VALUE>");
</script>
{
"tenant": "MyCompany",
"botId": uuid,
"companyId": uuid,
"originId": uuid,
"version": “2”,
"features": {
"webChatEnabled": true,
"fileUpload": true,
"preForm": true,
"uiActions": true,
"onlinePeriod": true,
"customIcon": false
},
"actions": [],
"form": {
"messageOnline": "Por favor preencha o formulário abaixo para
começar a conversar com um dos nossos atendentes.",
"messageOffline": "Estamos offline no momento",
"fields": [
{
"label": "name",
"type": "text",
"display": "Nome"
},
{
"label": "email",
"type": "email",
"display": "E-mail",
"isId": true
}
]
},
"onlinePeriod": {
"daysRange": "segunda-sexta",
"fromTime": "08:00",
"toTime": "17:59"
}
}
Verificação horário de atendimento do webchat
Após importar os arquivos Javascript deve ser chamada a função isChatOnline do UbotsWC
Exemplo:
UbotsWC.isChatOnline(
'https://s3.amazonaws.com/ubots-webchat/{env}/config/Tenant.json',
function(){
console.log('chat online')
},
function(){
console.log('chat chat offline)
})
Customização de estilo do webchat
Tela de chat
MENSAGEM WELCOME
Cor dos balões de conversa da feature Welcome Animation:
.ubots-welcome-boloon { background-color: #color; color: #color }
CABEÇALHO
Cor do cabeçalho: .wc-header { background-color: #color; color: #color }
Cor de fundo do Avatar no cabeçalho: .ubots-avatar { background-color: #color }
Cor do botão minimizar _ : .ubots-minimize-icon svg path { fill: #color }
Cor do botão fechar X: .ubots-close-icon svg path { fill: #color }
FORMULÁRIO
Cor do botão “Começar chat” : .ubots-form-footer button { background-color:
#color; color: #color }
CHAT
Imagem de fundo: .wc-message-groups { background-image: #url }
Mensagem do bot: .wc-message-from-bot .wc-message-content {
background-color: #color; color: #color }
Mensagem do usuário: .wc-message-from-me .wc-message-content {
background-color: #color; color: #color }
Cor do botão sender: .wc-send svg path { fill: #color }
Botões carrossel: .wc-carousel button.scroll { background-color: #color }
Botões dos cards: .wc-card button { background-color: #color; color: #color }
Mudar fonte
#ubots-form-div, #ubots-form-div > *, .ubots-form > *, .ubots-reset > *{
font-family: "Heebo Regular",sans-serif !important;
}ç
Para ativar a função de Avaliação no json de configuração tem que estar “true” a
propriedade rateSystem como se mostra a seguir.
"features": {
"webChatEnabled": true,
"fileUpload": true,
"preForm": true,
"uiActions": true,
"onlinePeriod": false,
"uploadButton": false,
"customIcon": false,
"rateSystem": true
}