Personalizando o cabeçalho e os cartões do corpo do widget

Os cartões facilitam a personalização do conteúdo do widget para o seu público e para o seu negócio. Adicione um vídeo, um formulário ou até mesmo uma barra de pesquisa da Base de Conhecimento. Com o conteúdo certo, o widget do tawk.to atrairá mais visitantes e facilitará para que eles encontrem a ajuda de que precisam.

OBSERVAÇÃO: As instruções abaixo só podem ser executadas a partir de um navegador ou dos aplicativos de desktop do tawk.to. Não é possível realizá-las no aplicativo móvel do tawk.to.

Para alterar o conteúdo exibido no seu widget, selecione o ícone ⚙️ Administração (engrenagem) no menu de abas superior. Em seguida, na seção Canais (Channels), selecione Widget de Chat (Chat Widget).

O widget de chat exibido no lado direito da tela mostra como o widget aparecerá para os visitantes caso você salve as alterações feitas durante a edição do conteúdo.

Observação:

Seu widget de chat é atualizado automaticamente após o salvamento. Não é necessário atualizar o código do widget no HTML da sua página.

Neste artigo, vamos explicar todas as opções de cartões disponíveis e como você pode adicioná-las ao widget do seu site.

Você pode aprender mais sobre como personalizar seu widget e adicionar/editar cartões aqui: Como modificar o conteúdo do seu widget

Adding and editing the widget cards

Para adicionar um novo cartão, clique no botão + Cartão (+ Card) à direita da seção Cartões do Cabeçalho (Header Cards) do construtor de conteúdo.

Para mover um cartão, clique na alça com pontilhado no lado esquerdo do cartão e arraste-o até a nova posição.

Para editar ou excluir um cartão, clique no ícone de lápis.

A visualização no lado direito da tela mostra como o widget aparecerá para os visitantes caso você salve as alterações feitas durante a edição.

Depois de concluir a edição do conteúdo, clique no botão verde Atualizar (Update). Para excluir um cartão, clique no botão vermelho Excluir (Delete).

Para ativar ou desativar um cartão, alterne o botão deslizante para a posição ligada ou desligada.

A tabela abaixo mostra quais cartões podem ser adicionados ao cabeçalho do widget e quais podem ser adicionados ao corpo do widget.

O cartão de Pesquisa na Base de Conhecimento pode ser usado no cabeçalho ou no corpo (mas não nos dois ao mesmo tempo).

O cartão Agente permite personalizar o cabeçalho do widget com até cinco perfis de agente.

Ao adicionar um agente, a foto de perfil ou avatar da conta dele será exibido no widget. A imagem do agente continuará visível mesmo quando ele estiver offline.

Você só pode adicionar agentes associados à sua conta (não é possível adicionar uma imagem alternativa ao cartão Agente).

O cartão Chat permite conversas em tempo real dentro do seu widget. Você pode posicionar o chat no topo ou na parte inferior do corpo do widget, arrastando e soltando o cartão.

Ao posicionar o cartão Chat no topo do corpo do widget, um botão será exibido para iniciar a conversa. Você pode editar o texto desse botão no próprio cartão para personalizar sua Chamada para Ação (Call to Action).

Depois, clique no botão verde Atualizar (Update) para salvar suas alterações.

Ao posicionar o cartão Chat na parte inferior do widget, os visitantes verão um campo aberto com um texto indicando onde começar a conversa. Você pode alterar essa mensagem padrão na opção de Texto Padrão (Placeholder).

Lembre-se de clicar no botão verde Atualizar (Update) para salvar suas alterações.

O cartão Artigo em Destaque da Base de Conhecimento (KB Featured Article) permite destacar um artigo da Base de Conhecimento no widget.

Primeiro, selecione a Base de Conhecimento onde o artigo está publicado. Depois, encontre o artigo no menu suspenso ou usando o campo de pesquisa.

Para abrir o artigo em um novo navegador, ative a opção "Abrir artigo no site da Base de Conhecimento" (Open article in KB site).

Por fim, clique no botão verde Atualizar (Update) e pronto!

Para adicionar uma frase de destaque ou título ao seu widget, selecione o cartão Cabeçalho (Header) no menu suspenso e digite seu texto.

Para adicionar itálico ou um link, selecione o trecho de texto que deseja formatar. É possível alinhar o texto à esquerda, ao centro ou à direita.

Para alterar a cor do texto do seu cabeçalho, volte ao menu do Widget de Chat e clique em Avançado (Advanced) no campo Cores do Widget (Widget Color), localizado na seção Aparência do Widget (Widget Appearance).

Você pode adicionar uma imagem ao seu widget fazendo o upload a partir do seu computador ou inserindo um link (URL) em um cartão de imagem (Image Card).

Você pode alinhar a imagem à esquerda, ao centro ou à direita.

O campo de texto Link URL permite associar um link à imagem. Se você não quiser redirecionar os visitantes, deixe esse campo em branco. Ative o botão deslizante (ficará verde) para abrir o link em uma nova aba do navegador. Se essa opção estiver desativada, o link será aberto diretamente na tela do widget.

O cartão Lista de Artigos da Base de Conhecimento (KB Article List) permite exibir até cinco artigos ou categorias dentro do widget. Selecione um artigo ou categoria da Base de Conhecimento na lista suspensa. Você também pode usar o campo de busca para localizar o artigo desejado.

Se quiser que os artigos sejam abertos diretamente na Base de Conhecimento quando o visitante clicar, ative a opção "Abrir artigo no site da Base de Conhecimento" (Open article in KB site).

O cartão Pesquisa na Base de Conhecimento (KB Search) permite que seus visitantes pesquisem diretamente na sua Base de Conhecimento a partir do widget de chat.

Selecione qual Base de Conhecimento você quer que seus visitantes consultem. Se desejar que os artigos sejam abertos diretamente na Base de Conhecimento, ative a opção "Abrir artigo no site da Base de Conhecimento" (Open article in KB site).

Observação: o cartão de Pesquisa na Base de Conhecimento pode ser usado no cabeçalho OU no corpo do widget, mas não nos dois ao mesmo tempo.

Ao adicionar um cartão Logotipo (Logo) ao cabeçalho do seu widget, a Imagem da Propriedade (Property Image) do seu painel Visão Geral será adicionada automaticamente ao widget.

Usando os ícones, você pode alinhar a imagem à esquerda, à direita ou ao centro.

Para atualizar ou adicionar uma imagem de propriedade, volte à seção Administração (Administration) do painel.

Em seguida, clique no menu suspenso ao lado da imagem da propriedade e faça o upload do seu logotipo ou imagem.

Recomendamos uma imagem com tamanho mínimo de 512 x 512 pixels para a imagem da propriedade.

O cartão Conversas Anteriores (Previous Conversations) oferece aos visitantes uma visão das três últimas conversas e mostra quando elas ocorreram. Os visitantes também terão a opção de “Ver todas as conversas” (See all conversations).

O cartão Área de Texto (Text Area) permite adicionar uma mensagem de boas-vindas personalizada ao widget.

Para editar o texto, passe o cursor sobre o cartão e clique no ícone de lápis.

Digite ou cole seu texto (e emojis) diretamente no campo de conteúdo. Selecione qualquer parte do texto para abrir opções de formatação. É possível aplicar negrito, itálico ou inserir um hyperlink. Em seguida, escolha o alinhamento do texto: à esquerda, ao centro ou à direita.

O cartão Vídeo do tawk.to permite adicionar vídeos do YouTube, Vimeo, Daily Motion e Loom ao seu widget. Também é possível vincular um vídeo hospedado por você mesmo.

Ao adicionar um cartão de vídeo, selecione a plataforma de origem e insira o link do vídeo.

Você pode controlar as configurações de exibição do vídeo diretamente no cartão. As opções de exibição e reprodução variam de acordo com a plataforma de hospedagem do vídeo.

Abaixo está uma tabela com as opções de configuração disponíveis para cada plataforma:

Os cartões colocam conteúdo relevante e interativo à frente do seu público sempre que ele visita seu site. Todos os cartões estão incluídos gratuitamente na sua conta tawk.to.

Precisa de ajuda? Fale com nossa equipe de suporte ou agende uma ligação.

Se você tiver sugestões sobre este artigo ou precisar de mais ajuda:

• Clique no ícone verde de chat ao vivo
• Agende uma chamada conosco
• Visite nossa comunidade