M31 — Social Share

Botão 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	Aprovada
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Library (página)	Abrir no Figma
Zoho Task	P894-T668
Criada	2026-04-21
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 Social Share é um botão em forma de pílula, ancorado por default no canto inferior esquerdo de todas as páginas onde está ativo. Permite partilhar a página atual em várias plataformas sociais ou copiar a ligação para a área de transferência.

O botão tem dois estados: fechado (pílula compacta com “PARTILHAR” e ícone) e aberto (pílula expandida com os ícones das plataformas ativas). O visitante alterna entre os dois estados clicando no botão. A transição entre estados tem animação — ver secção Animação.

A posição no canto inferior esquerdo é fixa e não é configurável por página ou por 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.

Link para componente do botão de social share: https://www.figma.com/design/VFdCObxYyZjSRFdK5pU1df/01_Savoy_library?node-id=803-4602&m=dev

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.

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 compacta (128×52px no desktop, 312×52px no mobile), ancorado no canto inferior esquerdo
Botão com a palavra “PARTILHAR” e um ícone de partilha

Critérios de Aceitação:

O botão (pílula) está ancorado, fixo, no canto inferior esquerdo de todas as páginas onde está ativo
A posição é fixa no canto inferior esquerdo (não configurável)
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 ”✓”)
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

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. A posição (canto inferior esquerdo) é fixa e não é configurável. 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	Permite ativar ou desativar o Social Share em todo o site deste hotel sem o apagar.
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

Nota: O botão aparece sempre no canto inferior esquerdo — posição fixa, não configurável.

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Botão fechado	Pílula de 128×52px, canto inferior esquerdo	Pílula de 312×52px, canto inferior esquerdo
Botão aberto	Pílula de 294×52px (expande para a direita)	Pílula de 311×52px

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

Animação

A transição entre o estado fechado e o estado aberto tem uma animação de expansão — o botão cresce horizontalmente para revelar os ícones das plataformas.

Referência: https://cdn.dribbble.com/userupload/28246382/file/original-9d57ac2719fc1fe27471b79179a037e0.gif

Para utilizadores com prefers-reduced-motion ativo, o botão passa diretamente entre os dois estados sem animação.

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 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 — 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-05-19	Revisão PM (Gabriela)	Revisado 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-21	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