Instalação e configuração do Ubots Webchat

Documentação de Webchat
Instalação/Importar o Ubots Webchat no seu website

Importar arquivos CSS
Importar arquivos Javascript
Inicialização do Ubots Webchat

Opções de inicialização (options)
Opções de configuração (remoteConfiguration)
Feature Toggles (features)
Pré-formulário (form)
Horário de atendimento (onlinePeriod)
Ações de abertura automática do Webchat
Ícone customizado para abrir o Ubots Webchat
Manipulação do Ubots Webchat via Javascript
Funções
Eventos
Exemplos de inicialização e configuração:
Usuário indefinido (utilizar pré-formulário):
Usuário definido:
Capturando eventos
Emitindo eventos
Configuração com formulário e período offline
Customização de estilo do webchat
Ativação do componente de Avaliação

Instalação/Importar o Ubots Webchat no seu website
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">
Importar arquivos CSS

Dentro da tag <head>:
<link href="https://cdn.ubots.com.br/webchat/ubots.min.css"
rel="stylesheet" />
Importar arquivos Javascript

Logo antes da terminação do corpo da página </body>
<script src="https://cdn.ubots.com.br/webchat/ubots.min.js"> </script>
Inicialização do Ubots Webchat

Após importar os arquivos Javascript deve ser chamada a função init do UbotsWC.
<script type="text/javascript">UbotsWC.init(options);</script>
Opções de inicialização (options)
Campo Descrição Tipo Obrigatório
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
Callback chamado após

onConfigurationLoaded o carregamento do Função JS Não
JSON de configuração
Opções de configuração (remoteConfiguration)
Identificador único
da empresa que
tenant importou o Ubots String Sim
Webchat
Frase que será

title mostrada no String Sim
cabeçalho do chat
Features que devem

features Json Sim
ser habilitadas ou
desabilitadas no
Ubots 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
Texto que deverá

ser exibido na
animação da
welcomeMessage String Não
mensagem de boas
vindas
(welcomeAnimation)
Definição da
imagem e nome do
avatar Jason Não
avatar caso a
feature for habilitada
do bot da página
botId String Sim
gerado pela Ubots.
originId da origem gerado String Sim
pela Ubots.
companyId da empresa gerado String Sim
pela Ubots.
Versão da
version String não
documentação
Feature Toggles (features)

No Ubots webchat é possível configurar quais features devem ser habilitadas ou
desabilitadas para os usuários.
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
}
]
}
● messageOnline Mensagem exibida como título do formulário

● messageOffline Mensagem exibida quando o atendimento está offline
● fields Campos exibidos no formulário com label e tipo. Um campo deve ser
selecionado como identificador ("isId": true)
Horário de atendimento (onlinePeriod)
Descreve os dias da semana e horários nos quais o webchat deve estar disponível
"onlinePeriod": {
"daysRange": "segunda-sexta",
"fromTime": "08:00",
"toTime": "18:00"
}
● daysRange Intervalo de dias

● fromTime Horario de início dentro do intervalo de dias
● toTime Horario de fechamento dentro do intervalo de dias
Ações de abertura automática do Webchat

O Ubots webchat pode ser configurado para abrir automaticamente quando uma
determinada página for acessada pelo usuário.
"actions": [
{
"page": "/open-on-page-changed-2.html",
"message": "Olá [nome] bem vindo ao chat",
"action": "openChat"
}
]
● page Path da página na qual o webchat deve abrir de forma automática.

● message Mensagem que o bot enviará quando o cliente conectar.
● action Nome da ação (atualmente, somente openChat está disponível).
Ícone customizado para abrir o Ubots Webchat

Pode ser utilizado um ícone customizado para abrir o webchat. Para isso, basta habilitar a
feature de ícone customizado "customIcon": true , criar um div com o novo ícone com o
identificador ubots-webchat-icon e executar a função UbotsWC.openChat(); no click do
novo ícone.
Exemplo:
<div class="my-custon-icon" id="ubots-webchat-icon"

onclick="UbotsWC.openChat();"></div>
Páginas onde o WebChat estará desabilitado
Configuração feita via Plataforma onde você pode configurar padrões de URLs onde o
WebChat não aparecerá para o usuário
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"
}
Manipulação do Ubots Webchat via Javascript

Após a inicialização UbotsWC.init(options); é disponibiliza uma variável Javascript
UbotsWC com funções úteis para manipular o webchat programaticamente. Além disso,
eventos são disparados em vários momentos do ciclo de vida da conversa.
Funções
Função Descrição Exemplo
Abre o webchat iniciando UbotsWC.openChat()

openChat(options) uma conversa ou exibindo UbotsWC.openChat({message:
o formulário "Olá"})
Minimiza o webchat
hidePanel() hidePanel()
exibindo o ícone de iniciar
Envia um evento para o sendEventToBackend("userChanged
sendEventToBackend(eventN
atendente ou Bot Page")
ame)
Envia uma mensagem em

background para o
sendMessage(message) sendMessage("Olá!!!")
atendente ou Bot (não é
exibida no webchat)
Adiciona uma propriedade

addUserProperty(property, addUserProperty("phone",
(dados) do usuário logado
value) "(51)3233-7736")
no webchat
Remover sessão do
usuário logado, obrigatório
destroySession() destroySession()
chamar após logout na
página
Remove todos elementos

removeWebchat() removeWebchat()
html do webchat
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
Evento disparado quando o webchat é

ubots-chatOpened
aberto/maximizado
Evento disparado quando uma conexão do

ubots-startConversation
webchat com o backend é estabelecida
Callback executando quando a conexão é

onConnected
estabelecida
document.addEventListener("ubots-chatOpened", function (event) {

console.log("chatOpened");
}, false);
Exemplos de inicialização e configuração:
Usuário indefinido (utilizar pré-formulário):
<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.
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
UbotsWC.init({
user: { id: "rafael@email.com", name: "Rafael" },
remoteConfiguration:
"https://s3.amazonaws.com/ubots-webchat/{env}/config/Tenant.json"
});
document.addEventListener("ubots-chatOpened", function (event) {

console.log("chatOpened")";
}, false);
/script>
<
Emitindo eventos
UbotsWC.sendEventToBackend(“<EVENT_NAME>”, "<EVENT_VALUE>");
</script>
Configuração com formulário e período offline
{
"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
UbotsWC.isChatOnline(remoteConfiguration, onlineCallback, offlineCallback);
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
BOTÃO ÍCONE PADRÃO UBOTS

Cor externa: #ubots-button-icon-outer { fill: #color }
Cor interna: #ubots-button-icon-inner { fill: #color }
Cor dos pontos: .ubots-dot { background-color: #color }
Indicador de status online: .ubots-icon-online-status { fill: #color }
Indicador de status offline: .ubots-icon-status-border { fill: #color }
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 }
Título (via configuração)

Habilitar/Desabilitar upload (via configuração)
Mudar fonte
#ubots-form-div, #ubots-form-div > *, .ubots-form > *, .ubots-reset > *{
font-family: "Heebo Regular",sans-serif !important;
}ç
Ícone de abrir o chat
Indicador online/ofline (.ubots-icon-online-status)

Cor central (.ubots-icon-online-chat)
Cor de fundo (#ubots-icon-elipse)
Ativação do componente de Avaliação
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
}
rateSystem: É só uma propriedade de ativação do tipo Boolean.

Instalação e configuração do Ubots Webchat

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Instalação e configuração do Ubots Webchat

Hochgeladen von

Copyright:

Verfügbare Formate

Documentação de Webchat

Instalação/Importar o Ubots Webchat no seu website

Inicialização do Ubots Webchat

Customização de estilo do webchat

Ativação do componente de Avaliação

Importar arquivos CSS

Importar arquivos Javascript

<script ​src​=​"https://cdn.ubots.com.br/webchat/ubots.min.js"​> </script>

Inicialização do Ubots Webchat

Campo Descrição Tipo Obrigatório

Callback chamado após

Opções de configuração (remoteConfiguration)

Campo Descrição Tipo Obrigatório

Frase que será

Features que devem

Texto que deverá

Feature Toggles (features)

● messageOnline​ Mensagem exibida como título do formulário

● daysRange​ Intervalo de dias

Ações de abertura automática do Webchat

● page​ Path da página na qual o webchat deve abrir de forma automática.

Ícone customizado para abrir o Ubots Webchat

<div ​class​=​"my-custon-icon"​ ​id​=​"ubots-webchat-icon"

Manipulação do Ubots Webchat via Javascript

Função Descrição Exemplo

Abre o webchat iniciando UbotsWC.openChat()

Envia uma mensagem em

Adiciona uma propriedade

Remove todos elementos

Evento disparado quando o webchat é

Evento disparado quando uma conexão do

Callback executando quando a conexão é

document​.addEventListener(​"ubots-chatOpened"​, ​function​ (event) {

Usuário indefinido (utilizar pré-formulário):

document.addEventListener("ubots-chatOpened", function (event) {

Configuração com formulário e período offline

UbotsWC.isChatOnline(remoteConfiguration, onlineCallback, offlineCallback);

BOTÃO ÍCONE PADRÃO UBOTS

Título​ (via configuração)

Ícone de abrir o chat

Indicador online/ofline​ (.ubots-icon-online-status)

rateSystem: ​É só uma propriedade de ativação do tipo Boolean.

Das könnte Ihnen auch gefallen

<script src="https://cdn.ubots.com.br/webchat/ubots.min.js"> </script>

● messageOnline Mensagem exibida como título do formulário

● daysRange Intervalo de dias

● page Path da página na qual o webchat deve abrir de forma automática.

<div class="my-custon-icon" id="ubots-webchat-icon"

document.addEventListener("ubots-chatOpened", function (event) {

Título (via configuração)

Indicador online/ofline (.ubots-icon-online-status)

rateSystem: É só uma propriedade de ativação do tipo Boolean.