Usa este artículo para formatear y dar estilo a tus artículos del Help Center usando la Articles API, y para exportar el contenido de tus artículos programáticamente. La Articles API te permite crear y actualizar artículos enviando HTML en el campo body; este artículo cubre todos los elementos HTML soportados, cómo estilarlos y qué se elimina o convierte.
Si prefieres formatear los artículos manualmente, puedes hacerlo dentro del editor de artículos.
Nota: Para una guía completa de referencia de la API, consulta nuestra documentación para desarrolladores.
Nota: Este artículo está dirigido a desarrolladores que integran con la Articles API de Intercom (application programming interface). Necesitarás una clave API para autenticar las solicitudes; consulta la referencia de la API para detalles de autenticación.
Formateando tus artículos públicos
Todo el texto del cuerpo debe estar dentro de etiquetas de párrafo (p):
<p>This is a paragraph</p>
Para agregar un salto de línea dentro de un párrafo, usa una etiqueta de salto de línea (br):
<p>This paragraph<br>has a line break in it</p>
Se soportan dos niveles de encabezado en los artículos; H1 y H2:
Cualquier otra etiqueta de encabezado enviada vía la API (H3 - H6) se convertirá en H1 y H2. Esta normalización es relativa: si el cuerpo carece de un <h1>, Intercom desplaza todos los encabezados hacia arriba para que el nivel superior comience en <h1>. Si el cuerpo incluye un <h1>, se preservan los niveles inferiores de encabezado.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Nota: Los campos title y body se tratan de forma independiente: el título del artículo se renderiza automáticamente como <h1> pero no afecta cómo se normalizan los encabezados en el cuerpo. Para preservar los niveles de encabezado <h2> y más profundos, siempre incluye un <h1> en el cuerpo del artículo.
Nota: El editor del Help Center muestra opciones de encabezados H3 y H4, pero estos se normalizan a H1 o H2 cuando el artículo se guarda o se accede vía la API. Si los niveles de encabezado cambian inesperadamente en tus artículos, este es un comportamiento esperado: el contenido enviado a través de la API o procesado por un servicio de traducción activará la normalización.
Para agregar una imagen, usa una etiqueta de imagen (img), con la URL de la imagen como atributo “src”:
La imagen se subirá a Intercom desde la fuente que especifiques, y se usará un enlace de Intercom para mostrarla en tu artículo. Los tipos de archivo soportados son PNG, JPEG, SVG y GIF.
Importante: La fuente de tu imagen debe ser una URL completa (por ejemplo, https://examply.io/image.jpeg) y no una URL relativa (por ejemplo, /image.jpeg), y el archivo debe ser accesible públicamente.
<img src=”https://examply.io/image.jpeg”/>
Consejo profesional: también debes incluir una descripción de tu imagen con un atributo “alt”. Esto hace que tus artículos sean más accesibles para clientes que usan lectores de pantalla y ayuda a los motores de búsqueda (SEO — search engine optimization) a indexar tu contenido con precisión:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Agrega enlaces a tus artículos con etiquetas de ancla “a”. Incluye la URL de destino como atributo “href”:
<a href=”https://examply.io”>This is a text link</a>
Para mostrar enlaces como botones, añade la clase “intercom-h2b-button”:
<a href=”https://examply.io” class=”intercom-h2b-button”>This link is a button</a>
Para usar una imagen como enlace, colócala entre etiquetas de enlace:
<a href=”https://examply.io”>
<img src=”https://examply.io/image_link.jpeg”/>
</a>
Nota: El atributo “target” no es necesario. Todos los enlaces en tus artículos se abrirán en una nueva pestaña.
Las listas con viñetas y numeradas se pueden agregar con etiquetas de “lista desordenada (ul)” y “lista ordenada (ol)”:
Cada elemento de tu lista debe estar dentro de una etiqueta de elemento de lista (li).
Lista con viñetas (desordenada):
<ul>
<li>First bulleted list item</li>
<li>Second bulleted list item</li>
</ul>
Lista numerada (ordenada):
<ol>
<li>First numbered list item</li>
<li>Second numbered list item</li>
</ol>
Consejo: Para listas anidadas, incluye una etiqueta “ol” o “ul” dentro de otro elemento de lista.
Se pueden agregar videos de YouTube, Wistia, Vimeo, Loom, Vidyard o StreamIO usando una etiqueta iframe (marco en línea):
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Nota: Debes usar la URL embed de tu video como atributo “src”, no un enlace directo al video. Enviar una URL no soportada hará que tu solicitud API falle.
El código se puede agregar en línea o en bloques de código con etiquetas “pre” y “code”.
Bloque de código:
<pre><code>This is a code block, perfect for larger blocks of code</code></pre>
Código en línea en un párrafo:
<p>This paragraph contains some <code>inline code</code>.</p>
Estilizando tus artículos
Para texto en negrita usa etiquetas “b” o “strong”:
<p>This paragraph contains <b>bold words here</b> and <strong>here</strong></p>
Para texto en cursiva usa etiquetas “i” o “em”:
<p>This paragraph contains <i>italic words here</i> and <em>here</em></p>
Nota: Al crear artículos, las etiquetas “strong” se convertirán en “b” y las etiquetas “em” se convertirán en “i”.
Los encabezados, párrafos, imágenes y botones pueden alinearse al centro
Encabezados, sub-encabezados y párrafos
Agrega la clase “intercom-align-center” directamente a la etiqueta h1, h2 o p:
<h1 class=”intercom-align-center”>This heading is centered</h1>
<h2 class=”intercom-align-center”>So is this subheading</h2>
<p class=”intercom-align-center”>This paragraph is also centered.</p>
Imágenes y botones
Para alinear al centro una imagen o botón, debe estar envuelto en una etiqueta “div” con la clase “intercom-align-center” aplicada:
Imagen:
<div class="intercom-align-center"> <img src=”https://examply.io/image.jpg”/></div>
Botón:
<div class="intercom-align-center">
<a class="intercom-h2b-button" href="https://examply.io">Centered Button</a>
</div>
Importante: Estas son las únicas etiquetas “div” soportadas. Cualquier otra etiqueta “div” se convertirá en etiquetas de párrafo.
Tablas
Cualquier etiqueta “table” debe contener al menos una fila (“tr”) y una celda (“td”):
<table>
<tr>
<td>
</td>
</tr>
</table>
Nota:
Las tablas no pueden anidarse dentro de otras tablas.
Si envías etiquetas
thead,tfoototbody, su contenido se tratará como filas normales.
Divisores (Reglas horizontales):
<hr>
¿Qué no está soportado?
Divs y spans
Cualquier etiqueta “div” o “span” que envíes será reemplazada por etiquetas “p”.
Nota: Esto excluye los dos contenedores div específicos soportados para alineación al centro: uno que envuelve una etiqueta img y otro que envuelve una etiqueta a con la clase intercom-h2b-button. Estos están documentados en la sección "Los encabezados, párrafos, imágenes y botones pueden alinearse al centro".
Formularios y entradas
Cualquier etiqueta “form”, “input” o “textarea” y su contenido serán eliminados del cuerpo de tu artículo.
Scripts
No se soporta incluir CSS o Javascript personalizado. Cualquier etiqueta “script” y su contenido serán eliminados de tu artículo. Esto significa que los botones en los artículos no pueden usar manejadores onclick: se mostrarán como enlaces con estilo pero no ejecutarán JavaScript al hacer clic. Para abrir el Messenger desde un botón, enlázalo a una página en tu app donde Intercom esté instalado y activa el Messenger allí usando JavaScript (por ejemplo, Intercom('show')).
Otros elementos
Cualquier etiqueta o atributo (como "width" o "height") no listado en este artículo será reemplazado por etiquetas de párrafo. Esto incluye “head”, “html”, “footer”, “meta”, etc.
Exportando contenido de artículos del Help Center
Puedes exportar el contenido completo de tus artículos del Help Center, incluyendo el cuerpo HTML, título, metadatos y datos de localización, usando la Articles API. Cada artículo se recupera individualmente por su ID. Se requiere autenticación mediante tu clave API.
No se soporta exportar artículos a través de la interfaz de usuario de Intercom. Usa la documentación de referencia de la API para recuperar el contenido de los artículos programáticamente. La referencia cubre el esquema completo de respuesta, campos disponibles y requisitos de autenticación.