O Typebot é uma ferramenta de código aberto que permite criar aplicativos ou formulários conversacionais de forma simples e eficaz. Ele oferece uma alternativa robusta a outras plataformas como o Landbot. Com o Typebot, você pode criar diferentes tipos de aplicativos conversacionais, como:
– Qualificação de leads
– Lançamento de produtos
– Integração de usuários
– Suporte ao cliente
O Typebot é amado por equipes e criadores em todo o mundo e oferece uma experiência de construção fácil. Você pode arrastar e soltar blocos para criar seu aplicativo e integrá-lo facilmente em qualquer plataforma. Além disso, ele permite coletar resultados em tempo real, o que é uma grande vantagem.
Exemplos de Uso
– Coleta de Informações de Contato: Substitua seus formulários tradicionais por um chatbot que pode coletar nomes, e-mails e outros detalhes de forma interativa.
– Suporte ao Cliente: Use o Typebot para responder automaticamente a perguntas frequentes e fornecer suporte em tempo real.
– Integração de Usuários: Facilite o processo de integração, fornecendo aos novos usuários um guia passo a passo interativo.
– Campanhas de Marketing: Utilize o Typebot em suas landing pages para aumentar as taxas de conversão e engajamento.
– Pesquisas e Feedback: Colete feedback do usuário ou conduza pesquisas de forma mais envolvente e interativa.
Requesitos
Debian 12 bookworm (Instalação Limpa)
DNS
Crie duas entradas em seu DNS exemplo:
– typebot.remontti.cum.br apontando para os IPs do servidor
– typebotapi.remontti.cum.br apontando para os IPs do servidor
Se você já é da turma do blog vai entender o que temos a baixo la no amigo bind9:
|
1
2
3
4
5
|
typebot A 192.168.0.100
AAAA 2001:db8:bebe:cafe::100
typebotapi A 192.168.0.100
AAAA 2001:db8:bebe:cafe::100
|
Atualização e Instalação de Pacotes
|
1
|
# apt update; apt upgrade -y
|
Instale os pacotes necessários para o projeto
|
1
|
# apt install -y nodejs npm git nginx postgresql postgresql-contrib
|
Instala globalmente os pacotes pm2 e pnpm usando npm
|
1
|
# npm install -g pm2 pnpm
|
Configuração do PostgreSQL
Alterne para o usuário postgres
|
1
|
# su - postgres
|
Crie um novo usuário chamado ‘typebot’ em seguida inserira uma senha.
|
1
|
$ createuser --pwprompt typebot
|
Crie um novo banco de dados ‘typebot’ e define ‘typebot’ como o proprietário
|
1
|
$ createdb -O typebot typebot
|
Sai do usuário postgres
|
1
|
$ exit
|
Preparando formas de autenticação
Vou deixar 3 formas que são as mais fáceis, você pode optar em usar apenas uma.
A mais fácil de todas, basta você utilizar um email, assim toda vez que você for logar ele ira lhe mandar um e-mail com o link.
Crie um novo projeto em https://console.developers.google.com/apis/credentials
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
Cria um novo projeto
> OAuth consent screen
> externo
Nome: Typebot
User support email: seu!
Developer contact information: seu!
SAVE
ADD OR REMOVE SCOPES
.../auth/userinfo.email
.../auth/userinfo.profile
SAVE
SAVE
BACK TO DASH
> Credentials
+ CREATE CREDENTALS
> Create OAuth client ID
Application type: Web application
Name: Typebot
Authorized redirect URIs
https://typebot.remontti.cum.br/api/auth/callback/google
Client ID
Anote
Client secret
Anote
|
Será usado em:
|
1
2
|
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
|
Github
Acesse https://github.com/settings/developers e clique em New OAuth Apps
|
1
2
3
4
|
Application name: Typebot
Homepage URL: https://typebot.remontti.cum.br
Application description: Typebot Auth
Authorization callback URL: https://typebot.remontti.cum.br/api/auth/callback/github
|
Anote o Client ID e clique em Generate a new client secret anote os dois para ser usado em
|
1
2
|
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
|
Configuração do Projeto Typebot no Servidor
Vamos armazenar o projeto mo diretório /opt.
|
1
2
|
# cd /opt/
# git clone https://github.com/baptisteArno/typebot.io.git
|
Entre no diretório do projeto
cd typebot.io
Crie arquivo .env onde irá ficar as variáveis de ambiente.
|
1
|
# vim /opt/typebot.io/.env
|
Faça os ajustes:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
# Define a chave de criptografia (Gere aqui https://senhasegura.remontti.cum.br/)
ENCRYPTION_SECRET=i9eRecwVJQeKENqdcrQeizOXFHzQdwAp
# Define a URL de conexão com o banco de dados PostgreSQL
DATABASE_URL=postgresql://typebot:minhasupersenha@localhost:5432/typebot
# Define as URLs para autenticação e API
NEXTAUTH_URL=https://typebot.remontti.cum.br
NEXT_PUBLIC_VIEWER_URL=https://typebotapi.remontti.cum.br
# Define o e-mail do administrador
ADMIN_EMAIL=typebot@remontti.cum.br
# Define as configurações para o servidor SMTP
SMTP_USERNAME=typebot@remontti.cum.br
SMTP_PASSWORD=minhasenha
SMTP_HOST=mail.remontti.cum.br
SMTP_PORT=25
NEXT_PUBLIC_SMTP_FROM=typebot@remontti.cum.br
SMTP_SECURE=false
SMTP_AUTH_DISABLED=false
# Configurações para autenticação via Google e GitHub (opcional)
# Google
GOOGLE_CLIENT_ID=98916e5d5dd1-e3lfmixxuditlz2egexp0n8bfwf3oie3.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
# GitHub
GITHUB_CLIENT_ID=6ewyvfeumndg2ve5kve1
GITHUB_CLIENT_SECRET=7r78f2vpmihgriebkp7p4b0ervd4qc7ufu1uu5nx
# Permite ou desabilita o cadastro de novas contas
DISABLE_SIGNUP=false
|
Instale todas as dependências do projeto
|
1
2
|
# cd /opt/typebot.io/
# pnpm install
|
Saída:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Scope: all 19 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +2398
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/next/13.4.3: 12,32 MB/12,32 MB, done
[...]
[...]
[...]
devDependencies:
+ cross-env 7.0.3
+ cz-emoji 1.3.2-canary.2
+ husky 8.0.3
+ prettier 2.8.8
+ turbo 1.10.12
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 288ms
Done in 2m 12.5s
|
Compile os aplicativos
|
1
2
|
# cd /opt/typebot.io/
# pnpm run build:apps
|
Saída
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
> typebot-os@2.17.2 build:apps /root/typebot.io
> turbo run build --filter=builder... --filter=viewer...
[...]
[...]
[...]
[...]
builder:build: ○ (Static) automatically rendered as static HTML (uses no initial props)
builder:build:
Tasks: 9 successful, 9 total
Cached: 0 cached, 9 total
Time: 5m28.928s
⠋ ...writing to cache... [1s]
─────────┴──────────┴──────────┘
|
Copie o arquivo .env para os diretórios dos aplicativos
|
1
2
|
# cp /opt/typebot.io/.env /opt/typebot.io/apps/builder/
# cp /opt/typebot.io/.env /opt/typebot.io/apps/viewer/
|
Configuração e migrações do banco de dados
|
1
2
|
# cd /opt/typebot.io/
# pnpm prisma generate && pnpm db:migrate
|
Saída:
Artigos relacionados
-
Configurando GITLAB no servidor Ubuntu 18.04
# sudo apt update# sudo apt install ca-certificates curl openssh-server postfix# cd /tmp# curl -LO h... -
Instalar o N8N
INSTALAÇÃO N8N Vídeo de referência: https://www.youtube.com/watch?v=yJ1djbHCQGU ... -
Como configurar o Nginx para Apache no Ubuntu
Etapa 1 – Instalar e configurar o Apache Primeiro, você precisará instalar o servido... -
Como configurar o retransmissão SMTP Postfix no Ubuntu com o Sendinblue
Como configurar o retransmissão SMTP Postfix no Ubuntu com o Sendinblue Atualizado: 12 de maio ...