{
  "id": "admin-meta",
  "titulo": "API Oficial da Meta (Admin)",
  "tela": "/admin/meta",
  "resumo": "Onde quem instalou o sistema cadastra a chave secreta do aplicativo da Meta e recebe o token que liga o WhatsApp oficial a este servidor, para todas as empresas.",
  "licoes": [
    {
      "id": "conhecendo-a-tela",
      "titulo": "Conhecendo a tela da Meta",
      "objetivo": "Achar a tela \"API Oficial (Meta)\" do Admin e reconhecer os dois quadros: a chave secreta e o token de verificação.",
      "papel": "admin",
      "busca": [
        "whatsapp oficial da meta",
        "api oficial do whatsapp",
        "configurar app da meta",
        "chave secreta do aplicativo meta",
        "token de verificação do webhook",
        "whatsapp business api"
      ],
      "passos": [
        {
          "id": "p1",
          "titulo": "Onde fica a tela",
          "texto": "No Admin, o item \"API Oficial (Meta)\" do menu abre esta tela. Ela guarda duas coisas: a chave secreta do aplicativo que você criou na Meta, que o sistema usa para conferir se cada mensagem recebida pelo número oficial veio mesmo da Meta, e um token de verificação, que a Meta usa para confirmar o endereço do seu servidor. As duas valem para a instalação inteira: cada empresa conecta o próprio número depois, em \"Conexões\".",
          "dica": "Só quem é administrador da plataforma abre esta tela. Ela fica aqui, e não nas configurações de uma empresa, porque trocar estes dados mexe na chegada de mensagens de todas as empresas do servidor. A faixa amarela \"Sem SMTP configurado\", no alto, é um aviso geral do Admin: o envio de e-mails ainda não está configurado. O item \"E-mail\" do menu leva ao ajuste.",
          "rota": "/admin/meta",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "role": "link",
                "nome": "API Oficial (Meta)",
                "exato": true
              },
              "rotulo": "API Oficial (Meta) no menu",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "role": "heading",
                "nome": "API Oficial da Meta desta instalação",
                "exato": true
              },
              "rotulo": "Vale para o servidor inteiro",
              "tipo": "caixa"
            }
          ]
        },
        {
          "id": "p2",
          "titulo": "O quadro da chave secreta",
          "texto": "O primeiro quadro é a \"Chave secreta do aplicativo\", que você copia do painel da Meta. Vazio, o campo mostra \"32 letras e números\", o tamanho da chave. O que você digita aparece como bolinhas, e a chave nunca volta a aparecer na tela depois de salva. Embaixo, \"Nunca configurado por aqui.\" quer dizer que ninguém salvou nada nesta tela ainda. O botão \"Salvar\" fica apagado até o campo ter pelo menos 16 caracteres.",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-app-secret"
              },
              "rotulo": "Chave secreta do aplicativo",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "texto": "Nunca configurado por aqui.",
                "exato": true
              },
              "rotulo": "Ainda não foi salva",
              "tipo": "numero"
            },
            {
              "alvo": {
                "testid": "meta-salvar"
              },
              "rotulo": "Apagado até ter a chave",
              "tipo": "seta"
            }
          ]
        },
        {
          "id": "p3",
          "titulo": "O quadro do token",
          "texto": "O segundo quadro é o \"Token de verificação\", um código que a Meta pede para confirmar o endereço do seu servidor. Você não inventa esse código: o sistema cria um sozinho na primeira vez que você salva a chave secreta. Por enquanto o quadro diz que ele \"Ainda não existe\".",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "css": "div:has(> div > [data-testid='meta-token-estado'])"
              },
              "rotulo": "Token de verificação",
              "tipo": "caixa"
            }
          ]
        }
      ]
    },
    {
      "id": "cadastrar-a-chave",
      "titulo": "Cadastrar a chave e copiar o token",
      "objetivo": "Salvar a chave secreta do aplicativo da Meta e copiar o token de verificação que o sistema cria na hora.",
      "papel": "admin",
      "busca": [
        "onde colocar a chave secreta da meta",
        "salvar app secret da meta",
        "gerar token de verificação do whatsapp",
        "copiar token do webhook da meta",
        "cadastrar aplicativo da meta"
      ],
      "passos": [
        {
          "id": "p1",
          "titulo": "Cole a chave secreta",
          "texto": "Cole no campo a chave secreta que você copiou do painel da Meta. Ela tem 32 letras e números e aparece como bolinhas. Assim que o campo tem pelo menos 16 caracteres, o botão \"Salvar\" acende.",
          "rota": "/admin/meta",
          "antes": [
            {
              "acao": "fill",
              "alvo": {
                "testid": "meta-app-secret"
              },
              "valor": "7c4e9a12b83f0d56e1a29c7b4f08d3e5"
            }
          ],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-app-secret"
              },
              "rotulo": "Chave colada",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "testid": "meta-salvar"
              },
              "rotulo": "Agora ele acende",
              "tipo": "seta"
            }
          ],
          "clicar": {
            "testid": "meta-salvar"
          }
        },
        {
          "id": "p2",
          "titulo": "Copie o token na hora",
          "texto": "Ao clicar em \"Salvar\", a chave é guardada embaralhada no seu servidor e aparece por alguns segundos o aviso \"Chave secreta salva.\". Como é a primeira vez, o sistema já cria o token de verificação e mostra ele no quadro de baixo. O botão \"Copiar\" leva o token para a área de transferência, pronto para colar no painel da Meta.",
          "dica": "Por segurança, o token não aparece de novo depois que você sai desta página. Se perder, dá para gerar outro aqui mesmo, como mostra a próxima lição.",
          "antes": [
            {
              "acao": "click",
              "alvo": {
                "testid": "meta-salvar"
              }
            },
            {
              "acao": "aguardar",
              "alvo": {
                "testid": "meta-token-gerado"
              }
            },
            {
              "acao": "esperar",
              "ms": 800
            }
          ],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-token-gerado"
              },
              "rotulo": "Seu token de verificação",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "testid": "meta-copiar-token"
              },
              "rotulo": "Copiar",
              "tipo": "seta"
            },
            {
              "alvo": {
                "texto": "Por segurança, ele não aparece de novo",
                "exato": false
              },
              "rotulo": "Só aparece uma vez",
              "tipo": "caixa"
            }
          ]
        },
        {
          "id": "p3",
          "titulo": "A chave ficou guardada",
          "texto": "O quadro de cima mudou: o campo mostra \"(já cadastrada)\" e embaixo aparece a data da \"Última alteração\". Para trocar a chave depois, é só digitar uma nova e salvar. Deixar o campo em branco mantém a que já está guardada.",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-app-secret"
              },
              "rotulo": "Chave já cadastrada",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "texto": "Última alteração em",
                "exato": false
              },
              "rotulo": "Quando foi salva",
              "tipo": "caixa"
            }
          ]
        }
      ]
    },
    {
      "id": "gerar-novo-token",
      "titulo": "Gerar um novo token",
      "objetivo": "Criar outro token de verificação quando o anterior se perdeu, sabendo o que muda na Meta.",
      "papel": "admin",
      "busca": [
        "perdi o token de verificação da meta",
        "gerar outro token do webhook",
        "trocar token de verificação whatsapp",
        "token da meta não aparece mais"
      ],
      "passos": [
        {
          "id": "p1",
          "titulo": "O botão \"Gerar novo token\"",
          "texto": "Depois que a chave secreta está salva, o quadro do token mostra quando ele foi \"Gerado em\" e ganha o botão \"Gerar novo token\". O token em si só aparece logo depois de ser criado: quando você sai da página, ele some e fica só a data. Se você perdeu o token antes de colar no painel da Meta, o caminho é criar outro com esse botão.",
          "rota": "/admin/meta",
          "antes": [
            {
              "acao": "fill",
              "alvo": {
                "testid": "meta-app-secret"
              },
              "valor": "7c4e9a12b83f0d56e1a29c7b4f08d3e5"
            },
            {
              "acao": "click",
              "alvo": {
                "testid": "meta-salvar"
              }
            },
            {
              "acao": "aguardar",
              "alvo": {
                "testid": "meta-gerar-token"
              }
            },
            {
              "acao": "esperar",
              "ms": 4000
            }
          ],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-token-estado"
              },
              "rotulo": "Quando o token foi criado",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "testid": "meta-gerar-token"
              },
              "rotulo": "Gerar novo token",
              "tipo": "seta"
            }
          ],
          "clicar": {
            "testid": "meta-gerar-token"
          }
        },
        {
          "id": "p2",
          "titulo": "Leia o aviso antes de confirmar",
          "texto": "Antes de trocar, o sistema pergunta. O token atual deixa de valer na hora. As mensagens que já chegam continuam chegando, porque elas são conferidas pela chave secreta. O que muda é que, se você colou o token à mão no painel da Meta, precisa colar o novo lá também. Sem isso, a Meta não consegue confirmar o endereço do seu servidor de novo. \"Cancelar\" fecha sem mudar nada.",
          "antes": [
            {
              "acao": "click",
              "alvo": {
                "testid": "meta-gerar-token"
              }
            },
            {
              "acao": "aguardar",
              "alvo": {
                "role": "alertdialog"
              }
            }
          ],
          "destaques": [
            {
              "alvo": {
                "role": "alertdialog"
              },
              "rotulo": "O que muda ao trocar",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "testid": "meta-confirmar-novo-token"
              },
              "rotulo": "Confirmar a troca",
              "tipo": "seta"
            }
          ],
          "clicar": {
            "testid": "meta-confirmar-novo-token"
          }
        },
        {
          "id": "p3",
          "titulo": "O token novo aparece",
          "texto": "Ao confirmar, o token novo surge no quadro, no lugar do anterior, com o botão \"Copiar\" ao lado. Copie e cole no painel da Meta logo em seguida, no lugar do antigo. A data de \"Gerado em\" sempre mostra quando o token que está valendo foi criado.",
          "antes": [
            {
              "acao": "click",
              "alvo": {
                "testid": "meta-confirmar-novo-token"
              }
            },
            {
              "acao": "esperar",
              "ms": 3000
            }
          ],
          "destaques": [
            {
              "alvo": {
                "testid": "meta-token-gerado"
              },
              "rotulo": "Token novo",
              "tipo": "caixa"
            },
            {
              "alvo": {
                "testid": "meta-copiar-token"
              },
              "rotulo": "Copiar",
              "tipo": "seta"
            }
          ]
        }
      ]
    },
    {
      "id": "levar-para-a-meta",
      "titulo": "O que levar para o painel da Meta",
      "objetivo": "Saber onde achar a chave secreta no painel da Meta, onde colar o token e onde pegar o endereço de cada número.",
      "papel": "admin",
      "busca": [
        "onde achar a chave secreta no painel da meta",
        "onde colar o token de verificação",
        "url de callback do webhook da meta",
        "configurar webhook do whatsapp oficial"
      ],
      "passos": [
        {
          "id": "p1",
          "titulo": "Onde achar a chave secreta",
          "texto": "Enquanto nenhuma chave foi salva, o texto embaixo do campo diz onde ela fica: no painel da Meta, em \"Configurações do app › Básico\". Copie de lá e cole aqui. O sistema guarda a chave embaralhada e ela nunca volta a aparecer nesta tela.",
          "rota": "/admin/meta",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "texto": "Fica no painel da Meta",
                "exato": false
              },
              "rotulo": "Onde fica na Meta",
              "tipo": "caixa"
            }
          ]
        },
        {
          "id": "p2",
          "titulo": "Onde colar o token",
          "texto": "O texto do quadro do token explica o resto. No painel da Meta, em \"WhatsApp › Configuração › Webhook\", o token vai no campo \"Verificar token\". O outro campo, \"URL de callback\", é de cada número: ele aparece em \"Conexões\" › \"API Oficial (Meta)\", depois que o número da empresa é conectado.",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "texto": "No painel da Meta, em WhatsApp",
                "exato": false
              },
              "rotulo": "O que vai em cada campo da Meta",
              "tipo": "caixa"
            }
          ],
          "dica": "Ao conectar um número em \"Conexões\", o sistema tenta avisar a Meta sozinho, usando o token desta tela. Quando consegue, Conexões mostra \"Webhook registrado pela instalação\" e não é preciso colar nada. Se aparecer \"Cole isto no painel da Meta\", faça o passo à mão."
        },
        {
          "id": "p3",
          "titulo": "Abrir Conexões sem perder o token",
          "texto": "O link \"Abrir Conexões em outra aba\" abre a tela de Conexões já na parte da API oficial, numa aba nova. Assim o token continua aberto nesta página enquanto você pega o endereço do número na outra.",
          "dica": "Se abrir Conexões nesta mesma aba, você sai da página e o token recém-criado some.",
          "antes": [],
          "destaques": [
            {
              "alvo": {
                "texto": "No painel da Meta, em WhatsApp",
                "exato": false
              },
              "rotulo": "O link sublinhado no fim do texto",
              "tipo": "seta"
            }
          ]
        }
      ]
    }
  ]
}