En Configuración de Help Center, encontrarás muchas opciones de personalización para ayudarte a marcar tu Help Center y controlar cómo aparece para tus clientes. Aquí te mostramos cómo configurar y previsualizar cambios en un Help Center en tiempo real.
Configuración general
Para configurar los idiomas soportados, dominios, analíticas, privacidad e imágenes de redes sociales de tu Help Center, ve a Settings > Help Center. Haz clic en el Help Center que quieres configurar, seguido de Configure and style en la esquina derecha.
Luego, abre la pestaña General. 👇
Si usas Multi Help Center, puedes configurar los ajustes para cada Help Center por separado.
Idiomas soportados
Para elegir un idioma predeterminado, ve a Settings > Help Center > Configure & Style, haz clic en la pestaña General y abre Supported languages.
Luego selecciona tu idioma predeterminado y haz clic en Save and set live.
Una vez que elijas tu Default language, la interfaz de usuario de tu Help Center se mostrará en el idioma que configuraste. Esto cambiará el idioma de tu:
Indicador de búsqueda en tu página principal.
Conteo de artículos, autor y fecha de última modificación.
Indicador de reacciones en tus artículos.
Logo ‘We run on Intercom’ y más.
Nota:
También puedes soportar múltiples idiomas en tu Help Center.
Si deseas cambiar el idioma del Messenger, debes hacerlo por separado en tu Messenger Settings.
Aunque tu Help Center solo soporte un idioma, seguirá habiendo una opción desplegable que muestra un solo idioma y no es posible eliminarla.
Dominios
Usa tu dominio predeterminado
Cuando pones tu Help Center en vivo, hacemos que tu contenido esté disponible a través de un dominio de Intercom por defecto. Así que primero asegúrate de que tu Help Center esté set live.
Luego ve a Settings > Help Center > Configure & Style, haz clic en la pestaña General y abre Domains para obtener tu "Default Help Center URL".
El nombre de tu app formará parte de tu URL. Por ejemplo, si el nombre de tu app es ‘ExampleApp’, tu URL se verá así:
Puedes editar la parte del nombre de la app en tu URL (por ejemplo, exampleapp) a lo que quieras.
Configura un dominio personalizado
Si prefieres hacer que tu contenido esté disponible a través de tu propio dominio, puedes configurar un dominio personalizado.
Ve a tu proveedor de DNS (por ejemplo, GoDaddy, Cloudflare, DNSimple o Route53, etc.) y crea un registro CNAME con un host objetivo de custom.intercom.help. Hemos creado esta guía para ayudarte a ti o a tu ingeniero a configurarlo.
Nota:
Se soportan tanto subdominios (por ejemplo, help.exampleapp.io) como subrutas (por ejemplo, exampleapp.io/help).
Los cambios en DNS pueden tardar hasta 72 horas en surtir efecto, pero normalmente ocurren mucho más rápido.
Luego ve a Settings > Help Center > Configure & Style y abre Domains para ingresar la URL de tu dominio personalizado de Help Center y haz clic en Save and set live.
También puedes elegir desactivar la indexación en motores de búsqueda y mantener tus artículos privados.
Analíticas
Para integrar Google Analytics con tu Help Center y obtener información sobre el comportamiento de tus visitantes, solo necesitas tu ID de medición GA4.
Una vez que hayas copiado tu ID de medición GA4 desde tu cuenta de Google Analytics, ve a Settings > Help Center > Configure & Style y abre Analytics luego pega esto en "Google Analytics Tracking ID".
Privacidad
Para restringir los artículos solo a Users conectados, configura la audiencia del artículo en Users en el panel de Detalles del artículo. Una vez que un artículo está configurado para Users, solo es visible para personas que hayan iniciado sesión en tu producto; los visitantes y leads no lo verán en tu Help Center ni en los resultados de búsqueda. Ve a Settings > Help Center > Configure & Style y abre Privacy para ingresar un enlace a tu página de inicio de sesión.
Cuando un visitante o lead intenta acceder a un artículo restringido (configurado solo para Users), serán redirigidos a la URL de la página de inicio de sesión que hayas ingresado aquí, con un mensaje que les anima a iniciar sesión. Sin una URL de página de inicio de sesión, no ocurrirá ninguna redirección.
Aprende sobre indexación en motores de búsqueda.
No es posible hacer que el Help Center sea privado. Los clientes aún podrán acceder a tu Help Center si haces todos tus artículos privados, pero no podrán ver ningún artículo hasta que inicien sesión.
Imágenes para redes sociales
Favicon
Desde Settings > Help Center > Configure & Style > General > Social media images, puedes subir un favicon. Este favicon aparece antes del título en la pestaña del navegador de tus clientes cuando visitan el sitio web de tu Help Center.
Nota: En la página principal del Help Center, el título de la pestaña del navegador incluye automáticamente un prefijo generado por el sistema antes del nombre de tu sitio (por ejemplo, "Home |" (para inglés). Actualmente, este prefijo no puede ser eliminado ni personalizado por los compañeros de equipo del espacio de trabajo.
Proporción recomendada: 1:1. Máximo 150KB, dimensiones máximas 588x588.
Imagen para redes sociales
También puedes subir una imagen de alta resolución para social media image. La imagen para redes sociales aparece cuando tu Help Center o artículos se comparten en Facebook, Twitter o cualquier otra plataforma de redes sociales.
Proporción recomendada: 1.91:1, 2MB, dimensiones 1200 x 630.
Eliminar Help Center
Esta opción solo está disponible cuando tienes múltiples Help Centers, no puedes eliminar tu Help Center original (predeterminado) de tu espacio de trabajo.
Si este es tu único Help Center y quieres eliminarlo, puedes configurarlo como No activo en su lugar.
Si eliminas un Help Center, no hay forma de restaurarlo.
Configuración de estilo
Para administrar el estilo de tu Help Center y cómo aparece el contenido en la página principal, colecciones, artículos, encabezado y pie de página, ve a Configuración > Help Center > Configurar y Estilo y abre la pestaña Estilo.
Si usas Multi Help Center, puedes configurar la configuración de estilo para cada Help Center por separado.
Importa tu marca
Ve a Configuración > Help Center > Configurar y Estilo, haz clic en Estilo y abre Importa tu marca para ingresar la URL de tu marca. Intercom aplicará automáticamente el estilo de tu Help Center para que se parezca a tu marca.
Una vez que la marca ha sido importada, aplicamos automáticamente el logo y los colores de esta.
Necesitarás proporcionar la URL correcta al importar tu marca. Normalmente, este es el dominio de nivel superior de tu sitio web. Por ejemplo, "example.com" en lugar de "subdomain.example.com". Algunos dominios no son accesibles o no funcionan, y en ese caso verás un mensaje de error.
También verás los colores que se importaron junto a todas las opciones de color en la sección Bloque Hero. Esto te permite editar fácilmente los colores de diferentes partes del Help Center, sin perder acceso a los colores de tu marca.
Asegúrate de hacer clic en Guardar y publicar, ya que tus cambios no se guardarán automáticamente.
Agregar una imagen heroica
Si eliges incluir una imagen Hero, es importante tener en cuenta que la imagen es adaptable. Esto significa que se ajustará automáticamente para llenar toda el área del encabezado. Para evitar que tu imagen se recorte o estire, deberás hacer coincidir la relación de aspecto de tu imagen con la altura del encabezado que hayas elegido.
Dimensiones y proporciones recomendadas
Usa esta tabla para asegurarte de que tu imagen coincida con la altura del encabezado que seleccionaste en tu configuración:
Tamaño del encabezado | Altura | Proporción de aspecto recomendada | Dimensiones de ejemplo |
Pequeño | 245px | 6:1 | 1470 x 245px |
Mediano | 360px | 4:1 | 1440 x 360px |
Grande | 480px | 3:1 | 1440 x 480px |
Elementos compartidos
Color de fondo del cuerpo
Ve a Configuración > Help Center > Configurar y Estilo, haz clic en la pestaña Estilo y abre Elementos compartidos para cambiar el color de fondo del cuerpo y todas las páginas del Help Center (inicio, colección, artículo, búsqueda, páginas de error, etc.) se adaptarán en consecuencia.
Color de acción
Luego establece un color de acción que contraste bien con el fondo del cuerpo, ya que se usará en botones, enlaces y otros elementos.
Nota:
El color de acción no se actualizará para los íconos subidos en formato JPEG/PNG/GIF.
El color se actualizará una vez que tu Help Center esté publicado.
Estilo de diseño
Elige entre el estilo de diseño Tarjeta o Flotante que se aplica a Colecciones y Artículos en todas las páginas.
Cuando eliges el estilo de diseño de tarjeta, el color de fondo de la tarjeta se generará automáticamente para proporcionar suficiente contraste con el color de fondo del Help Center. El color de fondo de la tarjeta no se puede personalizar.
Radio de esquina
Luego establece el radio de esquina para los elementos en tus Colecciones, Artículos y estados hover (cuando pasas el cursor sobre Artículos dentro de una Colección).
Fuente
Elige de una lista de Google Fonts precargadas para usar en tu Help Center:
Fuente primaria - Usada en Mensaje de bienvenida, títulos y encabezados.
Fuente secundaria - Usada para descripciones, texto del cuerpo del artículo y todo el texto restante
Opciones de fuente disponibles
Amargo
Inter
Lato
Lora
Montserrat
Open Sans
Oswald
Playfair Display
Poppins
Noto Sans
Noto Serif
Raleway
Roboto
Roboto Mono
Roboto Slab
Nota:
La fuente seleccionada no se aplica al Messenger, que siempre usará la fuente del sistema.
La fuente que usamos anteriormente proxima nova se eliminó en junio de 2023; puedes usar Montserrat o Open Sans para lograr un aspecto similar.
O haz clic en Manage custom fonts para subir tu propia custom font que coincida con el estilo de tu marca.
Mostrar autores del artículo
Muestra u oculta los autores del artículo en la Homepage, Collections y Articles yendo a Settings > Help Center > Configure & Style.
Haz clic en la pestaña Styling y abre Shared elements, luego desplázate hacia abajo para activar "Mostrar autores del artículo".
Encabezado
Desde Settings > Help Center > Configure & Style haz clic en la pestaña Styling y abre Header, para diseñar la sección superior del encabezado con tu logo, título de la página/nombre de la empresa y cualquier enlace del encabezado.
El Header también puede configurarse por separado para todos tus supported languages.
Logo
Sube una versión de alta resolución de tu logo.
Proporción recomendada: 5:1. Máximo 1MB, 720px de ancho/alto máximo.
Si agregas un logo al Header de tu Help Center, reemplazará el título de la página. Si agregas un logo al Footer de tu Help Center, reemplazará el título de la página.
Enlaces del Header
Puedes agregar hasta 3 enlaces a otras páginas web, como tu blog o comunidad.
El Header empujará el otro contenido hacia abajo en lugar de superponerse al contenido.
Bloque Hero
El bloque Hero es el área grande del banner en la parte superior de la página principal de tu Help Center — la sección que contiene tu mensaje de bienvenida y la barra de búsqueda. Está debajo del Header (que muestra tu logo y enlaces de navegación) y encima del resto del contenido de la página.
Mensaje de bienvenida
Desde Settings > Help Center > Configure & Style, haz clic en la pestaña Styling y abre Hero block para agregar atributos de usuario al mensaje de bienvenida en la página principal de tu Help Center.
Incluirá el atributo de usuario si el cliente ha iniciado sesión. Si el cliente es un visitante o lead (no ha iniciado sesión), se mostrará el valor alternativo que hayas configurado. Por ejemplo, configurar un valor alternativo de "there" significa que un visitante verá "¡Hola there!" en lugar de un mensaje de bienvenida vacío o roto.
Nota:
Los atributos de usuario solo estarán presentes si el cliente ha configurado los datos de usuario de alguna manera. Ejemplo: A través del API de javascript, Configuración de usuarios con sesión iniciada, etc.
El mensaje de bienvenida puede configurarse en todos tus supported languages.
Nota: El mensaje de bienvenida del bloque Hero no puede quedar en blanco. El bloque Hero es un componente principal de la página principal del Help Center y siempre mostrará algún texto — si el campo del mensaje de bienvenida queda vacío, aparecerá texto predeterminado o de marcador de posición. Asegúrate de establecer un mensaje de bienvenida para controlar lo que ven tus clientes.
Fondo
El color de fondo que elijas se aplicará a estos elementos:
Color del icono del avatar (cuando no hay imagen disponible).
Enlaces en artículos.
El color y degradado de tu bloque Hero, o carga de imagen.
Desvanecer fondo (si usas un degradado de color).
Actualmente, por defecto, todos los avatares son transparentes. Sin embargo, los avatares no serán transparentes:
Si el avatar se muestra dentro de un grupo de avatares (y ese grupo no incluye avatar Fin)
Si ese grupo de avatares contiene más de un avatar
Color del texto
El color del texto que elijas se aplicará a:
Enlaces en el bloque Hero.
Texto en la barra de Search.
Imagen Hero proporción recomendada: 5:2. Tamaño máximo de archivo 2MB, ancho/alto máximo de 3000px. Aparece en la parte superior de tu página principal y en cada página de tu Help Center, así que añade una imagen fuerte que represente tu marca.
"Fondo desvanecido" aparece solo en la página principal del Help Center.
Altura
Elige una altura total para el encabezado del Help Center en la página principal. Altura mínima de 245 píxeles y máxima de 600 píxeles.
Barra de Search
Elige entre tres tamaños diferentes de barra de Search, y luego selecciona la alineación:
Vertical - izquierda o centro.
Horizontal - arriba, centro o abajo.
Corta |  |
Mediana |  |
Larga |  |
Radio de esquina
También puedes seleccionar un radio de esquina para la barra de Search. Mínimo 0 píxeles y máximo 30 píxeles.
Diseño y secciones
Desde Settings > Help Center > Configure & Style, haz clic en la pestaña Styling y abre Diseño y secciones para diseñar cómo se muestran las Collections y elegir habilitar secciones para Articles, Content y Tickets Portal en la página principal. Haz clic en Edit para configurar cada una.
Sección de Collections
Nota: Las Collections deben tener artículos publicados en todos los idiomas que soporta su Help Center. Si una Collection solo tiene una versión en inglés publicada, no aparecerá en la configuración de estilo, ya que esas configuraciones son universales para todos los idiomas del Help Center. Para resolverlo, navega a la collection y asegúrate de haber creado y publicado al menos un artículo para cada idioma que soporte tu Help Center.
Diseño
Elige entre un diseño de 1, 2 o 3 columnas.
Luego selecciona un estilo de tarjeta para Collections:
Clásico - El estilo actual de tarjeta de collection.
Visual - Usa un espacio más grande para iconos e imágenes.
Compacto - Muestra la información más importante usando el mínimo espacio.
Cuando haces clic en un estilo de tarjeta, se mostrará una vista previa automáticamente a la derecha.
Nota: El diseño de collections compacto requiere el plan Expert.
Todos los estilos de tarjeta son responsivos y se ven bien en cualquier resolución, incluyendo móvil, escritorio y tablet, que también puedes previsualizar a la derecha usando el menú desplegable y seleccionando la opción que quieres ver.
Diseño
Usa iconos, imágenes o solo texto para las tarjetas de tu Collection.
Si usas iconos, puedes cambiar los siguientes colores:
Color del icono: selecciona el color usando el selector o ingresa un código hex.
Fondo del icono:
Color - selecciona el color usando el selector o ingresa un código hex.
Imagen - sube una imagen.
Degradado - crea un degradado usando hasta tres colores con el selector o ingresa un código hex.
Nota:
Proporción recomendada: 1:1
Dimensiones recomendadas: máximo 48px de alto/ancho
La selección de diseño determina las opciones disponibles para las actualizaciones de Collections. Por ejemplo, seleccionar Imágenes te permitirá elegir imágenes subidas en lugar de iconos al actualizar Collections individuales.
Si usas imágenes, esto llenará el fondo de la tarjeta de la collection, por lo que funciona muy bien con la plantilla visual.
Las tarjetas de collections individuales pueden ser estilizadas con imágenes eligiendo la collection desde un menú desplegable. O los estilos pueden aplicarse a todas las collections eligiendo la opción All collections en el menú desplegable, esto sobrescribirá cualquier estilo individual.
Nota:
El color del icono solo puede cambiarse en iconos predeterminados o iconos personalizados que hayas subido en formato SVG.
Las subidas SVG se mostrarán en un solo color.
El color de fondo es opcional y puede desactivarse.
Sección de Articles
Agrega una sección de Articles en la página principal de tu Help Center.
Una vez habilitado, haz clic en Editar para seleccionar la configuración regional de esos artículos, elegir cuántas columnas mostrar, darle un título a esta sección y luego seleccionar artículos de tu Help Center. Puedes seleccionar hasta 12 artículos publicados en tu Help Center.
Nota:
Para cada configuración regional, solo puedes seleccionar artículos publicados que tengan la traducción en ese idioma.
Los artículos con reglas de audience targeting aplicadas pueden ser seleccionados y mostrados aquí, pero solo aparecerán al cliente si coinciden con las reglas de audiencia.
La vista previa solo mostrará los enlaces de los artículos para la configuración regional predeterminada.
Sección de contenido
Agrega una sección de contenido personalizable a la página principal de tu Help Center. Este es un excelente lugar para destacar una nueva función, seminario web o llamada a la acción para tus clientes. Una vez habilitado, haz clic en Editar para personalizar la sección de contenido.
Crea contenido localizado seleccionando uno de tus idiomas soportados.
Agrega un título opcional, descripción y botón de llamada a la acción a la tarjeta de contenido.
Luego desplázate hacia abajo para estilizar:
Diseño - Elige entre tarjeta o pantalla completa.
Fondo - Selecciona un color, imagen o degradado.
Color de texto - Selecciona el color del texto para el título y la descripción.
Ve cómo aparecerá la sección de contenido en la página principal con la vista previa a la derecha. La vista previa solo se mostrará en tu idioma predeterminado.
Recuerda seleccionar Guardar y publicar cuando estés listo para agregar la sección de contenido a tu Help Center.
Portal de Tickets
El portal de tickets puede habilitarse si estás usando Intercom tickets y deseas proporcionar a las organizaciones de tus clientes una vista en tiempo real de todos sus tickets en un solo lugar.
Orden
Para mostrar Artículos arriba o abajo de tus Colecciones en la página principal, simplemente usa la herramienta de arrastrar y soltar junto a cada sección para reordenarlas.
Página de colección
Descripciones de contenido
Desde Configuración > Help Center > Configurar y Estilo, haz clic en la pestaña de Estilo y abre Página de colección para mostrar u ocultar "Descripciones de contenido" en cada una de tus colecciones. Ocultar descripciones facilita escanear tus artículos, mostrar descripciones ayuda a los clientes a entender qué esperar dentro de esa colección.
Nota: La sección de colecciones no puede desactivarse como otras secciones.
Página de artículo
Tabla de contenidos
Desde Configuración > Help Center > Configurar y Estilo, haz clic en la pestaña de Estilo y abre Página de artículo para habilitar o deshabilitar una tabla de contenidos en cada artículo usando cualquier encabezado H1 o H2 en tus artículos.
Artículos relacionados
También puedes mostrar hasta 5 artículos relacionados debajo de cada artículo en tu Help Center.
Pie de página
Personaliza el aspecto del pie de página de tu Help Center con tres posibles plantillas; simple, clásico o multinivel. Marca tu pie de página subiendo un logo, agregando hasta 16 enlaces de redes sociales y agrupando enlaces del pie de página en la plantilla elegida para una fácil organización.
Este pie de página será consistente en todas las páginas de tu Help Center (página principal, colecciones, artículos).
Seleccionar una plantilla de pie de página
Desde Configuración > Help Center > Configurar y Estilo, haz clic en la pestaña de Estilo y abre Pie de página donde puedes personalizar completamente el pie de página de tu Help Center para que esté en línea con la marca.
Controla el sutil enlace 'Powered by Intercom' en el pie de página de los artículos de tu Help Center navegando a Configuración > General.
Busca la sección "Intercom Attribution Message" y usa el interruptor para activarlo o desactivarlo.
Nota: Este interruptor controla simultáneamente los correos electrónicos salientes y los artículos del Help Center. No es posible habilitar el enlace al sitio web de Intercom en uno mientras se desactiva en el otro.
Dimensiones de imagen del News Center
Usa estas dimensiones recomendadas al subir imágenes a tu News Center.
Logo
Proporción recomendada: 5:1.
Imagen de encabezado
Proporción recomendada: 5:2. Para una representación nítida en pantallas grandes, apunta a aproximadamente 3000 × 1200px.
Favicon
Proporción recomendada: 1:1. Máximo 150KB.
Vista previa
Es fácil visualizar tu Help Center con marca y ver cualquier cambio que hayas hecho en tiempo real antes de publicarlos, usando la Vista previa para la página principal, colecciones y artículos.
También puedes seleccionar diferentes resoluciones para previsualizar en dispositivos Móvil, Tableta y Escritorio.
Help Center no soporta la inserción de formularios, iFrames o HTML personalizado.