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 pequeno botão persistente ancorado ao ecrã ou acionado automaticamente pelo hotel num momento determinado.

Campo	Valor
Módulo	M33 — Newsletter Subscription
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	Ver tarefa
Criada	2026-04-23
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Abrir screenshot mobile (375px) em nova janela →</a>

Variantes por tema (matrizes de variantes)

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 (com um ligeiro escurecimento) 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 três formas: através de um pequeno botão persistente ancorado ao canto do ecrã (presente ao longo da visita), automaticamente após um tempo definido pelo hotel, 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.

Tipicamente aparece de forma persistente em todo o site — o hotel define as páginas onde fica ativo e a forma como aparece (automática ou por botão).

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. Adicionalmente, pode ser aberto a partir de um pequeno botão persistente.

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 — Botão persistente (Sticky Button)

Como visitante, quero ter um acesso discreto mas sempre visível ao formulário de subscrição, para poder subscrever no momento que decidir sem ter de procurar.

Elementos visíveis:

Pequeno botão em forma de pílula ancorado a um canto do ecrã (tipicamente o canto inferior direito) com um texto curto (ex: “NEWSLETTER” ou “SUBSCREVER”)

Critérios de Aceitação:

O botão aparece ancorado ao canto escolhido pelo hotel
O botão acompanha o visitante à medida que este percorre a página (mantém-se visível)
Ao clicar no botão, o painel abre no estado inicial (Variante 1)
Depois de o visitante subscrever com sucesso, o botão persistente pode ficar oculto durante a visita (o hotel define este comportamento)

Variante 5 — Abertura automática

Como hotel, quero poder mostrar o painel automaticamente ao visitante depois de um tempo de navegação, para convidar à subscrição num momento em que o visitante já demonstrou interesse no conteúdo.

Critérios de Aceitação:

O painel abre automaticamente após o tempo definido pelo hotel (ex: 15 segundos)
O painel aparece apenas uma vez por visita — não volta a abrir-se automaticamente se o visitante o tiver fechado
Se o visitante já subscreveu, o painel não volta a abrir-se automaticamente em visitas seguintes
O hotel pode desativar a abertura automática e deixar o painel acessível apenas pelo botão persistente

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 persistente (“NEWSLETTER”)	Abre o painel no estado inicial, com os campos vazios
Clicar no botão de fechar (×) no topo do painel	Fecha o painel e regressa à página
Clicar fora do painel (na área escurecida)	Fecha o painel (caso o hotel ative este comportamento)
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.
Descrição inicial	Texto	Sim	Texto explicativo apresentado abaixo do título no estado inicial
Texto de consentimento	Texto	Sim	Texto da caixa de consentimento, com ligação para a política de privacidade. Adapta-se por idioma
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”)
Descrição de confirmação	Texto	Sim	Texto descritivo apresentado no estado de sucesso
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”)
Descrição de “já subscrito”	Texto	Sim	Texto descritivo apresentado quando o email já estava registado
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
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
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	Texto	Sim	Texto apresentado no pequeno botão ancorado ao ecrã (ex: “NEWSLETTER”, “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	Ativo / Inativo	Ativo	Ativa o pequeno botão ancorado ao ecrã
Posição do botão persistente	Canto superior esquerdo / Canto superior direito / Canto inferior esquerdo / Canto inferior direito	Canto inferior direito	Escolhe o canto onde o botão persistente é ancorado
Abertura automática	Ativo / Inativo	Inativo	Se ativo, o painel abre automaticamente após o tempo definido
Tempo para abertura automática	5 / 10 / 15 / 30 / 60 segundos	15 segundos	Tempo que o visitante passa no site antes do painel abrir automaticamente
Fechar ao clicar fora do painel	Ativo / Inativo	Ativo	Se ativo, o painel fecha quando o visitante clica fora da área do painel
Ocultar botão persistente após subscrição	Ativo / Inativo	Ativo	Se ativo, o botão persistente deixa de aparecer depois de o visitante se ter subscrito
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)
Abertura automática nesta página	Ativo / Inativo / Usar definição do hotel	Usar definição do hotel	Permite ativar ou desativar a abertura automática apenas numa página específica

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	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 canto escolhido	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
Fechado (painel não visível)	Apenas o botão persistente aparece ancorado ao canto escolhido (se ativado)
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	O botão muda ligeiramente de tom para indicar que é clicável
Botão persistente após subscrição (se ocultar estiver ativado)	O botão deixa de aparecer na página durante o resto da visita
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 persistente), 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 persistente tem uma descrição acessível (ex: “Abrir formulário de subscrição da newsletter”).
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 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

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.

Changelog

Data	Estado	Descrição
2026-04-23	Rascunho	Versão inicial criada a partir do Figma
2026-04-23	Publicada	Publicada no Docmost (nova página)