Menu do Cliente
O menu do cliente é a página web pública em handy.cafe/{seu-slug}. Os clientes acessam escaneando o código QR na mesa. Esta página descreve o fluxo do cliente do início ao fim para que você possa explicá-lo à equipe e planejar sua implementação.
Estrutura da URL
Cada mesa tem uma URL única no formato handy.cafe/{cafe-slug}/{table-code}. O código QR codifica essa URL mais um token de curta duração que comprova a autenticidade do adesivo. Quando o cliente escaneia o QR:
- O telefone abre a URL no navegador padrão.
- A página resolve o slug e o código da mesa na API em nuvem.
- Se a mesa estiver
fora_de_serviço, a página mostra um aviso de indisponibilidade. - Se a mesa estiver
livre, a página explica que o cliente ainda não foi acomodado e pede para chamar um atendente. - Se a mesa estiver
em_uso, a página solicita o código de segurança de 6 dígitos.
Verificação do Código de Segurança
O código de segurança garante que apenas o cliente sentado na mesa possa fazer pedidos. Isso evita que alguém que viu o QR em uma foto ou de fora do café faça pedidos fraudulentos.
Após o cliente inserir o código:
- A API valida o código contra o valor hash armazenado na mesa.
- Se válido, uma sessão é criada e um token é retornado.
- O token é armazenado em um cookie (
hc_menu_session). Um fallback de token Bearer também é salvo no armazenamento local do dispositivo. Isso é necessário no Safari do iPhone, que pode bloquear cookies de terceiros em algumas configurações. - O cliente é redirecionado para o menu.
A sessão é válida por 24 horas a partir da emissão. Se o cliente fechar o navegador e retornar no mesmo dispositivo, a sessão ainda funciona e ele pode entrar novamente sem re-verificação.
Idiomas
O menu suporta 24 idiomas: Árabe, Alemão, Grego, Inglês, Espanhol, Farsi, Francês, Hindi, Indonésio, Italiano, Japonês, Coreano, Malaio, Polonês, Português, Romeno, Russo, Tailandês, Tagalog, Turco, Ucraniano, Urdu, Vietnamita e Chinês.
Na primeira visita, a página inspeciona o cabeçalho Accept-Language do navegador e escolhe a melhor correspondência. O cliente pode alterar o idioma a qualquer momento usando o seletor no topo do menu. O idioma escolhido é lembrado para a sessão.
Nomes de produtos, descrições e ingredientes não são traduzidos automaticamente; eles aparecem no idioma em que você os inseriu no editor de menu. Etiquetas de interface como "Adicionar ao Carrinho", "Checkout" e mensagens de fluxo de pagamento são totalmente localizadas.
Tema
O menu suporta um tema claro e um tema escuro. O padrão é sensível ao dispositivo: se o sistema operacional do cliente estiver configurado para modo escuro, o menu abrirá em modo escuro. Um alternador de tema no topo permite que o cliente mude.
Cabeçalho com Marca
O cabeçalho no topo do menu exibe:
| Elemento | Fonte |
|---|---|
| Imagem do Cabeçalho | Carregada em Configurações > Cafeteria (opcional) |
| Logo | Carregado em Configurações > Cafeteria |
| Nome Exibido | Do perfil do seu negócio |
| Endereço | Do perfil do seu negócio (mostrado no rodapé) |
| Telefone | Do perfil do seu negócio (mostrado no rodapé) |
Personalize esses campos para causar a melhor impressão no cliente. Os clientes reconhecem a marca quando o menu se assemelha à sinalização física do seu estabelecimento.
Navegação no Menu
O menu é agrupado por categoria. Dentro de uma categoria, os produtos são mostrados com uma miniatura, nome, breve descrição e preço.
Tocar em um produto abre a ficha do produto. A ficha mostra:
- A foto completa.
- Descrição em Markdown.
- Linha de ingredientes.
- Chip de tempo de preparo (apenas quando Mostrar Tempo de Preparo no Menu está habilitado).
- Rótulo de unidade se configurado (por exemplo "250 ml").
- Seletores de variantes para quaisquer grupos de variantes associados ao produto.
- Incrementador de quantidade.
- Um botão Adicionar ao Carrinho.
Grupos de variantes obrigatórios bloqueiam o botão Adicionar ao Carrinho até que o cliente selecione uma opção.
Carrinho
O ícone do carrinho fica em um local fixo para que os clientes possam acessá-lo de qualquer tela. O conteúdo do carrinho persiste durante a navegação no site; navegar do carrinho para o menu e vice-versa não perde itens.
O carrinho permite que o cliente:
- Ajuste a quantidade por linha.
- Remova uma linha.
- Adicione uma nota opcional.
- Forneça um número de telefone (opcional).
O subtotal, IVA e total são mostrados em tempo real.
Realizando o Pedido
A etapa de Checkout oferece um ou dois métodos de pagamento, dependendo da sua configuração:
Dinheiro
Se o pagamento online estiver desativado nas suas configurações, apenas Dinheiro é mostrado. O cliente confirma o pedido e ele é enviado imediatamente. O cliente paga ao caixa quando o pedido chega.
Online (Stripe Checkout)
Se o pagamento online estiver ativado, Online aparece como uma opção. Ao enviar:
- O pedido é criado em estado pendente.
- Um segredo de cliente do Stripe Checkout é retornado.
- A interface embutida do Stripe abre inline. O cliente insere os detalhes do cartão.
- Com autorização bem-sucedida, o Stripe confirma a cobrança e o pedido passa a pago.
- O cliente vê a página de sucesso.
Pagamentos falhados ou abandonados deixam o pedido em estado pendente. Uma segunda tentativa pode ser feita na mesma sessão, ou a equipe pode cancelar o pedido no painel de Pedidos.
Página de Sucesso
Após uma submissão bem-sucedida, o cliente chega a uma página de recibo que mostra:
- Número do pedido e horário.
- Cada linha com quantidade, variantes e total da linha.
- Subtotal, IVA e total geral.
- Método de pagamento.
- Ícone de status do pagamento (pendente para dinheiro; pago para online).
- Um CTA "Fazer Outro Pedido" que retorna ao menu com a sessão intacta.
- Um link "Voltar ao Menu".
Polling de Status do Pedido
Após a submissão, a visualização do pedido pelo cliente consulta o endpoint de status para refletir atualizações da cozinha. Se sua equipe avançar um item de preparando para pronto, o cliente vê o selo na linha atualizar automaticamente em segundos.
Isso é útil para retirada self-service no balcão. O cliente pode relaxar na mesa até que o menu informe que o pedido está pronto.
O que os Clientes Não Podem Fazer
- Os clientes não podem navegar no menu sem o código de segurança. A etapa de verificação é sempre necessária.
- Os clientes não podem fazer pedidos para mesas que estão livres ou fora_de_serviço.
- Os clientes não podem editar ou cancelar um pedido após ele ter sido enviado. O cancelamento é uma ação da equipe no painel de Pedidos.
Dicas para uma Experiência Limpa do Cliente
- Imprima adesivos QR com o nome do café e uma instrução clara como "Escaneie para pedir. Peça o código ao atendente." Os clientes às vezes perdem a etapa de verificação de outra forma.
- Mantenha os nomes de categorias e produtos curtos. Nomes longos quebram no celular e empurram imagens para baixo.
- Carregue pelo menos uma foto por produto. Menus com muitas imagens convertem mais do que menus apenas de texto.
- Ative Mostrar Tempo de Preparo no Menu apenas após sua estimativa dinâmica ter sido treinada. Nos primeiros 30 dias, o valor estático pode ser muito generoso ou muito apertado, e os clientes percebem.
- Teste o fluxo completo você mesmo a partir de um telefone antes de abrir para os clientes. Escaneie um QR real, insira o código, faça um pedido de teste e verifique se o pedido aparece no seu painel.