Para que tus artículos del Help Center sean más efectivos y útiles para tus clientes, necesitan un formato claro y fácil de escanear. Esto se puede lograr fácilmente dentro del editor de artículos, o con la Articles API.
Este artículo muestra exactamente qué formato se admite y cómo lograr los estilos deseados con la Articles API.
Nota: Para una guía completa de referencia de la API, consulta nuestra documentación para desarrolladores.
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 admiten dos niveles de encabezado en los artículos; H1 y H2:
Cualquier otra etiqueta de encabezado enviada a través de la API (H3 - H6) se convertirá en H1 y H2 manteniendo la jerarquía.
<h1>This is a heading</h1>
<h2>This is a sub-heading</h2>
Para agregar una imagen, usa una etiqueta de imagen (img), con la URL de la imagen como atributo “src”:
La imagen se cargará en Intercom desde la fuente que especifiques, y se usará un enlace de Intercom para mostrarla en tu artículo. Los tipos de archivo admitidos son PNG, JPEG, SVG y GIF.
Importante: La fuente de tu imagen debe ser una URL completa (por ejemplo, https://examply.io/image.jpeg) 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 y tiene beneficios SEO:
<img src=”https://examply.io/image.jpg” alt=”Examply project page”/>
Agrega enlaces a tus artículos con etiquetas de anclaje “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, agrega 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.
Se pueden agregar listas con viñetas y numeradas con etiquetas “unordered list (ul)” y “ordered list (ol)”:
Cada elemento de tu lista debe estar dentro de una etiqueta de elemento de lista (li).
Lista con viñetas (no ordenada):
<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 en un iframe:
<iframe src=”https://www.youtube.com/embed/jqO8AQHj7Fw”></iframe>
Nota: Debes usar la URL de embed para tu video como atributo “src”, no un enlace directo al video. Enviar una URL no compatible 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 se pueden alinear 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” admitidas. 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:
No se pueden anidar tablas dentro de otras tablas.
Si envías etiquetas
thead,tfoototbody, su contenido se tratará como filas normales.
Divisores (Reglas horizontales):
<hr>
¿Qué no se admite?
Divs y spans
Cualquier etiqueta “div” o “span” que envíes será reemplazada por etiquetas “p”.
Nota: Esto excluye los divs contenedores usados para centrar botones e imágenes (ver arriba).
Formularios e inputs
Cualquier etiqueta “form”, “input” o “textarea” y su contenido serán eliminados del cuerpo de tu artículo.
Scripts
No se admite 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 esté instalado Intercom 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
No es posible exportar tus artículos a través de la interfaz de usuario de Intercom, sin embargo, puedes usar nuestra documentación de API para exportar el contenido.