Huggy

Inicializar programaticamente e SPAs

O Huggy Chat funciona com frameworks do tipo Vue, React, Angular, Svelte e outros. Entretanto, possa ser que seja necessário algumas alterações. A instalação comum do Huggy Chat, em que se copia o código disponibilizado no painel e coloca no HTML, necessita do acesso ao arquivo HTML. Para ela funcionar, é necessário inserir o código de instalação no arquivo HTML que recebe o build do framework (geralmente o public/index.html ou static/index.html que os frameworks disponibilizam).

Quando não se tem acesso à esse arquivo ou simplesmente você quer inicializar o Huggy Chat via API, é necessário usar o Huggy.init.

Huggy.init(HuggyChatInit?)

Permite inicializar o Huggy Chat programaticamente. Esse método é disponibilizado pela API somente quando o objeto de configuração $_Huggy não é fornecido ou Huggy.logout é chamado e o Huggy Chat não é recarregado. O parâmetro { HuggyChatInit } é opcional. Os casos de uso são:

  1. Ao inicializar o Huggy Chat sem o objeto de configuração $_Huggy
  2. Ao executar o método Huggy.logout(false). Saiba mais sobre o Huggy.logout

No caso 1. é útil em SPAs ou quando você precisa inicializar o Huggy Chat em outro momento. Ao invés de acrescentar o código de instalação e ele iniciar automaticamente, você vai apenas inserir o script do Huggy Chat:

<script src="https://js.huggy.chat/widget.min.js"></script>
1

Quando ele é inicializado e não existe o objeto de configuração $_Huggy no window, ele disponibiliza o método Huggy.init na API.

Nesse caso, o único método disponível em toda a API é o Huggy.init

Utilizando

Há 2 maneiras de inicializar programaticamente. Você pode declarar o objeto de configuração do Huggy Chat window.$_Huggy=HuggyChatInit e chamar o Huggy.init() sem parâmetros. Assim, ele vai procurar o objeto de configuração previamente declarado.

Note que o objeto de configuração nesse caso é um específico para inicialização programática, o HuggyChatInit

A outra é inicializar o Huggy.init(HuggyChatInit) passando a configuração específica.

Em ambos os casos, após a execução do Huggy.init, o Huggy Chat é devidamente carregado e o método deixa de existir.

HuggyChatInit

PropertyTypeDescriptionDefault
contextIDstringID de contexto. Você pode encontrá-lo no script de inicialização presente no código de instalação do seu Huggy Chat, fornecido pela nossa plataforma durante a configuração do canal.
...HuggyChatConfigTodas as propriedades presentes em HuggyChatConfig são herdadas por HuggyChatInit.
<a href="#contextid">contextID</a> string

ID de contexto. Você pode encontrá-lo no script de inicialização presente no código de instalação do seu Huggy Chat, fornecido pela nossa plataforma durante a configuração do canal.

Default:

... HuggyChatConfig

Todas as propriedades presentes em HuggyChatConfig são herdadas por HuggyChatInit.

Default:

contextID

O contextID é um hash único que é necessário para o funcionamento do Huggy Chat. Se você estiver utilizando a forma comum que é inserindo o código de instalação disponível no canal de configuração da sua conta, você não precisa se preocupar porque ele já está incluindo.

Esse parâmetro só é importante para quem utiliza o Huggy Chat programaticamente via Huggy.init.

Esse hash é encontrado no código de instalação do Huggy Chat, nas configurações de canal. Vou pegar como exemplo o código usado na seção instalando









 



<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001"
  };
  
  (function(i,s,o,g,r,a,m){ i[r]={context:{id:'8551dbde3f168db249381597eea81c71'}};a=o;o=s.createElement(o); o.async=1;o.src=g;m=s.getElementsByTagName(a)[0];m.parentNode.insertBefore(o,m); })(window,document,'script','https://js.huggy.chat/widget.min.js?v=8.0.0','pwz');
</script>
<!-- End code Huggy Chat  //-->
1
2
3
4
5
6
7
8
9
10
11

Na linha em destaque, que é a inicialização do script, observamos a chamada do script do nosso CDN e o hash contextID 8551dbde3f168db249381597eea81c71

Neste caso, reformulando o código padrão de instalação para uso com o Huggy.init ficaria assim:





 


Huggy.init({
  defaultCountry: '+55',
  widget_id: '0001',
  company: "0001",
  contextID: '8551dbde3f168db249381597eea81c71'
})
1
2
3
4
5
6

Huggy.init recebe como parâmetro um objeto HuggyChatInit

Tipos

HuggyChatConfig

PropertyTypeNoteDescriptionDefault
widget_idstringDeprecatedID único do seu Huggy Chat. Obrigatório para o funcionamento do chat, presente no código de instação que encontra-se na configuração do canal
companystringID único da sua conta da Huggy. Obrigatório para o funcionamento do chat, presente no código de instação que encontra-se na configuração do canal
defaultCountrystringDDI do país+55opcional
namestringDefine previamente o nome do contato que vai inicializar o chatopcional
phonestringDefine previamente o telefone do contato que vai inicializar o chatopcional
emailstringDefine previamente o email do contato que vai inicializar o chatopcional
channelGreetingstringEssa propriedade é utilizada nos links de "Me Chame no Whatsapp" e "Me Chame no Telegram". O default é "Oi" e, com essa propriedade, pode ser alterada para ambos os serviçosOiopcional
afterLoadfunctionEvento callback que é executado ao término do carregamento do Huggy Chatopcional
beforeLoadfunctionEvento callback que é executado antes do carregamento do Huggy Chatopcional
mainColorstringDefine a cor principal do Huggy Chatopcional
colorsobject[HuggyChatConfigColors]Objeto contendo as definições de cores para o Huggy Chatopcional
widget_id string

Note: Deprecated

ID único do seu Huggy Chat. Obrigatório para o funcionamento do chat, presente no código de instação que encontra-se na configuração do canal

Default:

company string

Note:

ID único da sua conta da Huggy. Obrigatório para o funcionamento do chat, presente no código de instação que encontra-se na configuração do canal

Default:

defaultCountry string

Note:

DDI do país

Default: +55
name string

Note:

Define previamente o nome do contato que vai inicializar o chat

Default:

phone string

Note:

Define previamente o telefone do contato que vai inicializar o chat

Default:

email string

Note:

Define previamente o email do contato que vai inicializar o chat

Default:

channelGreeting string

Note:

Essa propriedade é utilizada nos links de "Me Chame no Whatsapp" e "Me Chame no Telegram". O default é "Oi" e, com essa propriedade, pode ser alterada para ambos os serviços

Default: Oi
afterLoad function

Note:

Evento callback que é executado ao término do carregamento do Huggy Chat

Default:

beforeLoad function

Note:

Evento callback que é executado antes do carregamento do Huggy Chat

Default:

mainColor string

Note:

Define a cor principal do Huggy Chat

Default:

colors object[HuggyChatConfigColors]

Note:

Objeto contendo as definições de cores para o Huggy Chat

Default:

HuggyChatInit

Esse método herda todas as propriedades de { HuggyChatConfig }
PropertyTypeDescriptionDefault
contextIDstringID de contexto. Você pode encontrá-lo no script de inicialização presente no código de instalação do seu Huggy Chat, fornecido pela nossa plataforma durante a configuração do canal.
...HuggyChatConfigTodas as propriedades presentes em HuggyChatConfig são herdadas por HuggyChatInit.
<a href="#contextid">contextID</a> string

ID de contexto. Você pode encontrá-lo no script de inicialização presente no código de instalação do seu Huggy Chat, fornecido pela nossa plataforma durante a configuração do canal.

Default:

... HuggyChatConfig

Todas as propriedades presentes em HuggyChatConfig são herdadas por HuggyChatInit.

Default:

HuggyChatLogin

PropertyTypeDescription
userIdentifierstringDefine o identificador único do usuário. Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userHash.
userHashstringDefine o token de autenticação do usuário (no padrão JWT). Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userIdentifier.
userIdentifier string

Define o identificador único do usuário. Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userHash.
userHash string

Define o token de autenticação do usuário (no padrão JWT). Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userIdentifier.

HuggyChatLogout

ParameterTypeDescriptionDefault
reloadbooleanPermite recarregar o Huggy Chat após encerrar a sessão do usuário autenticado.trueopcional
fnBeforeInitfunctionMétodo callback disparado logo após encerrar a sessão do usuário autenticado.functionopcional
reload boolean

Permite recarregar o Huggy Chat após encerrar a sessão do usuário autenticado.

Default: true
fnBeforeInit function

Método callback disparado logo após encerrar a sessão do usuário autenticado.

Default: function

HuggyChatData

PropertyTypeDescriptionDefault
variablesarray[HuggyChatDataVariable]Array de variáveis
userIdentifierstringDefine o identificador único do usuário. Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userHash.
userHashstringDefine o token de autenticação do usuário (no padrão JWT). Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userIdentifier.
variables array[HuggyChatDataVariable]

Array de variáveis

Default:

userIdentifier string

Define o identificador único do usuário. Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userHash.

Default:

userHash string

Define o token de autenticação do usuário (no padrão JWT). Essa propriedade é utilizada no processo de autenticação do Huggy Chat e deve estar sempre acompanhada da propriedade userIdentifier.

Default:

HuggyChatDataVariable

PropertyTypeDescription
keystringChave da variável. No flow é a chamada dela. Ex: {{ chave }}
valuestring|integerValor da variável
key string

Chave da variável. No flow é a chamada dela. Ex: {{ chave }}
value string|integer

Valor da variável

HuggyChatTopicsSubscribe

TopicsReturnDescription
channel-open:whatsappEvento disparado quando o canal do WhatsApp é aberto
channel-close:widgetEvento disparado quando o canal do Huggy Chat é fechado
box-opened:chatEvento disparado quando o canal do Huggy Chat é aberto
box-opened:emailEvento disparado quando o formulário do email é aberto
box-opened:phoneEvento disparado quando o formulário do telefone é aberto
box-openedEvento disparado quando a caixa do chat é aberta
box-closedEvento disparado quando a caixa do chat é fechada
chat:messageEvento disparado quando uma mensagem é enviada no chat
chat:createdobjectEvento disparado quando um chat é criado, ou seja, na primeira mensagem enviada
channel-open:whatsapp

Evento disparado quando o canal do WhatsApp é aberto
channel-close:widget

Evento disparado quando o canal do Huggy Chat é fechado
box-opened:chat

Evento disparado quando o canal do Huggy Chat é aberto
box-opened:email

Evento disparado quando o formulário do email é aberto
box-opened:phone

Evento disparado quando o formulário do telefone é aberto
box-opened

Evento disparado quando a caixa do chat é aberta
box-closed

Evento disparado quando a caixa do chat é fechada
chat:message

Evento disparado quando uma mensagem é enviada no chat
chat:created object

Evento disparado quando um chat é criado, ou seja, na primeira mensagem enviada

HuggyChatConfigColors

PropertyTypeDescription
textTitlestringDefine a cor do título do Huggy Chat
textReceivedMessagestringDefine a cor do texto das mensagens recebidas pelo Huggy Chat
textSendMessagestringDefine a cor do texto das mensagens enviadas pelo Huggy Chat
textTitle string

Define a cor do título do Huggy Chat
textReceivedMessage string

Define a cor do texto das mensagens recebidas pelo Huggy Chat
textSendMessage string

Define a cor do texto das mensagens enviadas pelo Huggy Chat

← Exemplos práticos →