En la configuración del 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 Centre 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.
Configurar 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 han 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 Centre sea privado. Los clientes aún podrán acceder a tu Help Centre si haces que todos tus artículos sean 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 gestionar 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 coincida con 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 heroica, 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 proporció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).
Nota: Los íconos personalizados subidos a las tarjetas de colección se tratan como imágenes independientes y no heredan automáticamente el radio de esquina configurado aquí. Para lograr esquinas redondeadas en íconos personalizados, redondea la imagen antes de subirla.
Fuente
Elige de una lista de Google Fonts precargadas para usar en tu Help Center:
Fuente primaria - Usada en el 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
Bitter
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 usábamos 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 fuente personalizada que coincida con el estilo de tu marca.
Mostrar autores del artículo
Muestra u oculta los autores del artículo en la Página principal, Colecciones y Artículos 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 o desactivar "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 encabezado también se puede configurar por separado para todos tus idiomas soportados.
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 encabezado de tu Help Center reemplazará el título de la página. Si agregas un logo al pie de página de tu Help Center reemplazará el título de la página.
Enlaces del encabezado
Puedes agregar hasta 3 enlaces a otras páginas web, como tu blog o comunidad.
El encabezado empujará el otro contenido hacia abajo en lugar de superponerse al otro 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 de la API javascript, Configuración de usuarios con sesión iniciada, etc.
El mensaje de bienvenida se puede configurar en todos tus idiomas soportados.
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 la 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 avatar contiene más de un avatar
Color de texto
El color de texto que elijas se aplicará a:
Enlaces en el bloque Hero.
Texto en la barra de búsqueda.
Imagen Hero proporción recomendada: 5:2. Tamaño máximo de archivo 2MB, ancho/alto máximo 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 búsqueda
Elige entre tres tamaños diferentes de barra de búsqueda, y luego selecciona la alineación:
Vertical - izquierda o centro.
Horizontal - arriba, centro o abajo.
Corto |  |
Medio |  |
Largo |  |
Radio de esquina
También puedes seleccionar un radio de esquina para la barra de búsqueda. Mínimo de 0 píxeles y máximo de 30 píxeles.
Nota: La configuración de longitud de la barra de búsqueda se aplica solo a la página principal del Help Center. Cuando un cliente navega a una colección, la barra de búsqueda vuelve a su tamaño predeterminado y no conserva la longitud configurada desde la página principal.
Diseño y secciones
Desde Configuración > Help Center > Configurar y Estilo, haz clic en la pestaña Estilo y abre Diseño y secciones para diseñar cómo se muestran las Colecciones y elegir habilitar secciones para Artículos, Contenido y Tickets Portal en la página principal. Haz clic en Editar para configurar cada uno.
Sección de Colecciones
Nota: Las colecciones deben tener artículos publicados en todos los idiomas compatibles con su Help Center. Si una colección 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 resolver esto, navega a la colección 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 Colecciones:
Clásico - El estilo actual de tarjeta de colección.
Visual - Usa un espacio más grande para íconos 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 colecciones 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 tableta, que también puedes previsualizar a la derecha usando el menú desplegable y seleccionando la opción que quieres ver.
Diseño
Usa íconos, imágenes o solo texto para tus tarjetas de Colección.
Si usas íconos, puedes cambiar los siguientes colores:
Color del ícono: selecciona el color usando el selector de color o ingresa un código hexadecimal.
Fondo del ícono:
Color - selecciona el color usando el selector de color o ingresa un código hexadecimal.
Imagen - sube una imagen.
Degradado - crea un degradado usando hasta tres colores con el selector de color o ingresa un código hexadecimal.
Nota:
Proporción recomendada: 1:1
Dimensiones recomendadas: altura/ancho máximo 48px
La selección de diseño determina las opciones disponibles para las actualizaciones de Colección. Por ejemplo, seleccionar Imágenes te permitirá elegir imágenes subidas en lugar de íconos al actualizar Colecciones individuales.
Si usas imágenes, esto llenará el fondo de la tarjeta de la colección, por lo que funciona muy bien con la plantilla visual.
Las tarjetas de colección individuales pueden ser estilizadas con imágenes eligiendo la colección desde un menú desplegable. O los estilos aún pueden aplicarse a todas las colecciones eligiendo la opción Todas las colecciones del menú desplegable, esto sobrescribirá cualquier estilo individual.
Nota:
El color del ícono solo puede cambiarse en íconos predeterminados o íconos personalizados que hayas subido en formato SVG.
Las cargas SVG se mostrarán en un solo color.
El color de fondo es opcional y puede desactivarse.
Sección de artículos
Agrega una sección de artículos en la página principal de tu Help Center.
Una vez habilitado, haz clic en Editar para seleccionar el idioma de esos artículos, elige cuántas columnas mostrar, ponle un título a esta sección y luego selecciona artículos de tu Help Center. Puedes seleccionar hasta 12 artículos publicados en tu Help Center.
Nota:
Para cada idioma, 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 el idioma predeterminado.
Sección de contenido
Agrega una sección de contenido personalizable en 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 del 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 ser habilitado 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 los 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 & 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 ser desactivada como otras secciones.
Página de artículo
Tabla de contenido
Desde Configuración > Help Center > Configurar & Estilo, haz clic en la pestaña de Estilo y abre Página de artículo para habilitar o deshabilitar una tabla de contenido 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 plantillas posibles: simple, clásica 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 & 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 tu 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.