M33 — Newsletter Subscription

Painel de subscrição de newsletter que aparece sobre a página e permite ao visitante registar-se para receber comunicações do hotel. Pode ser aberto a partir de um botão.

Campo	Valor
Módulo	M33 — Newsletter Subscription
Estado	Aprovada
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T674
Criada	2026-04-23
Aprovada	2026-06-11
Aprovada por	Savoy (cliente)

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →

Variantes por hotel

Savoy Palace

Saccharum

Calheta Beach

Hotel Next

Savoy Signature

Descrição Geral

O módulo Newsletter Subscription é um painel de subscrição que permite ao visitante registar o seu nome e email para receber comunicações periódicas do hotel (novidades, ofertas, eventos).

O painel aparece sobre a página, ocupando apenas uma parte do ecrã à direita no computador e a totalidade do ecrã no telemóvel. Mantém visível o conteúdo da página em fundo (uma camada translúcida com efeito de desfoque (backdrop-blur),) para que o visitante compreenda que está a interagir com um formulário e não com o conteúdo principal.

O painel pode ser aberto de duas formas: botão no footer ou por um botão dentro do conteúdo editorial da página.

Depois de subscrever, o painel apresenta uma mensagem de confirmação. Se o email já estiver subscrito ou houver um erro, o painel apresenta a mensagem correspondente e permite tentar novamente.

Variantes

Este módulo tem uma estrutura única (um painel com um formulário) e varia entre três estados conforme a interação do visitante.

Variante 1 — Estado inicial (formulário vazio)

Como visitante, quero poder registar o meu nome e email para receber novidades do hotel, para me manter informado sobre ofertas e eventos.

Elementos visíveis:

Botão de fechar (×) no canto superior direito
Título principal (ex: “Subscreva a nossa newsletter”)
Texto descritivo (explica o que o visitante vai receber)
Campo “Nome”
Campo “Email”
Caixa de seleção com texto de consentimento (RGPD) e ligação para a política de privacidade
Botão “SUBSCREVER” (ou “SUBMIT”)

Critérios de Aceitação:

O painel aparece sobre a página com o conteúdo da página em fundo ligeiramente escurecido
Os campos “Nome” e “Email” são editáveis e aceitam texto
A caixa de consentimento começa desmarcada — é obrigatório marcá-la para submeter
O botão de submissão só fica ativo quando os campos obrigatórios estão preenchidos e a caixa de consentimento marcada
Ao clicar no botão de fechar (×), o painel fecha e o visitante regressa à página
Ao submeter com sucesso, o painel transita para a Variante 2 (mensagem de confirmação)
Se o email já estiver subscrito ou ocorrer um erro, o painel transita para a Variante 3

Variante 2 — Subscrição confirmada (sucesso)

Como visitante, quero receber uma confirmação visual clara de que a minha subscrição foi registada, para ter a certeza de que o processo foi concluído.

Elementos visíveis:

Botão de fechar (×) no canto superior direito
Ícone de envelope com marca de confirmação (✓)
Título principal (ex: “Obrigado pela subscrição”)
Texto de confirmação (ex: “Vai receber as nossas novidades no email indicado”)
Botão “FECHAR” (ou “CLOSE THIS FORM”)

Critérios de Aceitação:

O painel substitui os campos do formulário pela mensagem de confirmação
O ícone de envelope com a marca de confirmação é claramente visível
O botão “FECHAR” fecha o painel e regressa o visitante à página
O botão de fechar (×) no topo também fecha o painel
Se o visitante voltar a abrir o painel na mesma visita, o estado pode voltar ao formulário inicial (o hotel define este comportamento)

Variante 3 — Email já subscrito ou erro

Como visitante, quero saber se o meu email já estava registado ou se ocorreu um problema, para compreender o que aconteceu e poder tentar novamente se for o caso.

Elementos visíveis:

Botão de fechar (×) no canto superior direito
Ícone de envelope com marca de aviso (×)
Título principal (ex: “Este email já está subscrito” ou “Ocorreu um erro”)
Texto explicativo (descreve a situação ao visitante)
Botão “SUBSCREVER” ou “TENTAR NOVAMENTE” (que devolve o visitante ao formulário)

Critérios de Aceitação:

O painel substitui os campos do formulário pela mensagem correspondente
O ícone de envelope com a marca de aviso é claramente visível
O botão permite voltar ao formulário inicial (Variante 1) para tentar novamente com outro email
O botão de fechar (×) no topo fecha o painel
O texto é diferente consoante a razão (email já subscrito vs erro geral)

Variante 4 - Quando o formulário passa a view port - Botão persistente (componente separado)

Elementos visíveis:

Pequeno botão em forma de pílula ancorado na parte de baixo do formulário

Critérios de Aceitação:

O botão aparece ancorado na parte de baixo do formulário

Interações do Utilizador

Este módulo é interativo. O visitante pode abrir e fechar o painel, preencher os campos, submeter o formulário e navegar entre estados.

Interação	Descrição
Clicar no botão de fechar (×) no topo do painel	Fecha o painel e regressa à página
Clicar fora do painel (na área escurecida/com blur)	Fecha o painel
Premir a tecla Escape	Fecha o painel
Escrever no campo “Nome”	Insere o nome do visitante
Escrever no campo “Email”	Insere o email do visitante
Clicar na caixa de consentimento	Marca ou desmarca a aceitação da política de privacidade
Clicar na ligação “política de privacidade” dentro do texto de consentimento	Abre a página de privacidade numa nova janela
Clicar no botão “SUBSCREVER” (formulário preenchido)	Envia os dados — o painel transita para o estado de confirmação ou erro
Clicar no botão “SUBSCREVER” (formulário incompleto)	O botão não responde (está desativado) ou aparece uma mensagem a indicar os campos em falta
Clicar no botão “FECHAR” (estado de confirmação)	Fecha o painel
Clicar no botão “TENTAR NOVAMENTE” (estado de erro)	Regressa o painel ao formulário inicial
Usar a tecla Tab	Percorre os elementos do painel pela ordem lógica: campo Nome → campo Email → caixa de consentimento → botão de submissão
Premir Enter num campo de texto	Submete o formulário (se os campos estiverem válidos)

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Título inicial	Título	Sim	Título apresentado no topo do painel no estado inicial (ex: “Subscreva a nossa newsletter”). O editor escolhe o nível de cabeçalho. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Descrição inicial	Texto	Sim	Texto explicativo apresentado abaixo do título no estado inicial. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Texto de consentimento	Texto	Sim	Texto da caixa de consentimento, com ligação para a política de privacidade. Adapta-se por idioma. Suporta RTE simplificado: negrito, itálico, sublinhado, link. A ligação para a política de privacidade é inserida inline via link content picker
Texto do botão de submissão	Texto	Sim	Texto do botão principal do formulário (ex: “SUBSCREVER”, “SUBMETER”)
Etiqueta do campo “Nome”	Texto	Sim	Texto da etiqueta e do indicador interno do campo (ex: “Nome”, “O seu nome”)
Etiqueta do campo “Email”	Texto	Sim	Texto da etiqueta e do indicador interno do campo (ex: “Email”, “O seu email”)
Título de confirmação	Título	Sim	Título apresentado no estado de sucesso (ex: “Obrigado pela subscrição”). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Descrição de confirmação	Texto	Sim	Texto descritivo apresentado no estado de sucesso. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Texto do botão de fechar (estado de confirmação)	Texto	Sim	Texto do botão apresentado no estado de sucesso (ex: “FECHAR”)
Título de “já subscrito”	Título	Sim	Título apresentado quando o email já estava registado (ex: “Este email já está subscrito”). Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Descrição de “já subscrito”	Texto	Sim	Texto descritivo apresentado quando o email já estava registado. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Título de erro	Título	Não	Título apresentado em caso de erro geral (ex: “Ocorreu um erro”). Se não for preenchido, é usado um texto padrão. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Descrição de erro	Texto	Não	Texto descritivo apresentado em caso de erro geral. Se não for preenchido, é usado um texto padrão. Suporta RTE simplificado: negrito, itálico, sublinhado, link.
Texto do botão “tentar novamente”	Texto	Sim	Texto do botão que regressa ao formulário inicial (ex: “TENTAR NOVAMENTE”)
Texto do botão persistente (comportamento quando o form passa o view port)	Texto	Sim	Texto apresentado no pequeno botão ancorado ao ecrã (ex: “SUBSCREVER”)

Nota: Todos os textos são traduzíveis e configuráveis por hotel — o editor pode adaptar as mensagens à voz e tom do hotel. A ligação para a política de privacidade dentro do texto de consentimento é uma ligação normal editável. A caixa de consentimento (RGPD) é sempre obrigatória para cumprir a legislação aplicável.

Opções de Configuração

Por hotel (nas definições globais do site)

Opção	Valores possíveis	Valor padrão	Descrição
Ativar Newsletter Subscription neste hotel	Ativo / Inativo	Ativo	Se inativo, o painel não aparece em nenhuma página do hotel
Mostrar botão persistente (comportamento quando o form passa o view port)	Ativo / Inativo	Ativo	Ativa o pequeno botão ancorado ao fundo do form
Fechar ao clicar fora do painel	Ativo / Inativo	Ativo	Se ativo, o painel fecha quando o visitante clica fora da área do painel
Ligação da política de privacidade	Campo de ligação	—	Página de privacidade referenciada no texto de consentimento

Por página

Opção	Valores possíveis	Valor padrão	Descrição
Mostrar Newsletter Subscription nesta página	Ativo / Inativo	Ativo	Permite esconder o módulo numa página específica (ex: página de privacidade)

Nota: O painel pode também ser aberto por um botão dentro do conteúdo editorial da página (ex: um botão “Subscreva a nossa newsletter” colocado num módulo de texto) — este comportamento é configurado ao nível do botão, não aqui.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Painel (largura)	Aparece à direita do ecrã, ocupando cerca de um terço da largura	Ocupa toda a largura do ecrã
Painel (altura)	Ocupa toda a altura do ecrã	Ocupa toda a altura do ecrã
Conteúdo da página (em fundo)	Permanece visível à esquerda, ligeiramente escurecido e com blur	Fica totalmente coberto pelo painel
Campos do formulário	Ocupam a largura do painel, espaço confortável entre cada campo	Ocupam a largura total do painel, espaçamento adaptado ao toque
Botão de submissão	Largura ajustada ao texto, alinhado à esquerda	Largura ajustada ao texto, tamanho maior para facilitar o toque
Botão persistente	Pílula compacta no final do form quando o mesmo ultrapassa o view port	Pílula com dimensões ajustadas para facilitar o toque
Botão de fechar (×)	Canto superior direito do painel, tamanho normal	Canto superior direito do painel, área de toque maior

O painel mantém o mesmo comportamento e estrutura em todos os tamanhos de ecrã — muda apenas a forma como ocupa o espaço disponível.

Estados Visuais

Estado	Descrição
Aberto — formulário vazio	O painel aparece com os campos Nome e Email vazios, caixa de consentimento desmarcada, botão de submissão desativado
Aberto — formulário parcialmente preenchido	À medida que o visitante preenche os campos, o botão de submissão mantém-se desativado até todos os campos obrigatórios estarem preenchidos e o consentimento marcado
Aberto — formulário pronto a submeter	O botão de submissão fica ativo (cor mais viva, indicador de clicável)
Ao passar o rato sobre o botão de submissão (ativo)	O botão muda ligeiramente de tom para indicar que é clicável
Ao clicar no botão de submissão	O botão pode mostrar um indicador de carregamento (ex: texto “A enviar…”) enquanto o pedido é processado
Aberto — confirmação de subscrição	O conteúdo do painel muda para mostrar o ícone de sucesso, título e descrição de confirmação, e botão de fechar
Aberto — email já subscrito	O conteúdo do painel muda para mostrar o ícone de aviso e a mensagem correspondente, com o botão de tentar novamente
Aberto — erro	O conteúdo do painel muda para mostrar o ícone de aviso e a mensagem de erro, com o botão de tentar novamente
Campo com erro de validação	O campo fica destacado (ex: contorno vermelho) com uma mensagem breve a indicar o problema (ex: “Email inválido”)
Botão persistente ao passar o rato (quando o form ultrapassa o view port)	O botão muda ligeiramente de tom para indicar que é clicável
Módulo desativado na página ou no hotel	O painel não aparece e o botão persistente também não aparece

Acessibilidade

Pode ser utilizado apenas com o teclado: tecla Tab para navegar entre os campos e botões, tecla Enter ou Espaço para marcar a caixa de consentimento e para submeter o formulário.
A tecla Escape fecha o painel a qualquer momento.
Quando o painel abre, a primeira zona navegável (tipicamente o campo Nome) é selecionada automaticamente pelo teclado, para facilitar o preenchimento imediato.
Enquanto o painel está aberto, o teclado fica confinado aos seus elementos — o visitante não consegue navegar para fora do painel sem o fechar primeiro (evita perder o contexto).
Quando o painel fecha, o foco do teclado regressa ao elemento que o abriu (ex: o botão no conteudo), para manter a continuidade da navegação.
Cada campo tem uma etiqueta clara (ex: “Nome”, “Email”) associada ao respetivo campo de entrada, para que os leitores de ecrã anunciem o contexto.
A caixa de consentimento tem uma descrição completa que inclui a ligação para a política de privacidade — pode ser lida e interagida por teclado.
Mensagens de erro em campos inválidos são anunciadas pelos leitores de ecrã logo que aparecem.
As transições entre estados (formulário → confirmação → erro) são anunciadas pelos leitores de ecrã, para que o visitante saiba o resultado da submissão.
O botão de fechar (×) tem uma descrição acessível (ex: “Fechar formulário de subscrição”).
O contraste entre texto, campos, botões e fundo cumpre os requisitos de acessibilidade visual em todos os temas (mínimo 4.5:1).
Respeita a preferência do utilizador por movimento reduzido — quando esta opção está ativa no sistema operativo, as animações de abertura e fecho do painel são desativadas e as mudanças ocorrem de forma imediata.
O painel é protegido contra submissões automáticas (bots) através de mecanismos invisíveis ao visitante (não requer que o visitante resolva desafios visuais).

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo do painel, cor do texto, cor dos campos, cor dos botões e tipografia seguem a identidade visual do hotel.

Os 8 sites suportados:
• Savoy Palace
• Saccharum
• Calheta Beach
• Hotel Next
• Savoy Signature (site do grupo)
• Gardens (por desenvolver)
• The Reserve (por desenvolver)
• Royal Savoy (por desenvolver)

Notas por tema (com base no Figma):

Savoy Palace — painel em bege/areia, botões em castanho dourado, texto escuro
Saccharum — painel em verde pálido natural, botões em verde escuro, texto escuro
Calheta Beach — painel em tom pálido claro, botões em vermelho/coral, texto escuro
Hotel Next — painel em azul pálido, botões em azul médio, texto escuro
Savoy Signature — painel em azul-marinho escuro (tema escuro), botões em dourado, texto claro

O esquema estrutural (painel lateral, campos do formulário, estados de confirmação e erro, botão persistente) mantém-se consistente entre todos os hotéis — muda apenas a paleta de cores e a tipografia.

Segurança e Proteção contra Spam

Todas as submissões deste formulário são protegidas por várias camadas de segurança, invisíveis para o visitante legítimo:

Mecanismo	Descrição
Google reCAPTCHA v3	Validação invisível baseada em pontuação (score). O sistema avalia o comportamento da submissão e bloqueia automaticamente as que ficam abaixo do limite definido, sem desafios visuais para o visitante.
Rate Limiting (Cloudflare WAF)	Limite do número de submissões por IP num curto período, aplicado na camada de rede (Cloudflare). Trava ataques de força bruta e flooding antes de chegarem ao site.
Honeypot	Campo escondido (invisível para humanos) que só os bots preenchem. Quando preenchido, a submissão é descartada silenciosamente sem informar o bot.
Deteção de Bots	Análise de sinais de automação (Cloudflare Bot Management e heurísticas) que identifica e bloqueia tráfego não humano.
Validação de Origem (CSRF)	A submissão só é aceite se tiver origem num domínio autorizado do hotel; pedidos de origens desconhecidas são rejeitados.
Sanitização de Dados	O conteúdo introduzido é limpo de código/HTML malicioso, o email é normalizado e são aplicados limites máximos de tamanho antes de qualquer processamento ou armazenamento.

Como Abrir o Painel de Subscrição

O painel de newsletter não tem posição fixa — é aberto a pedido a partir de um elemento de ação:

Por botão no footer: o botão de subscrição presente no rodapé do site abre o painel.
Por CTA / botão configurado: qualquer botão ou link de um módulo de conteúdo (ex: um botão “Subscreva a nossa newsletter” num bloco de texto) pode ser configurado no backoffice para abrir este painel.
Por ligação direta (URL): uma ligação com o parâmetro ?form={nome-do-formulário} abre o painel automaticamente ao carregar a página.

O painel é configurado uma vez no backoffice e reutilizado em qualquer ponto de contacto do site.

Tratamento de Dados e Submissões

Envio por email: cada submissão é enviada para o endereço de email configurado no formulário (definido no backoffice por hotel/formulário). Opcionalmente, o visitante recebe um email de confirmação.
Registo das submissões: todas as submissões ficam guardadas e disponíveis numa área dedicada do backoffice (“Formulários / Submissões”), independentemente do envio por email.
Acesso perfilado: o acesso é controlado por perfil — o gestor de cada hotel vê apenas as submissões dos formulários do seu hotel; um gestor global tem acesso a todas as submissões de todos os hotéis.
Consulta e exportação: a área permite consultar cada submissão em detalhe e exportar os dados (ex: CSV) para tratamento externo.
Proteção de dados (RGPD): a aceitação da política de privacidade é obrigatória; os dados são tratados de acordo com a legislação aplicável e a finalidade indicada ao visitante.

Integração com Salesforce (CRM do cliente)

As subscrições da newsletter são integradas com o CRM Salesforce do cliente, através do mecanismo padrão Salesforce Web-to-Lead: cada subscrição cria um lead no Salesforce com o nome e email do visitante e a origem (página/website).

O script de exemplo enviado pelo cliente não é utilizado diretamente — é reimplementado do lado do site garantindo performance e acessibilidade, mantendo a estrutura de dados que o Salesforce espera (organização, idioma, origem e campos personalizados definidos pelo cliente).

Pontos em aberto (dependem de confirmação do cliente):

Diferenciação por hotel: com a configuração atual, todos os registos — independentemente do hotel/site de origem — entram na mesma base Salesforce sem distinção. É necessário confirmar com o cliente se é esse o comportamento pretendido ou se devem ser usados identificadores/etiquetas diferentes por hotel (e quais).
Ambiente de testes: confirmar se haverá acesso a um ambiente de testes/sandbox do cliente, ou se será necessário criar um do nosso lado para validar em DEV/STAGE antes de produção.

Estado: integração planeada (tarefa Zoho P894-T308 — Integração módulo NL com Salesforce). O desenvolvimento depende das confirmações acima e do acesso ao Salesforce para validação dos registos.

Changelog

Data	Estado	Descrição
2026-05-19	Revisão PM (Gabriela)	Validado GR com comentários
2026-05-19	Revisão CD (Michelle)
2026-05-18	Revisão Rui Rosa	Revisto e validado por Rui Rosa. Pequenas alterações.
2026-05-18	Análise QA (Agentic QA)	Análise de incoerências, formatação, lógica, e conteúdo. Revisto e alterado.
2026-05-14	Revisão Design + Tech	Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA
2026-05-11	Revisão Functional Analyst	Análise e recomendações da equipa de Análise Funcional.
2026-05-05	Validação Design	Atualizado e validado por Liliana Moreira
2026-04-23	Rascunho	Versão inicial criada a partir do Figma
2026-06-11	Aprovada	Aprovação do cliente (Savoy) confirmada — estado “approved” no Docmost + Excel de controle