M31 — Social Share

Botão flutuante de partilha que permite ao visitante partilhar a página atual em várias plataformas sociais (X, Facebook, LinkedIn, WhatsApp, Email) ou copiar a ligação para a área de transferência. Aparece ancorado num dos cantos do ecrã e abre uma barra com as plataformas disponíveis quando clicado.

Campo	Valor
Módulo	M31 — Social Share
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-21
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 Social Share é um pequeno elemento flutuante que acompanha o visitante ao longo da página e lhe permite partilhar o conteúdo que está a ver. Aparece ancorado num dos quatro cantos do ecrã (por exemplo, em baixo à direita) como um botão compacto com a palavra “PARTILHAR” e um ícone.

Quando o visitante clica no botão, este transforma-se numa pequena barra com as plataformas disponíveis — X (antigo Twitter), Facebook, LinkedIn, WhatsApp, envio por Email e a opção de copiar a ligação da página. O visitante escolhe a plataforma e a partilha abre numa nova janela; no caso da opção de copiar a ligação, esta é copiada para a área de transferência e aparece uma confirmação visual de que a cópia foi feita.

Para não interferir com a leitura, o botão começa escondido quando o visitante está no topo da página (no banner principal) e só aparece quando o visitante começa a percorrer a página. Ao chegar ao rodapé, o botão recua ligeiramente para cima para não se sobrepor aos contactos e informação legal do hotel.

Tipicamente aparece em páginas de quartos, restaurantes, spa, ofertas, blog/notícias — qualquer página cujo conteúdo o visitante possa querer partilhar.

Variantes

Este módulo tem uma estrutura única — um botão que abre para revelar uma barra de plataformas. As diferenças entre instâncias resultam das plataformas que o hotel ativa e da posição escolhida para cada página.

Variante 1 — Fechada (estado por defeito)

Como visitante, quero ver um botão pequeno e discreto de partilha, para saber que posso partilhar a página sem que o botão me atrapalhe a leitura.

Elementos visíveis:

Botão em forma de pílula com a palavra “PARTILHAR” (ou “SHARE” em inglês) à esquerda
Ícone de partilha à direita (três pontos ligados por linhas)

Critérios de Aceitação:

O botão aparece ancorado ao canto definido para a página (ex: canto inferior direito)
O botão acompanha o visitante à medida que este percorre a página (mantém-se visível no mesmo canto)
O botão não aparece quando o visitante está no topo da página (banner principal)
O botão aparece assim que o visitante começa a percorrer a página
Ao clicar no botão, este transforma-se na barra com as plataformas (ver Variante 2)

Variante 2 — Aberta (com plataformas visíveis)

Como visitante, quero ver todas as opções de partilha disponíveis, para escolher rapidamente a plataforma onde quero partilhar a página.

Elementos visíveis:

Botão para fechar a barra (ícone de ”×” à esquerda)
Um ícone por cada plataforma ativada pelo hotel (X, Facebook, LinkedIn, WhatsApp, Email)
Ícone de ligação (copiar link) à direita, se ativado pelo hotel

Critérios de Aceitação:

A barra aparece no lugar do botão (mesmo canto, mesma altura)
Aparecem apenas as plataformas ativadas pelo hotel — plataformas desativadas não aparecem
Ao clicar no botão de fechar (”×”), a barra volta a transformar-se no botão “PARTILHAR”
Ao clicar fora da barra (em qualquer outro ponto do ecrã), a barra fecha automaticamente
Ao premir a tecla Escape, a barra fecha
Ao clicar em cada ícone de plataforma, abre-se uma nova janela com a plataforma escolhida e a ligação da página já preparada para partilha

Variante 3 — Confirmação de cópia de ligação

Como visitante, quero receber uma confirmação visual depois de copiar a ligação, para ter a certeza de que a cópia foi feita com sucesso.

Elementos visíveis:

Barra de plataformas (igual à Variante 2) com o ícone de copiar link a mostrar uma mensagem de confirmação momentânea

Critérios de Aceitação:

Ao clicar no ícone de copiar link, a ligação da página fica copiada na área de transferência do computador/telemóvel
O ícone mostra uma confirmação visual (ex: ícone muda para ”✓” ou a descrição do botão atualiza para “Link copiado”)
A confirmação desaparece automaticamente ao fim de cerca de 2 segundos
Depois da confirmação, o ícone volta ao aspeto inicial e pode ser clicado novamente

Variante 4 — Posição personalizada (por página)

Como editor de conteúdo, quero poder escolher em que canto o botão aparece em cada página, para ajustar ao design da página (ex: se o canto superior direito tem um elemento importante, o botão pode ser colocado em baixo à esquerda).

Posições disponíveis: Canto superior esquerdo, canto superior direito, canto inferior esquerdo, canto inferior direito.

Critérios de Aceitação:

O editor escolhe a posição no backoffice, por página
Cada página pode ter uma posição diferente
O comportamento de esconder no topo e subir sobre o rodapé mantém-se em todas as posições
Na posição “em cima”, o botão não precisa de se ajustar ao rodapé

Interações do Utilizador

Este módulo é interativo. O visitante pode abrir e fechar a barra de plataformas, escolher uma plataforma ou copiar a ligação da página.

Interação	Descrição
Clicar no botão “PARTILHAR”	Transforma o botão numa barra com as plataformas disponíveis
Clicar no botão ”×” (fechar)	Fecha a barra e volta a mostrar o botão “PARTILHAR”
Clicar fora da barra aberta	Fecha a barra automaticamente
Premir a tecla Escape	Fecha a barra
Clicar num ícone de plataforma (X, Facebook, LinkedIn, WhatsApp)	Abre uma nova janela com a plataforma escolhida e a ligação da página preparada para partilha
Clicar no ícone de Email	Abre o programa de email do visitante com o assunto e a ligação da página já preenchidos
Clicar no ícone de copiar link	Copia a ligação da página para a área de transferência e mostra uma confirmação visual momentânea
Usar a tecla Tab (com a barra aberta)	Percorre os ícones das plataformas um a um pela ordem em que aparecem
Premir Enter ou Espaço num ícone selecionado	Executa a mesma ação que clicar nesse ícone
Percorrer a página para cima até ao banner principal	O botão desaparece automaticamente
Percorrer a página até ao rodapé	O botão recua ligeiramente para cima para não tapar o rodapé

Elementos

Este módulo é configurado automaticamente a partir das definições do hotel e da página — não tem conteúdos de texto ou imagem geridos no backoffice (o texto do botão vem de um dicionário de traduções partilhado, adaptado por idioma).

Elemento	Tipo	Obrigatório	Descrição
Texto do botão	Texto (dicionário)	Sim	Texto apresentado no botão em estado fechado (ex: “PARTILHAR” em português, “SHARE” em inglês). Vem do dicionário de traduções do projeto — gerido uma só vez para todas as páginas e idiomas
Descrições dos botões para leitores de ecrã	Texto (dicionário)	Sim	Texto acessível para cada botão (ex: “Partilhar no Facebook”, “Copiar link da página”). Adaptam-se ao idioma da página

Nota: Este módulo não tem campos de conteúdo a preencher página a página. O editor apenas escolhe se o módulo aparece na página e em que canto é ancorado (ver Opções de Configuração). As plataformas disponíveis (Facebook, LinkedIn, etc.) são configuradas uma só vez por hotel nas definições globais do site.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e posição do módulo:

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

Opção	Valores possíveis	Valor padrão	Descrição
Ativar Social Share neste hotel	Ativo / Inativo	Ativo	Se inativo, o módulo não aparece em nenhuma página do hotel
Mostrar X (Twitter)	Ativo / Inativo	Ativo	Ativa o ícone de partilha no X na barra aberta
Mostrar Facebook	Ativo / Inativo	Ativo	Ativa o ícone de partilha no Facebook
Mostrar LinkedIn	Ativo / Inativo	Ativo	Ativa o ícone de partilha no LinkedIn
Mostrar WhatsApp	Ativo / Inativo	Ativo	Ativa o ícone de partilha no WhatsApp
Mostrar Email	Ativo / Inativo	Ativo	Ativa o ícone de partilha por email
Mostrar Copiar Ligação	Ativo / Inativo	Ativo	Ativa o ícone de copiar a ligação da página

Por página

Opção	Valores possíveis	Valor padrão	Descrição
Mostrar Social Share nesta página	Ativo / Inativo	Ativo	Permite esconder o módulo numa página específica
Posição vertical	Em cima / Em baixo	Em baixo	Escolhe se o botão fica ancorado ao cimo ou ao fundo do ecrã
Posição horizontal	Esquerda / Direita	Direita	Escolhe se o botão fica ancorado à esquerda ou à direita do ecrã

Nota: A combinação das duas posições resulta num dos quatro cantos do ecrã. Por defeito, o botão aparece no canto inferior direito. Todas as páginas do hotel podem ter uma posição diferente; basta o editor escolher no backoffice da página.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Botão fechado	Pílula compacta ancorada ao canto escolhido, com margem ao bordo do ecrã	Pílula maior e mais alta para facilitar o toque; mesma posição ancorada ao canto
Barra aberta	Largura ajustada ao número de ícones, ancorada ao mesmo canto que o botão fechado	Ícones maiores para facilitar o toque; a barra mantém-se no mesmo canto
Espaço entre o botão e os bordos do ecrã	Margem visível em todos os lados	Margem adaptada ao ecrã pequeno
Texto do botão (“PARTILHAR”)	Visível ao lado do ícone de partilha	Visível ao lado do ícone de partilha (texto mantém-se)

O módulo mantém o mesmo comportamento (abrir, fechar, posição, plataformas disponíveis) em todos os tamanhos de ecrã. Ajusta-se apenas em dimensões e espaçamento para garantir uma boa utilização tanto no computador como no telemóvel.

Estados Visuais

Estado	Descrição
Inicial (topo da página)	O botão não aparece — o visitante está no banner principal e o botão não deve interferir com a leitura
Visível (após percorrer a página)	O botão “PARTILHAR” aparece ancorado ao canto escolhido
Ao passar o rato no botão	O botão muda ligeiramente de tom para indicar que é clicável
Aberto (barra de plataformas)	O botão transforma-se numa barra com um ícone de fechar (”×”) e os ícones das plataformas ativadas
Ao passar o rato num ícone de plataforma	O ícone muda ligeiramente de tom para indicar que é clicável
Ícone selecionado pelo teclado	O ícone fica com um contorno visível para indicar que está selecionado
Após copiar a ligação	O ícone de copiar mostra uma confirmação visual (ex: ”✓” ou “Link copiado”) durante cerca de 2 segundos
Perto do rodapé	O botão sobe ligeiramente para não tapar o rodapé da página
No rodapé (rodapé totalmente visível)	O botão continua visível mas fica acima do rodapé, com um pequeno espaço de separação
Sem plataformas ativadas	O módulo não aparece (não faz sentido mostrar um botão que não tem opções)
Módulo desativado na página ou no hotel	O módulo não aparece

Acessibilidade

Pode ser utilizado apenas com o teclado: tecla Tab para navegar até ao botão de partilha, tecla Enter ou Espaço para abrir a barra, tecla Tab para percorrer os ícones de plataforma, tecla Enter ou Espaço para escolher uma plataforma.
A tecla Escape fecha a barra a qualquer momento.
Cada ícone de plataforma tem uma descrição de texto para leitores de ecrã (ex: “Partilhar no Facebook”, “Copiar link da página”).
O botão de fechar tem uma descrição clara (“Fechar opções de partilha”).
O estado (aberto/fechado) da barra é comunicado aos leitores de ecrã.
Após copiar a ligação, a descrição do botão atualiza temporariamente para confirmar a cópia (“Link copiado”), o que é anunciado pelos leitores de ecrã.
Os ícones das plataformas são meramente visuais (ignorados por leitores de ecrã — a informação é transmitida pelas descrições acessíveis).
O contraste entre o texto/ícones e o 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 transição entre o estado fechado e aberto são desativadas e as mudanças ocorrem de forma imediata.

Temas

O módulo adapta-se visualmente a cada hotel: cor de fundo do botão e da barra, cor dos ícones, cor do texto “PARTILHAR” 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 — botão e barra em dourado/terra, ícones em branco
Saccharum — botão e barra em tom natural terroso, ícones em branco
Calheta Beach — botão e barra em vermelho/coral, ícones em branco
Hotel Next — botão e barra em azul claro, ícones em branco
Savoy Signature — botão e barra em dourado claro sobre fundo de página escuro (tema escuro)

O esquema estrutural (pílula fechada, barra aberta, ícones, comportamento de scroll) mantém-se consistente entre todos os hotéis — muda apenas a paleta de cores.

Changelog

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