A Code Embed element is the route to placing your hosted document library on any Webflow page. The steps below take you through it end to end.
Voordat je begint: Code Embed is a paid Webflow feature, included with the Basic Site plan and higher. The free Starter plan blocks custom code, so a paid Site plan is required before you can add and publish the embed. Keep in mind that the library renders only when you preview or publish. While the Designer is open for editing, Webflow shows a placeholder rather than the live library.
Stap 1: Kopieer je insluitcode
Open in uw gehoste dashboard Bibliotheek publiceren om uw insluitcode te vinden en deze te kopiëren. De meeste sites hebben een enkele bibliotheek, en de pagina Publiceren bibliotheek is waar de insluitcode zich bevindt. (Als u meer dan één bibliotheek hebt gebouwd, kopieert u de code voor degene die u wilt uit Bibliotheken scherm in plaats daarvan.) Plak altijd de exacte code van uw eigen dashboard, niet het onderstaande voorbeeld:
<iframe src="https://your-library.documentlibrary.app/?dlp_embed=1" title="Document library" style="width:100%;border:0;height:600px;" loading="lazy"></iframe> <script src="https://your-library.documentlibrary.app/?dlp_embed_resize=1" async></script>
Stap 2: Een pagina voor je bibliotheek maken
In the Webflow Designer, open the Pages panel and click the + to create a new page, naming it something like Documentenbibliotheek. So that visitors can find it, add a link to this page in your navigation menu.
Step 3: Add a Code Embed element
With your new page open, click the + (Add elements) panel, search for Embed, and drag the Code Embed element onto the section where the library belongs.
Stap 4: Plak uw insluitcode
The code editor appears on its own. Clear out any placeholder text, paste in the snippet from Step 1, and click Save & Close.
Step 5: Publish and view your library
During editing, Webflow displays a placeholder where the Code Embed sits. To push the site live, click Publiceren at the top right, then open the page to see your document library, where visitors can search, filter by category, and preview or download each document. If you want a look before going live, click Preview (the eye icon) in the Designer.