HandyCafe Docs
owner

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:

  1. O telefone abre a URL no navegador padrão.
  2. A página resolve o slug e o código da mesa na API em nuvem.
  3. Se a mesa estiver fora_de_serviço, a página mostra um aviso de indisponibilidade.
  4. Se a mesa estiver livre, a página explica que o cliente ainda não foi acomodado e pede para chamar um atendente.
  5. 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:

  1. A API valida o código contra o valor hash armazenado na mesa.
  2. Se válido, uma sessão é criada e um token é retornado.
  3. 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.
  4. 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:

  1. O pedido é criado em estado pendente.
  2. Um segredo de cliente do Stripe Checkout é retornado.
  3. A interface embutida do Stripe abre inline. O cliente insere os detalhes do cartão.
  4. Com autorização bem-sucedida, o Stripe confirma a cobrança e o pedido passa a pago.
  5. 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.