M30 — Social Media
Bloco que apresenta uma introdução editorial (etiqueta, título e texto) com os atalhos para as redes sociais do hotel e, por baixo, uma “parede” de publicações de redes sociais alimentada pela plataforma externa Taggbox.
| Campo | Valor |
|---|---|
| Módulo | M30 — Social Media |
| Tipo | Módulo — bloco de conteúdo que o editor adiciona a uma página |
| Estado | Rascunho |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Zoho Task | P894-T662 |
| Criada | 2026-05-19 |
| Aprovada | — |
| Aprovada por | — |
⚠️ A rever: As variações por tema (cores/tipografia por hotel) ainda não estão terminadas no Figma. A secção “Temas” deste documento descreve o comportamento esperado, mas os detalhes visuais por hotel precisam de ser revistos e confirmados antes do desenvolvimento.
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 →
Descrição Geral
Section titled “Descrição Geral”O módulo Social Media tem duas zonas, uma por cima da outra:
- Zona de introdução — centrada no ecrã, com uma etiqueta curta em destaque, um título, um pequeno texto e uma fila de botões redondos que ligam às páginas de redes sociais do hotel (ex: Facebook, Instagram, YouTube, LinkedIn).
- Zona “Parede Social” (Integração Taggbox) — uma área larga, por baixo da introdução, onde é apresentada uma montra das publicações das redes sociais do hotel. Este conteúdo não é criado no site: é fornecido pela plataforma externa Taggbox, onde o cliente monta a “parede” e copia um pequeno código de integração que cola no backoffice deste módulo.
O objetivo é convidar o visitante a seguir e interagir com as redes sociais do hotel, mostrando ao mesmo tempo conteúdo social real e atualizado sem que ninguém tenha de o gerir manualmente no site.
Aparece tipicamente em páginas onde se quer reforçar a presença social do hotel — homepage, página “O Hotel”, páginas de experiências ou uma página dedicada a redes sociais.
Integração Externa — Taggbox
Section titled “Integração Externa — Taggbox”A “parede social” deste módulo é gerida fora do site, na plataforma taggbox.com.
| Gerido na Taggbox (pelo cliente) | Gerido no site / backoffice |
|---|---|
| Que redes sociais são agregadas e que publicações aparecem na parede | Inserir o código de integração fornecido pela Taggbox no campo próprio do módulo |
| Aspeto, disposição e estilo da parede (layout, número de colunas, cores da parede) | Conteúdo da introdução: etiqueta, título, texto e links das redes sociais |
| Moderação das publicações (esconder/aprovar) | Decidir em que páginas o módulo aparece e a sua posição na página |
| Atualização automática do conteúdo | Ativar ou desativar o módulo |
Pontos críticos a ter em conta:
- O conteúdo da parede depende de um serviço externo. Se a conta Taggbox expirar, for desativada ou o código for removido/alterado, a parede deixa de aparecer (ou aparece vazia) — o resto do módulo (introdução e ícones) continua a funcionar.
- O código de integração é um pequeno excerto técnico fornecido pela Taggbox. Deve ser colado tal como fornecido, sem alterações.
- A aparência e o comportamento da parede (deslocar, carregar mais publicações, abrir uma publicação) são controlados pela Taggbox, não pelo site.
- A área reservada à parede aparece no Figma como um espaço cinzento com a indicação “Integração Taggbox” — é apenas um marcador de lugar; o conteúdo real vem da Taggbox.
Nota: Os requisitos exatos da conta Taggbox (plano, limites, idiomas) e o comportamento quando o serviço está indisponível devem ser confirmados com o cliente antes do desenvolvimento.
Variantes
Section titled “Variantes”O módulo tem uma estrutura única (introdução + parede social). As diferenças entre páginas resultam de quais os campos opcionais que o editor preenche.
Variante 1 — Apresentação completa
Section titled “Variante 1 — Apresentação completa”Como editor, quero apresentar uma introdução com chamada às redes sociais e, logo abaixo, a parede de publicações, para incentivar o visitante a seguir e interagir com as redes sociais do hotel.
Elementos visíveis:
- Etiqueta curta em destaque (ex: “REDES SOCIAIS”)
- Título
- Texto de apoio
- Fila de botões redondos com os ícones das redes sociais do hotel
- Parede de publicações (Integração Taggbox) por baixo
Critérios de Aceitação:
- A introdução aparece centrada no topo do módulo
- Os botões de redes sociais abrem a respetiva página do hotel numa nova janela
- A parede de publicações aparece por baixo da introdução, ocupando toda a largura
- Quando o código da Taggbox está corretamente configurado, a parede mostra publicações reais
Variante 2 — Apenas parede social
Section titled “Variante 2 — Apenas parede social”Como editor, quero mostrar apenas a parede de publicações, sem texto introdutório, para usar o módulo numa página onde o contexto já foi dado por outro bloco.
Elementos visíveis:
- Parede de publicações (Integração Taggbox), sem a zona de introdução
Critérios de Aceitação:
- Quando a etiqueta, o título, o texto e os ícones não estão preenchidos, a zona de introdução não aparece
- A parede de publicações aparece sem espaço vazio por cima
Variante 3 — Apenas introdução e ícones (sem parede)
Section titled “Variante 3 — Apenas introdução e ícones (sem parede)”Como editor, quero mostrar a chamada às redes sociais sem a parede de publicações, para o caso de a conta Taggbox ainda não estar pronta.
Elementos visíveis:
- Etiqueta, título, texto e fila de botões de redes sociais
- Sem parede de publicações
Critérios de Aceitação:
- Quando o código da Taggbox não está preenchido, a parede não aparece
- O espaço da parede não fica visível vazio — o módulo termina na introdução
Interações do Utilizador
Section titled “Interações do Utilizador”A parte construída no site é estática (conteúdo gerido no backoffice). As únicas ações do visitante são clicar nos atalhos das redes sociais. A parede social é um conteúdo externo da Taggbox e o seu comportamento (deslocar, abrir publicações, carregar mais) é definido pela Taggbox.
| Interação | Descrição |
|---|---|
| Clicar num botão de rede social (Facebook, Instagram, YouTube, LinkedIn, …) | Abre a página da respetiva rede social do hotel numa nova janela |
| Interagir com a parede de publicações | Comportamento definido pela Taggbox (ex: deslocar, ver mais publicações). Não é controlado pelo site |
Elementos
Section titled “Elementos”Conteúdos geridos no backoffice para este módulo. Todos os campos da introdução estão posicionados antes do bloco da Integração Taggbox.
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Etiqueta | Título | Não | Texto curto em destaque por cima do título (ex: “REDES SOCIAIS”). O editor escolhe o nível de cabeçalho |
| Título | Título | Não | Título principal da introdução. O editor escolhe o nível de cabeçalho |
| Texto | Texto | Não | Pequeno texto de apoio por baixo do título |
| Links de redes sociais | Botões / Campos de ligação | Não | Lista dos atalhos para as páginas de redes sociais do hotel (ex: Facebook, Instagram, YouTube, LinkedIn). Cada item tem a rede e o respetivo endereço |
| Código de integração Taggbox | Texto (código) | Não | Excerto fornecido pela plataforma Taggbox que faz aparecer a parede de publicações. Colar exatamente como fornecido |
Nota: Todos os elementos são opcionais. O módulo adapta-se automaticamente à ausência de campos opcionais — os espaços ajustam-se sem deixar áreas vazias (ver Variantes 2 e 3). A origem dos links de redes sociais (definidos neste módulo ou herdados das definições globais do hotel) deve ser confirmada com a equipa antes do desenvolvimento.
Opções de Configuração
Section titled “Opções de Configuração”| Opção | Valores possíveis | Valor padrão | Descrição |
|---|---|---|---|
| Ativar / Desativar módulo | Ativo / Inativo | Ativo | Mostra ou esconde o módulo na página sem o apagar |
| Espaçamento superior/inferior | Definido pelo editor | Padrão do tema | Margens e espaçamentos verticais à volta do módulo (configuração comum a todos os módulos) |
Este módulo não tem opções de aspeto visual próprias além das comuns a todos os módulos. Todo o conteúdo é gerido nos campos indicados na secção Elementos. (A confirmar no desenvolvimento se serão necessárias opções adicionais, ex: tipo de fundo.)
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Zona de introdução | Bloco centrado com largura limitada (~588px), com mais espaço em redor | Bloco centrado mais estreito (~312px), tipos de letra e espaçamentos reduzidos |
| Título | Tamanho maior | Tamanho reduzido, ocupa mais linhas |
| Botões de redes sociais | Fila horizontal de botões redondos, centrada | Mantém-se em fila horizontal, centrada |
| Parede social (Taggbox) | Ocupa toda a largura do ecrã | Ocupa toda a largura do ecrã; a disposição interna das publicações é definida pela Taggbox |
O módulo adapta-se ao tamanho do ecrã: a introdução estreita e reduz no telemóvel; a parede social ocupa sempre toda a largura disponível.
Estados Visuais
Section titled “Estados Visuais”| Estado | Descrição |
|---|---|
| Inicial | A introdução aparece centrada no topo; a parede social aparece por baixo assim que carrega |
| Ao passar o rato num botão de rede social | O botão muda ligeiramente de aspeto para indicar que é clicável |
| Botão selecionado pelo teclado | O botão fica com um contorno visível para indicar que está selecionado |
| Campos de introdução vazios | A zona de introdução não aparece; o módulo mostra apenas a parede social |
| Código Taggbox em falta | A parede social não aparece; o módulo mostra apenas a introdução, sem espaço vazio |
| Parede social a carregar | A área pode aparecer momentaneamente vazia enquanto a Taggbox carrega o conteúdo |
| Serviço Taggbox indisponível | A parede pode não aparecer ou aparecer vazia — a confirmar o comportamento desejado com o cliente |
| Conteúdo extenso na introdução | O texto e o título ajustam-se em altura sem quebrar o alinhamento centrado |
| Módulo desativado | O módulo não aparece na página |
Acessibilidade
Section titled “Acessibilidade”- Os botões de redes sociais podem ser usados apenas com o teclado (tecla Tab para navegar, Enter para abrir) e têm uma descrição legível por leitores de ecrã (ex: “Facebook do hotel”, “Instagram do hotel”).
- Os ícones das redes sociais são meramente visuais — a informação é transmitida pela descrição acessível de cada botão.
- O título e a etiqueta usam níveis de cabeçalho corretos para que leitores de ecrã percebam a estrutura da página.
- O contraste entre texto/ícones e o fundo cumpre os requisitos de acessibilidade visual (mínimo 4.5:1) — a validar em todos os temas quando as variações por tema estiverem terminadas.
- A acessibilidade da parede social (Integração Taggbox) depende da plataforma externa Taggbox e deve ser verificada com o cliente.
O módulo adapta-se visualmente a cada hotel: cores de fundo, texto, etiqueta e botões de redes sociais seguem a identidade visual do hotel, assim como a tipografia dos títulos e do corpo de texto.
Os 8 sites suportados:
- Savoy Signature (site do grupo)
- Savoy Palace
- Royal Savoy
- Saccharum
- The Reserve
- Calheta Beach
- Gardens
- Hotel Next
⚠️ A rever: As variações por tema ainda não estão terminadas no Figma. O Figma atual mostra apenas uma versão base (etiqueta em tom roxo, título em dourado, botões com contorno roxo). As cores, tipografia e o tratamento da parede social por hotel têm de ser definidos e revistos antes do desenvolvimento. A aparência da parede social (Taggbox) é configurada na plataforma externa e pode não acompanhar automaticamente o tema do hotel — ponto a confirmar.
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-05-19 | Rascunho | Versão inicial criada a partir do Figma. Nota: variações por tema por terminar; integração Taggbox documentada |
| 2026-05-19 | Publicada | Publicada no Docmost (nova página) |