Guia Passo a Passo para Instalar o Typebot em seu servidor próprio
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:
|
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 |
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
|
1 2 |
# 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" |
|
1 2 3 4 5 6 |
┌────┬───────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ 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
|
1 2 |
# pm2 save # pm2 startup |
Configuração do Nginx
Cria os arquivos de configuração do Nginx para os subdomínios
|
1 |
# vim /etc/nginx/sites-available/typebot.remontti.cum.br.conf |
|
1 2 3 4 5 6 7 8 9 10 11 |
server { listen 80; listen [::]:80; server_name typebot.remontti.cum.br; location / { proxy_pass http://localhost:54001; proxy_set_header Host $host; } } |
|
1 |
# vim /etc/nginx/sites-available/typebotapi.remontti.cum.br.conf |
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 |
# 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
|
1 2 |
# nginx -t # systemctl restart nginx |
Configuração do Certbot/Let’s Encrypt para HTTPS
Instala o Certbot e o plugin do Nginx
|
1 |
# apt install certbot python3-certbot-nginx |
Executa o Certbot para obter os certificados SSL
|
1 |
certbot |
Responda:
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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.
|
1 2 |
# 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
|
1 2 3 |
# 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
|
1 |
# systemctl restart pm2-root.service |
Se deseja realizar novos cadastros basta alterar DISABLE_SIGNUP=true para DISABLE_SIGNUP=false e reiniciar novamente.
|
1 2 3 |
# 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
|
1 |
# systemctl restart pm2-root.service |
Se desejar fazer alterações faça os arquivos:
|
1 2 3 |
/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/
Boa noite! Segue o passo a passo e deu tudo certo estou apenas com um problema para fazer o login. Não consegue fazer login nem pelo Github nem pelo Google, sempre retorna erro. Sabem o que pode ser?
certamente a senha que você colocou no postegres esta com algum caracter. aconteceu comigo.
volta, de um “dropdb typebot” depois “dropuser typebot” e faça novamente
HELP ME PLEASE AFTER execute
pnpm prisma generate && pnpm db:migrate
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.prismato generate Prisma Clien t.If you do not have a Prisma schema file yet, you can ignore this message.
> typebot-os@2.20.0 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
(node:3288) ExperimentalWarning:
--experimental-loadermay be removed in the future; instead useregister():–import ‘data:text/javascript,import { register } from “node:module”; import { pathToFileURL } from “node:url”; register(“file%3A///opt/typebot.io/node_modules/.pnpm/tsx%403.12.7/node_modules/tsx/dist/loader.js”, pathToFileURL(“./”));’
(Use
node --trace-warnings ...to show where the warning was created)(node:3288) ExperimentalWarning:
globalPreloadis planned for removal in favor ofinitialize.globalPreloadis an experimental feature and might change at any time(Use
node --trace-warnings ...to show where the warning was created)Executing for PostgreSQL schema
Command failed: prisma migrate deploy –schema postgresql/schema.prisma
Error: P3009
migrate found failed migrations in the target database, new migrations will not be applied. Read more about how to resolve migration issues in a production database: https://pris.ly/d/migrate-resolve
The
20231211122755_add_banned_ip_tablemigration started at 2023-12-18 20:18:16.407601 UTC failedpnpm prisma generate && pnpm db:migrate
Problema base de datos me puede ayudar por favor
Script furado. Da erro na hora de migração do banco. Enviei mensagem do erro e excluíram ao invés de responde-la.
Dá erro na hora de migração do banco. Script furado! Postei mensagem sobre o erro e excluíram ao invés de responder.
Funcionando perfeitamente, poderia trazer um conteudo de como configurar com mínio?
Estou com o seguinte erro ao executar “pnpm prisma generate && pnpm db:migrate”, alguma pista?
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.prismato generate Prisma Client.If you do not have a Prisma schema file yet, you can ignore this message.
> typebot-os@2.19.1 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
Command failed: prisma migrate deploy –schema postgresql/schema.prisma
Error: P3009
migrate found failed migrations in the target database, new migrations will not be applied. Read more about how to resolve migration issues in a production database: https://pris.ly/d/migrate-resolve
The
20220603074700_add_tokensmigration started at 2023-11-27 20:58:12.630154 UTC failedInstalando V2.18.4, mas tive problemas, na hora de logar a primeira vez da á seguinte mensagem:
Não autorizado
As inscrições estão desativadas.
Porém DISABLE_SIGNUP está como true
DISABLE_SIGNUP=true
Boa noite a todos, excelente conteúdo, funcionando quase 100% ná hora de upar imagens não vai de jeito nenhum e nem apresenta erros.
Alguém já se deparou com isso?
não faz upload das imagens porque não foi configurado o servidor de imagem
O mestre dos mestres!
Como sempre passo a passo sensacional, obrigado Rudimar!!!!