Como testar seu webchat localmente

Teste o Webchat da Hablla antes de publicar: monte um arquivo HTML no VS Code, insira o script de integração e visualize o widget com a extensão Live Server.

Antes de publicar o Webchat no site em produção, é possível testá-lo localmente para visualizar e conferir o seu comportamento. Para isso, preparamos este pequeno guia prático.

Esta seção é destinada a pessoas com conhecimento técnico mais avançado. O teste local envolve edição de arquivos HTML e uso de ferramentas de desenvolvimento.

Ferramentas recomendadas para testar localmente

Caso você não tenha familiaridade com esse tipo de ferramenta, considere encaminhar este guia para algum responsável técnico que possa realizar os testes junto com você.

As duas ferramentas precisam estar instaladas na mesma máquina em que o teste será feito.

Visual Studio Code (VS Code)

É necessário instalar o programa na máquina, caso não tenha.

Extensão Live Server

É necessário instalar a extensão dentro do seu VS Code

1

1. Crie uma pasta no VS Code

O projeto precisa estar dentro de uma pasta para funcionar corretamente.

2

2. Crie um arquivo HTML

Você pode criar um arquivo qualquer para fins de teste. O único requisito é que ele tenha a extensão .html

3

3. Gere a estrutura HTML no arquivo criado

No VS Code, você pode usar um atalho para gerar a estrutura HTML rapidamente:

• Passo 1: dentro do arquivo, digite !.

• Passo 2: o editor exibirá opções de estrutura HTML prontas. Basta selecionar uma delas apertando Enter ou clicando sobre a opção exibida.

4

4. Insira o Script de Integração do Webchat

Agora que você já tem a estrutura do arquivo pronta, cole o Script de Integração do Webchat que você copiou nas configurações adicionais da sua conexão. Esse código deve ser inserido após a tag <body> da estrutura criada.

Não sabe onde encontrar esse código? Acesse a seção Script de Integração.

5

5. Abra o arquivo com a extensão do Live Server

Agora que você já finalizou as configurações, basta Salvar as alterações e abrir o seu arquivo utilizando a extensão do Live Server no VS Code. Para isso, use o atalho Ctrl``+``S para salvar e depois clique com o botão direito sobre o arquivo e selecione a opção "Open with Live Server".