Sobre • Utilização do widget • Instalação Local • Tecnologias Utilizadas
Criar um widget para embedar em uma página externa.
Esse widget deve conter:
- Botão para iniciar
- Tela de boas vindas, que solicita o nome do usuário e após o preenchimento deve seguir para a tela de chat
- Tela de chat, deve funcionar da seguinte forma:
- Se o usuário não enviar mensagens dentro de 1 minuto o chat deve responder automaticamente "[nome do cliente], você enviou [quantidade de mensagens enviadas] mensagens"
- Se o usuário ficar inativo por 3 minutos ou mais, o chat deve encerrar a sessão automaticamente e deve exibir um botão para retornar ao botão inicial.
Não foi especificado um design para a interface, então me baseei de forma simples no layout e cores do site da Digitalk.
Se desejar utilizar o widget, basta utilizar a tag iframe, com o link mostrado abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe
src="https://chat-digitalk.vercel.app/"
style="border: none;
position: absolute;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
"
></iframe>
</body>
</html>Ou você pode acessar uma demo já hospedada online aqui
# Clone o rep
$ git clone https://github.com/Vitor-Tx/teste-digitalk.git
# Entre na pasta raiz
$ cd teste-digitalk
# Instale as dependências
$ npm i
# Rode o projeto(acesse http://localhost:5173/).
$ npm run dev- TypeScript
- React ⚛
- Vite
- Styled Components 💅
- ESLint
- etc
Feito por Vitor Teixeira. Entre em contato!