Nas Configurações do Help Center, você encontrará muitas opções de customização para ajudar a personalizar seu Help Center e controlar como ele aparece para seus clientes. Veja como configurar e visualizar alterações em um Help Center em tempo real.
Configurações gerais
Para configurar os idiomas suportados do Help Center, Domains, Analytics, Privacidade e imagens de redes sociais, vá para Settings > Help Center. Clique no Help Center que deseja configurar, seguido de Configure and style no canto direito.
Então, abra a aba General. 👇
Se você usar Multi Help Center, pode configurar as definições para cada Help Center separadamente.
Idiomas suportados
Para escolher um idioma padrão, vá para Settings > Help Center > Configure & Style, clique na aba General e abra Supported languages.
Então selecione seu idioma padrão e clique em Save and set live.
Depois de escolher seu Default language, a interface do seu Help Center será exibida no idioma que você definiu. Isso mudará o idioma de:
Prompt de busca na sua página inicial.
Contagem de artigos, autor e data da última modificação.
Prompt de reações em seus artigos.
Logo ‘We run on Intercom’ e mais.
Nota:
Você também pode suportar múltiplos idiomas no seu Help Center.
Se quiser mudar o idioma do Messenger, precisa fazer isso separadamente nas suas Messenger Settings.
Mesmo que seu Help Centre suporte apenas um idioma, ainda haverá uma opção de dropdown que mostra um único idioma e não é possível removê-la.
Domains
Use seu domain padrão
Quando você colocar seu Help Center no ar, disponibilizamos seu conteúdo por meio de um domain Intercom por padrão. Então, primeiro certifique-se de que seu Help Center está set live.
Depois vá para Settings > Help Center > Configure & Style, clique na aba General e abra Domains para obter sua "Default Help Center URL".
O nome do seu app fará parte da sua URL. Por exemplo, se o nome do seu app for ‘ExampleApp’, sua URL ficará assim:
Você pode editar a parte do nome do app da sua URL (ex: exampleapp) para o que quiser.
Definir um domain personalizado
Se preferir disponibilizar seu conteúdo por meio do seu próprio domain, você pode configurar um domain personalizado.
Vá ao seu provedor de DNS (ex: GoDaddy, Cloudflare, DNSimple ou Route53, etc.) e crie um registro CNAME com o host alvo custom.intercom.help. Criamos este guia para ajudar você ou seu engenheiro a configurar isso.
Nota:
Tanto subdomains (ex: help.exampleapp.io) quanto subpaths (ex: exampleapp.io/help) são suportados.
Alterações no DNS podem levar até 72 horas para fazer efeito, mas normalmente acontecem muito mais rápido.
Depois vá para Settings > Help Center > Configure & Style e abra Domains para inserir a URL do seu domain personalizado do Help Center e clique em Save and set live.
Você também pode optar por desativar a indexação por motores de busca e manter seus artigos privados.
Analytics
Para integrar o Google Analytics com seu Help Center e obter insights sobre o comportamento dos visitantes, você só precisa do seu GA4 Measurement ID.
Depois de copiar seu GA4 Measurement ID da sua conta do Google Analytics, vá para Settings > Help Center > Configure & Style e abra Analytics e cole isso em "Google Analytics Tracking ID".
Privacidade
Para restringir artigos apenas para usuários logados, defina o público do artigo como Users no painel de Detalhes do artigo. Uma vez que um artigo esteja definido como Users, ele fica visível apenas para pessoas que estão logadas no seu produto — visitantes e leads não o verão no seu Help Center ou nos resultados de busca. Vá para Settings > Help Center > Configure & Style e abra Privacy para inserir um link para sua página de login.
Quando um visitante ou lead tentar acessar um artigo restrito (definido apenas para Users), ele será redirecionado para a URL da página de login que você inseriu aqui, com um aviso incentivando-o a fazer login. Sem uma URL de página de login, nenhum redirecionamento ocorrerá.
Saiba mais sobre indexação por motores de busca.
Não é possível tornar o próprio Help Centre privado. Os clientes ainda poderão acessar seu Help Centre se você tornar todos os seus artigos privados, mas não poderão ver nenhum artigo até fazerem login.
Imagens para redes sociais
Favicon
De Settings > Help Center > Configure & Style > General > Social media images, você pode enviar um favicon. Este favicon aparece antes do título na aba do navegador dos seus clientes ao visitar seu site do Help Center.
Nota: Na página inicial do Help Center, o título da aba do navegador inclui automaticamente um prefixo gerado pelo sistema antes do nome do seu site (ex: "Home |" (para inglês). Este prefixo não pode ser removido ou personalizado pelos membros do workspace atualmente.
Proporção recomendada: 1:1. Máximo de 150KB, 588x588 pixels.
Imagem para redes sociais
Você também pode enviar uma imagem de alta resolução para redes sociais. A imagem para redes sociais aparece quando seu Help Center ou artigos são compartilhados no Facebook, Twitter ou qualquer outra plataforma de redes sociais.
Proporção recomendada: 1,91:1, 2MB, dimensões 1200 x 630.
Excluir Help Center
Esta opção está disponível apenas quando você tem múltiplos Help Centers, você não pode excluir seu Help Center original (padrão) do seu workspace.
Se este for seu único Help Center e você quiser removê-lo, você pode configurá-lo como Não ativo em vez disso.
Se você excluir um Help Center, não há como restaurá-lo.
Configurações de estilo
Para gerenciar o estilo do seu Help Center e como o conteúdo aparece na página inicial, coleções, artigos, cabeçalho e rodapé, vá para Configurações > Help Center > Configurar & Estilo e abra a aba Estilo.
Se você usar Multi Help Center, você pode configurar as configurações de Estilo para cada Help Center separadamente.
Importe sua marca
Vá para Configurações > Help Center > Configurar & Estilo, clique em Estilo e abra Importe sua marca para inserir a URL da sua marca. O Intercom então aplicará automaticamente o estilo do seu Help Center para parecer com sua marca.
Uma vez que a marca foi importada, aplicamos automaticamente o logo e as cores dela.
Você precisará fornecer a URL correta ao importar sua marca. Normalmente, este é o domínio de nível superior do seu site. Por exemplo, "example.com" em vez de "subdomain.example.com". Alguns domínios não são acessíveis ou não funcionam, e neste caso você verá uma mensagem de erro.
Você também verá as cores que foram importadas ao lado de todas as opções de cores na seção Bloco Hero. Isso permite que você edite facilmente as cores de diferentes partes do Help Center, sem perder o acesso às cores da sua marca.
Certifique-se de clicar em Salvar e publicar, pois suas alterações não serão salvas automaticamente.
Adicionando uma imagem hero
Se você escolher incluir uma imagem Hero, é importante notar que a imagem é responsiva. Isso significa que ela se ajustará automaticamente para preencher toda a área do cabeçalho. Para evitar que sua imagem seja cortada ou esticada, você precisará combinar a proporção da imagem com a altura do cabeçalho escolhida.
Dimensões e proporções recomendadas
Use esta tabela para garantir que sua imagem corresponda à altura do cabeçalho que você selecionou nas configurações:
Tamanho do cabeçalho | Altura | Proporção recomendada | Dimensões de exemplo |
Pequeno | 245px | 6:1 | 1470 x 245px |
Médio | 360px | 4:1 | 1440 x 360px |
Grande | 480px | 3:1 | 1440 x 480px |
Elementos compartilhados
Cor de fundo do corpo
Vá para Configurações > Help Center > Configurar & Estilo, clique na aba Estilo e abra Elementos compartilhados para alterar a cor de fundo do corpo e todas as páginas do Help Center (início, coleção, artigo, busca, páginas de erro, etc.) se adaptarão de acordo.
Cor da ação
Então defina uma cor da ação que contraste bem com o fundo do corpo, pois será usada em botões, links e outros elementos.
Nota:
A cor da ação não será atualizada para ícones enviados nos formatos JPEG/PNG/GIF.
A cor será atualizada assim que seu Help Center for publicado.
Estilo de design
Escolha entre o estilo de design Cartão ou Flutuante que se aplica a Coleções e Artigos em todas as páginas.
Quando você escolher o estilo de design de cartão, a cor de fundo do cartão será gerada automaticamente para fornecer contraste suficiente com a cor de fundo do Help Center. A cor de fundo do cartão não pode ser personalizada.
Raio do canto
Então defina o raio do canto para elementos em suas Coleções, Artigos e estados de foco (quando passar o mouse sobre Artigos dentro de uma Coleção).
Fonte
Escolha entre uma lista de Google Fonts pré-carregadas para uso no seu Help Center:
Fonte primária - Usada na Mensagem de Boas-vindas, títulos e cabeçalhos.
Fonte secundária - Usada para descrições, texto do corpo do artigo e todo o outro texto
Opções de fonte disponíveis
Amargo
Inter
Lato
Lora
Montserrat
Open Sans
Oswald
Playfair Display
Poppins
Noto Sans
Noto Serif
Raleway
Roboto
Roboto Mono
Roboto Slab
Nota:
A fonte selecionada não se aplica ao Messenger, que sempre usará a fonte do sistema.
A fonte que usávamos anteriormente proxima nova foi removida em junho de 2023; você pode usar Montserrat ou Open Sans para obter um visual semelhante.
Ou, clique em Manage custom fonts para enviar sua própria custom font que combine com o estilo da sua marca.
Mostrar autores do artigo
Mostrar ou ocultar autores do artigo na Homepage, Collections e Articles acessando Settings > Help Center > Configure & Style.
Clique na aba Styling e abra Shared elements, depois role para baixo para alternar "Mostrar autores do artigo".
Cabeçalho
Em Settings > Help Center > Configure & Style, clique na aba Styling e abra Header, para projetar a seção superior do cabeçalho com seu logo, título da página/nome da empresa e quaisquer links do cabeçalho.
O Cabeçalho também pode ser configurado separadamente para todos os seus supported languages.
Logo
Envie uma versão em alta resolução do seu logo.
Proporção recomendada: 5:1. Máximo de 1MB, largura/altura máxima de 720px.
Se você adicionar um logo ao seu Help Center Header, ele substituirá o Título da Página. Se você adicionar um logo ao seu Help Center Footer, ele substituirá o Título da Página.
Links do cabeçalho
Você pode adicionar até 3 links para outras páginas da web - como seu blog ou comunidade.
O Cabeçalho empurrará outros conteúdos para baixo em vez de ficar sobreposto a outros conteúdos.
Bloco Hero
O bloco Hero é a grande área de banner no topo da sua homepage do Help Center — a seção que contém sua mensagem de boas-vindas e barra de pesquisa. Ele fica abaixo do Header (que exibe seu logo e links de navegação) e acima do restante do conteúdo da página.
Mensagem de boas-vindas
Em Settings > Help Center > Configure & Style, clique na aba Styling e abra Hero block para adicionar atributos do usuário à welcome message na homepage do seu Help Center.
Ele incluirá o atributo do usuário se o cliente estiver logado. Se o cliente for um visitante ou lead (não logado), o valor de fallback que você definiu será exibido. Por exemplo, definir um fallback de "there" significa que um visitante verá "Hi there!" em vez de uma mensagem de boas-vindas em branco ou quebrada.
Nota:
Os atributos do usuário só estarão presentes se o cliente tiver configurado os dados do usuário de alguma forma. Exemplo: Via the javascript API, Setting up logged in users, etc.
A mensagem de boas-vindas pode ser configurada em todos os seus supported languages.
Nota: A mensagem de boas-vindas do bloco Hero não pode ficar em branco. O bloco Hero é um componente principal da homepage do Help Center e sempre exibirá algum texto — se o campo da mensagem de boas-vindas ficar vazio, um texto padrão ou de espaço reservado aparecerá em seu lugar. Certifique-se de definir uma mensagem de boas-vindas para controlar o que seus clientes veem.
Fundo
A cor de fundo que você escolher será aplicada a estes itens:
Cor do ícone do Avatar (quando nenhuma imagem estiver disponível).
Links em artigos.
A cor e o gradiente do seu bloco Hero, ou upload de imagem.
Desvanecer fundo (se estiver usando um gradiente de cor).
Atualmente, por padrão, todos os avatares são transparentes. No entanto, os avatares não serão transparentes:
Se o avatar for exibido dentro de um grupo de avatar (e esse grupo não incluir Fin avatar)
Se esse grupo de avatar contiver mais de um avatar
Cor do texto
A cor do texto que você escolher será aplicada a:
Links no bloco Hero.
Texto na barra de Search.
Proporção recomendada da imagem Hero: 5:2. Tamanho máximo do arquivo 2MB, largura/altura máxima de 3000px. Isso aparece no topo da sua homepage e em cada página do seu Help Center - então adicione uma imagem forte que represente sua marca.
"Fade background" aparece apenas na homepage do Help Center.
Altura
Escolha uma altura geral para o cabeçalho do Help Center na homepage. Altura mínima de 245 pixels e altura máxima de 600 pixels.
Barra de Search
Escolha entre três tamanhos diferentes de Barra de Search e depois selecione o alinhamento:
Vertical - esquerda ou centro.
Horizontal - topo, centro ou inferior.
Curto |  |
Médio |  |
Longo |  |
Raio do canto
Você também pode selecionar um Raio do canto para a barra de Search. Mínimo de 0 pixels e máximo de 30 pixels.
Layout e seções
Em Settings > Help Center > Configure & Style, clique na aba Styling e abra Layout e seções para projetar como as Collections são exibidas e escolha habilitar seções para Articles, Content e Tickets Portal na homepage. Clique em Edit para configurar cada uma.
Seção de Collections
Nota: As Collections precisam ter artigos publicados em todos os idiomas suportados pelo seu Help Center. Se uma Collection tiver apenas uma versão em inglês publicada, ela não aparecerá nas configurações de styling, pois essas configurações são universais para todos os idiomas do Help Center. Para resolver isso, navegue até a collection e certifique-se de ter criado e publicado pelo menos um artigo para cada idioma suportado pelo seu Help Center.
Layout
Escolha entre layout de 1, 2 ou 3 colunas.
Então selecione um estilo de cartão para Collections:
Clássico - O estilo atual do cartão de collection.
Visual - Usa um espaço maior para ícones e imagens.
Compacto - Mostra as informações mais importantes usando o mínimo de espaço.
Quando você clicar em um estilo de cartão, uma pré-visualização será mostrada automaticamente à direita.
Nota: O layout de collections compacto requer o plano Expert.
Todos os estilos de cartão são responsivos e ficam ótimos em qualquer resolução, incluindo mobile, desktop e tablet, que você também pode pré-visualizar à direita usando o menu suspenso e selecionando a opção que deseja ver.
Design
Use ícones, imagens ou apenas texto para seus cartões de Collection.
Se usar ícones, você pode alterar as seguintes cores:
Cor do ícone: selecione a cor usando o seletor de cores ou insira um código hex.
Fundo do ícone:
Cor - selecione a cor usando o seletor de cores ou insira um código hex.
Imagem - Faça upload de uma imagem.
Gradiente - Crie um gradiente usando até três cores com o seletor de cores ou insira um código hex.
Nota:
Proporção recomendada: 1:1
Dimensões recomendadas: altura/largura máxima de 48px
A seleção de design determina as opções disponíveis para atualizações de Collection. Por exemplo, selecionar Imagens permitirá que você escolha imagens enviadas em vez de ícones ao atualizar Collections individuais.
Se usar imagens, isso preencherá o fundo do cartão da collection, então funciona muito bem com o template visual.
Cartões de collections individuais podem ser estilizados com imagens escolhendo a collection em um menu suspenso. Ou estilos ainda podem ser aplicados a todas as collections escolhendo a opção All collections no menu suspenso, isso sobrescreverá quaisquer estilos individuais.
Nota:
A cor do ícone só pode ser alterada em ícones padrão ou ícones personalizados que você enviou no formato SVG.
Uploads SVG serão renderizados em uma única cor.
A cor de fundo é opcional e pode ser desativada.
Seção de Articles
Adicione uma Seção de Articles na homepage do seu Help Center.
Uma vez ativado, clique em Editar para selecionar o idioma desses artigos, escolha quantas colunas exibir, dê um título a esta seção e então selecione artigos do seu Help Center. Você pode selecionar até 12 artigos publicados no seu Help Center.
Nota:
Para cada idioma, você pode selecionar apenas artigos publicados que tenham a tradução nesse idioma.
Artigos com regras de audience targeting aplicadas podem ser selecionados e exibidos aqui, mas só aparecerão para o cliente se corresponderem às regras de audiência.
A pré-visualização exibirá apenas os links dos artigos para o idioma padrão.
Seção de conteúdo
Adicione uma Seção de conteúdo personalizável à página inicial do seu Help Center. Este é um ótimo lugar para destacar um novo recurso, webinar ou call-to-action para seus clientes. Uma vez ativado, clique em Editar para personalizar a seção de conteúdo.
Crie conteúdo localizado selecionando um dos seus idiomas suportados.
Adicione um título opcional, descrição e botão de call-to-action ao cartão de conteúdo.
Então role para baixo para estilizar:
Design - Escolha entre cartão ou tela cheia.
Fundo - Selecione uma cor, imagem ou gradiente.
Cor do texto - Selecione a cor do texto para o título e descrição.
Veja como a seção de conteúdo aparecerá na página inicial com a pré-visualização à direita. A pré-visualização será exibida apenas no seu idioma padrão.
Lembre-se de selecionar Salvar e publicar quando estiver pronto para adicionar a seção de conteúdo ao seu Help Center.
Portal de Tickets
O portal de tickets pode ser ativado se você estiver usando Intercom tickets e quiser fornecer às organizações dos seus clientes uma visão em tempo real de todos os seus tickets em um só lugar.
Ordem
Para exibir Artigos acima ou abaixo das suas Coleções na página inicial, basta usar a ferramenta de arrastar e soltar ao lado de cada seção para reordená-las.
Página de coleção
Descrições de conteúdo
Em Configurações > Help Center > Configurar & Estilo, clique na aba Estilo e abra Página de coleção para mostrar ou ocultar "Descrições de conteúdo" em cada uma das suas coleções. Ocultar descrições facilita a visualização dos seus artigos, mostrar descrições ajuda os clientes a entender o que esperar dentro daquela coleção.
Nota: A seção de coleções não pode ser desativada como outras seções.
Página do artigo
Sumário
Em Configurações > Help Center > Configurar & Estilo, clique na aba Estilo e abra Página do artigo para ativar ou desativar um sumário em cada artigo usando qualquer título H1 ou H2 nos seus artigos.
Artigos relacionados
Você também pode exibir até 5 artigos relacionados abaixo de cada artigo no seu Help Center.
Rodapé
Personalize a aparência do rodapé do seu Help Center com três modelos possíveis; simples, clássico ou multinível. Personalize seu rodapé fazendo upload de um logo, adicionando até 16 links de redes sociais e agrupando links do rodapé no modelo escolhido para fácil organização.
Este rodapé será consistente em todas as páginas do seu Help Center (página inicial, coleções, artigos).
Selecionando um modelo de rodapé
Em Configurações > Help Center > Configurar & Estilo, clique na aba Estilo e abra Rodapé onde você pode personalizar completamente o rodapé do seu Help Center para estar alinhado à sua marca.
Controle o sutil link 'Powered by Intercom' no rodapé dos artigos do seu Help Center navegando até Configurações > Geral.
Procure a seção "Intercom Attribution Message" e use o interruptor para ativar ou desativar.
Nota: Este interruptor controla simultaneamente os e-mails enviados e os artigos do Help Center. Não é possível ativar o link para o site da Intercom em um e desativá-lo no outro.
Dimensões da imagem do News Center
Use estas dimensões recomendadas ao enviar imagens para o seu News Center.
Logo
Proporção recomendada: 5:1.
Imagem do cabeçalho
Proporção recomendada: 5:2. Para renderização nítida em telas grandes, aponte para aproximadamente 3000 × 1200px.
Favicon
Proporção recomendada: 1:1. Máximo de 150KB.
Pré-visualização
É fácil visualizar seu Help Center com a marca e ver quaisquer alterações feitas em tempo real antes de publicá-las, usando a Pré-visualização para Página inicial, Coleções e Artigos.
Você também pode selecionar diferentes resoluções para pré-visualizar em dispositivos Móvel, Tablet e Desktop.
Help Center não suporta incorporação de formulários, iFrames ou HTML personalizado.