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:

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

# apt update; apt upgrade -y

Instale os pacotes necessários para o projeto

# apt install -y nodejs npm git nginx postgresql postgresql-contrib

Instala globalmente os pacotes pm2 e pnpm usando npm

# npm install -g pm2 pnpm

Configuração do PostgreSQL

Alterne para o usuário postgres

# su - postgres

Crie um novo usuário chamado ‘typebot’ em seguida inserira uma senha.

$ createuser --pwprompt typebot

Crie um novo banco de dados ‘typebot’ e define ‘typebot’ como o proprietário

$ createdb -O typebot typebot

Sai do usuário postgres

$ exit

Preparando formas de autenticação

Vou deixar 3 formas que são as mais fáceis, você pode optar em usar apenas uma.

Email

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.

Google

Crie um novo projeto em https://console.developers.google.com/apis/credentials

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:

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Github

Acesse https://github.com/settings/developers e clique em New OAuth Apps

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

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Configuração do Projeto Typebot no Servidor

Vamos armazenar o projeto mo diretório /opt.

# 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.

# vim /opt/typebot.io/.env

Faça os ajustes:

# 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

# cd /opt/typebot.io/
# pnpm install

Saída:

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

# cd /opt/typebot.io/
# pnpm run build:apps

Saída

> 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

# 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

# cd /opt/typebot.io/
# pnpm prisma generate && pnpm db:migrate

Saída:

Environment variables loaded from .env
prisma:warn We could not find your Prisma schema at `prisma/schema.prisma`.
If you have a Prisma schema file in a custom path, you will need to run
`prisma generate --schema=./path/to/your/schema.prisma` to generate Prisma Client.
If you do not have a Prisma schema file yet, you can ignore this message.


> typebot-os@2.17.2 db:migrate /opt/typebot.io
> cd packages/prisma && pnpm run db:migrate


> @typebot.io/prisma@0.1.0 db:migrate /opt/typebot.io/packages/prisma
> pnpm migrate:deploy


> @typebot.io/prisma@0.1.0 migrate:deploy /opt/typebot.io/packages/prisma
> dotenv -e ./.env -e ../../.env -- tsx scripts/migrate-deploy.ts

Executing for PostgreSQL schema
┌─────────────────────────────────────────────────────────┐
│  Update available 5.0.0 -> 5.3.1                        │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘

Inicia os aplicativos com o PM2

# pm2 start --name=typebotwww --cwd /opt/typebot.io/apps/builder/ "pnpm -- next start -p 54001"
# pm2 start --name=typebotapi --cwd /opt/typebot.io/apps/viewer/ "pnpm -- next start -p 54002"

┌────┬───────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name          │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼───────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 1  │ typebotapi    │ default     │ N/A     │ fork    │ 819      │ 0s     │ 0    │ online    │ 0%       │ 10.8mb   │ root     │ disabled │
│ 0  │ typebotwww    │ default     │ N/A     │ fork    │ 760      │ 19s    │ 0    │ online    │ 0%       │ 97.2mb   │ root     │ disabled │
└────┴───────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

Salva a configuração atual do PM2 e configura para iniciar com o sistema

# pm2 save
# pm2 startup

Configuração do Nginx

Cria os arquivos de configuração do Nginx para os subdomínios

# vim /etc/nginx/sites-available/typebot.remontti.cum.br.conf

server {
    listen 80;
    listen [::]:80;
 
    server_name typebot.remontti.cum.br;

    location / {
        proxy_pass http://localhost:54001;
        proxy_set_header Host $host;
    }
}

# vim /etc/nginx/sites-available/typebotapi.remontti.cum.br.conf

server {
    listen 80;
    listen [::]:80;
 
    server_name typebotapi.remontti.cum.br;
 
    location / {
        proxy_pass http://localhost:54002;
        proxy_set_header Host $host;
    }
}

Ativa os sites no Nginx

# ln -s /etc/nginx/sites-available/typebot.remontti.cum.br.conf /etc/nginx/sites-enabled/
# ln -s /etc/nginx/sites-available/typebotapi.remontti.cum.br.conf /etc/nginx/sites-enabled/
# rm /etc/nginx/sites-enabled/default

Verifica a sintaxe e reinicia o Nginx

# nginx -t
# systemctl restart nginx

Configuração do Certbot/Let’s Encrypt para HTTPS

Instala o Certbot e o plugin do Nginx

# apt install certbot python3-certbot-nginx

Executa o Certbot para obter os certificados SSL

certbot

Responda:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel): noc@remontti.cum.br

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.3-September-21-2022.pdf. You must
agree in order to register with the ACME server. Do you agree?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y <<<<<

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: N <<<<
Account registered.

Which names would you like to activate HTTPS for?
We recommend selecting either all domains, or all domains in a VirtualHost/server block.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: typebotapi.remontti.cum.br
2: typebot.remontti.cum.br
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):  <<<<
Requesting a certificate for typebotapi.remontti.cum.br and typebot.remontti.cum.br

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/typebotapi.remontti.cum.br/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/typebotapi.remontti.cum.br/privkey.pem
This certificate expires on 2023-12-20.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for typebotapi.remontti.cum.br to /etc/nginx/sites-enabled/typebotapi.remontti.cum.br.conf
Successfully deployed certificate for typebot.remontti.cum.br to /etc/nginx/sites-enabled/typebot.remontti.cum.br.conf
Congratulations! You have successfully enabled HTTPS on https://typebotapi.remontti.cum.br and https://typebot.remontti.cum.br

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 * Donating to EFF:                    https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Configuração do Cron para Renovação Automática do Certificado SSL.

Adicione uma tarefa cron para renovar automaticamente o certificado SSL todo dia 1 de cada mês à meia-noite, e reinicie o cron.

# echo '00 00   1 * *   root    /usr/bin/certbot renew -q' >> /etc/crontab
# systemctl restart cron.service

Acessando a aplicação

Abra seu navegador e acesse: https://typebot.remontti.cum.br

Clique em Registre-se gratuitamente
Escolha a forma desejada.

Os registros ficam aberto, então registre toda sua equipe e em seguida desativa a possibilidade de novos registros nos arquivos .env (DISABLE_SIGNUP=true)
Com o comando sed

# sed -i 's/DISABLE_SIGNUP=false/DISABLE_SIGNUP=true/' /opt/typebot.io/.env
# sed -i 's/DISABLE_SIGNUP=false/DISABLE_SIGNUP=true/' /opt/typebot.io/apps/viewer/.env
# sed -i 's/DISABLE_SIGNUP=false/DISABLE_SIGNUP=true/' /opt/typebot.io/apps/builder/.env

Reinicie o pm2

# systemctl restart pm2-root.service

Se deseja realizar novos cadastros basta alterar DISABLE_SIGNUP=true para DISABLE_SIGNUP=false e reiniciar novamente.

# sed -i 's/DISABLE_SIGNUP=true/DISABLE_SIGNUP=false/' /opt/typebot.io/.env
# sed -i 's/DISABLE_SIGNUP=true/DISABLE_SIGNUP=false/' /opt/typebot.io/apps/viewer/.env
# sed -i 's/DISABLE_SIGNUP=true/DISABLE_SIGNUP=false/' /opt/typebot.io/apps/builder/.env

Reinicie o pm2

# systemctl restart pm2-root.service

Se desejar fazer alterações faça os arquivos:

/opt/typebot.io/.env
/opt/typebot.io/apps/viewer/.env
/opt/typebot.io/apps/builder/.env

A parte mais complicada está feita!
Existe vários videos no YouTube sobre como mexer nessa criança. Inclusive no canal oficial dos desenvolvedores. Dica ative a legenda e selecione traduzir!

Gostou e quer me ajudar manter o blog sem a inconveniência de anúncios intrusivos ou a imposição de taxas?

Se quiser fazer uma doação para o café ficarei muito feliz pelo seu reconhecimento!

Se não puder doar pode deixar seu agradecimento nos comentário também ficarei feliz em saber que ajudei. Se tiver qualquer pergunta deixe-a também. Se preferir entrar em Contato clique aqui.

Abraço!

Fonte:
https://docs.typebot.io/

O post Guia Passo a Passo para Instalar o Typebot em seu servidor próprio apareceu primeiro em Remontti.