Con el módulo de Texto enriquecido integrado de HubSpot, puedes colocar tu biblioteca de documentos alojada en cualquier página de HubSpot. Los pasos siguientes cubren todo el proceso.
Antes de comenzar: Funciona en todos los planes de HubSpot, incluido el gratuito. No necesitas una mejora de pago ni un módulo personalizado. HubSpot añade la biblioteca de documentos con un ancho fijo estrecho, así que hay un paso adicional para ampliarla más adelante en el artículo. Es posible que el editor de HubSpot tampoco muestre el resultado final, así que comprueba la página publicada.
Copia tu código de inserción
En tu panel alojado de Document Library Pro, abre Publicar biblioteca y copia el código de inserción de tu biblioteca de documentos. Si has creado más de una biblioteca de documentos, abre la Libraries pantalla y copia el código de la biblioteca de documentos específica que quieres añadir a HubSpot.
Usa tu propio código de inserción, no este ejemplo:
<iframe src="https://your-library.documentlibrary.app/?dlp_embed=1" title="Document library" style="display:block;width:100%;border:0;height:600px;" loading="lazy"></iframe> <script src="https://your-library.documentlibrary.app/?dlp_embed_resize=1" async></script>
Planes gratis y Starter de HubSpot
Los planes gratis y Starter de HubSpot no te permiten crear tus propios módulos, así que usas el Texto enriquecido integrado. Hay dos formas de hacerlo y ambas funcionan igual.
Método 1: Inserta el embed
- Abre la página de HubSpot donde quieres mostrar la biblioteca de documentos.
- Arrastra un Texto enriquecido módulo a la página, o haz clic en un Texto enriquecido módulo que ya esté ahí.
- Clic Insertar en la barra de herramientas.
- Elige Insertar.
- Pega tu código de inserción de Document Library Pro.
- Clic Insertar.
En el plan gratuito, no hay un módulo Insertar independiente en la lista de módulos. Texto enriquecido es la ruta.
Método 2: Pégalo en el código fuente
- Abre la página de HubSpot donde quieres mostrar la biblioteca de documentos.
- Arrastra un Texto enriquecido módulo a la página, o haz clic en un Texto enriquecido módulo que ya esté ahí.
- Clic Avanzado.
- Elige Código fuente.
- Pega tu código de inserción de Document Library Pro.
- Clic Guardar cambios.
Este método te encaja si te sientes cómodo con HTML. También es donde tendrás que ir más adelante si necesitas cambiar el ancho de la biblioteca de documentos.
Planes Professional y Enterprise de HubSpot
Los dos métodos anteriores siguen funcionando en los planes Professional y Enterprise de HubSpot, y son la ruta más rápida. Estos planes también desbloquean el gestor de diseño, así que un desarrollador puede envolver el código de inserción en un módulo personalizado si tu equipo quiere reutilizarlo en muchas páginas. Esto es opcional y necesita a alguien que se sienta cómodo con las plantillas de HubSpot.
Haz que la biblioteca de documentos tenga el ancho adecuado
Cuando insertas la biblioteca de documentos, HubSpot calcula el ancho que debería tener. Elige algo estrecho, normalmente 317 píxeles. Como resultado, la biblioteca de documentos aparece comprimida en una columna fina.
HubSpot tiene un botón Ancho completo que normalmente solucionaría esto. No funciona para la biblioteca de documentos, porque la biblioteca de documentos incluye un pequeño script. HubSpot atenúa el botón.
Ese mismo botón atenuado también bloquea las cajas de ancho y alto. Tampoco puedes escribir un ancho ahí.
Así que la única forma de definir el ancho es en el código fuente:
- Haz clic en el Texto enriquecido módulo que contiene tu biblioteca de documentos.
- Clic Avanzado.
- Elige Código fuente.
- Busca max-width: 317px.
- Cambia 317 por el ancho que quieras en píxeles. 1100 es un buen punto de partida para la mayoría de las páginas.
- Clic Guardar cambios.
La biblioteca de documentos sigue reduciéndose para ajustarse a pantallas pequeñas y móviles. El número que introduces es un ancho máximo, no un ancho fijo.
Publica y comprueba la página
Clic Publicar, o Update si la página ya está publicada.
La biblioteca de documentos cambia de tamaño por sí sola para ajustarse a su contenido. Esto significa que la página de HubSpot crece y se reduce a medida que los visitantes se mueven entre páginas de documentos.
El editor de HubSpot no siempre muestra el resultado final. Comprueba la página publicada después de guardar el cambio.
Si la biblioteca de documentos no aparece
Primero, asegúrate de haber pegado las dos líneas del código de inserción. La segunda línea es la que permite que la biblioteca de documentos cambie de tamaño por sí sola.
A continuación, comprueba la página publicada en lugar de fiarte de la vista previa del editor. La página publicada es el lugar donde confirmar que la biblioteca de documentos se muestra correctamente.