Met de ingebouwde Rich text-module van HubSpot kun je je gehoste documentenbibliotheek op elke HubSpot-pagina plaatsen. De stappen hieronder behandelen het hele proces.
Voordat je begint: Dit werkt op elk HubSpot-abonnement, ook het gratis abonnement. Je hebt geen betaalde upgrade of aangepaste module nodig. HubSpot voegt de bibliotheek toe met een smalle vaste breedte, dus verderop in dit artikel is er één extra stap om die breder te maken. De HubSpot-editor toont het eindresultaat mogelijk niet, dus controleer de gepubliceerde pagina.
Kopieer je insluitcode
Open in je gehoste Document Library Pro-dashboard Bibliotheek publiceren en kopieer de insluitcode voor je bibliotheek. Als je meer dan één bibliotheek hebt gemaakt, open dan het Bibliotheken scherm en kopieer de code voor de specifieke bibliotheek die je aan HubSpot wilt toevoegen.
Gebruik je eigen insluitcode, niet dit voorbeeld:
<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>
Gratis en Starter-abonnementen van HubSpot
Met gratis en Starter-abonnementen van HubSpot kun je geen eigen modules bouwen, dus gebruik je de ingebouwde Rich text module. Er zijn twee manieren om dit te doen en beide werken hetzelfde.
Methode 1: De insluiting invoegen
- Open de HubSpot-pagina waarop je de documentenbibliotheek wilt tonen.
- Sleep een Rich text module naar de pagina, of klik op een Rich text module die er al staat.
- Klik Invoegen op de werkbalk.
- Kies Insluiten.
- Plak je Document Library Pro-insluitcode.
- Klik Invoegen.
In het gratis abonnement is er geen aparte Insluiten module in de modulelijst. Rich text is de route.
Methode 2: Plak het in de broncode
- Open de HubSpot-pagina waarop je de documentenbibliotheek wilt tonen.
- Sleep een Rich text module naar de pagina, of klik op een Rich text module die er al staat.
- Klik Advanced.
- Kies Broncode.
- Plak je Document Library Pro-insluitcode.
- Klik Wijzigingen opslaan.
Deze methode past bij je als je vertrouwd bent met HTML. Dit is ook de plek waar je later naartoe gaat als je de breedte van de bibliotheek moet wijzigen.
HubSpot Professional- en Enterprise-abonnementen
Beide methoden hierboven werken nog steeds met HubSpot Professional- en Enterprise-abonnementen, en ze zijn de snelste route. Deze abonnementen geven ook toegang tot de designmanager, zodat een ontwikkelaar de insluitcode in een aangepaste module kan plaatsen als je team die op veel pagina's opnieuw wil gebruiken. Dit is optioneel en vraagt iemand die vertrouwd is met HubSpot-templates.
Geef de bibliotheek de juiste breedte
Wanneer je de bibliotheek invoegt, raadt HubSpot hoe breed die moet zijn. HubSpot kiest iets smals, meestal 317 pixels. Daardoor lijkt de documentenbibliotheek samengedrukt in een dunne kolom.
HubSpot heeft een Volledige breedte knop die dit normaal zou oplossen. Die werkt niet voor de documentenbibliotheek, omdat de bibliotheek een klein script bevat. HubSpot maakt de knop grijs.
Diezelfde grijze knop vergrendelt ook de vakken voor breedte en hoogte. Je kunt daar ook geen breedte typen.
De enige manier om de breedte in te stellen is dus in de broncode:
- Klik op de Rich text module die je documentenbibliotheek bevat.
- Klik Advanced.
- Kies Broncode.
- Zoek max-width: 317px.
- Wijzig 317 naar de gewenste breedte in pixels. 1100 is een goed startpunt voor de meeste pagina's.
- Klik Wijzigingen opslaan.
De bibliotheek krimpt nog steeds mee voor kleinere schermen en telefoons. Het getal dat je invoert is een maximumbreedte, geen vaste breedte.
Publiceer en controleer de pagina
Klik Publiceren, of Bijwerken als de pagina al live staat.
De bibliotheek past de hoogte zelf aan de inhoud aan. Dit betekent dat de HubSpot-pagina groeit en krimpt terwijl bezoekers tussen documentpagina's bewegen.
De HubSpot-editor toont het eindresultaat niet altijd. Controleer de gepubliceerde pagina nadat je de wijziging hebt opgeslagen.
Als de bibliotheek niet verschijnt
Controleer eerst of je beide regels van de insluitcode hebt geplakt. Met de tweede regel kan de bibliotheek zichzelf aanpassen.
Controleer daarna de gepubliceerde pagina in plaats van te vertrouwen op de voorbeeldweergave in de editor. De live pagina is de plek om te bevestigen dat de documentenbibliotheek goed wordt weergegeven.