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 | Rascunho |
| 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 | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot mobile (375px) em nova janela →
Variantes por hotel
Section titled “Variantes por hotel”Savoy Palace
Section titled “Savoy Palace”
Saccharum
Section titled “Saccharum”
Calheta Beach
Section titled “Calheta Beach”
Hotel Next
Section titled “Hotel Next”
Savoy Signature
Section titled “Savoy Signature”
Links Figma: Desktop | Mobile | Savoy Palace | Saccharum | Calheta Beach | Next | Signature
Descrição Geral
Section titled “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
Section titled “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)
Section titled “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)
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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)
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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.
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
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 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 |