Is there a workaround to embed Notion pages into a Webflow CMS collection without using HTML embed? Can PDFs be embedded and viewed on the Webflow page?
Yes, there is a workaround to embed Notion pages into a Webflow CMS collection without using the HTML embed element.
Export the Notion page as a PDF: Notion allows you to export pages as PDFs. To do this, simply open the page you want to embed in Notion, click on the three dots (...) at the top right corner of the page, select "Export" from the dropdown menu, and choose "PDF" as the export format.
Upload the PDF to Webflow: Now that you have the PDF file, you can upload it to Webflow. Go to your Webflow project, navigate to the Assets panel, and click on the "Upload" button. Select the PDF file from your computer and let it upload to your Webflow project.
Create a CMS collection: If you haven't already, create a CMS collection in Webflow. This will be the collection where you want to embed the Notion page.
Add a file field to the CMS collection: In the CMS collection editor, add a file field to your collection. This field will act as the placeholder for the embedded Notion page.
Link the PDF file to the CMS item: In the CMS collection editor, find the item where you want to embed the Notion page. In the file field you created in the previous step, click on "Choose a file" and select the PDF file you uploaded to Webflow. This will link the PDF file to the CMS item.
Display the PDF on the Webflow page: Now it's time to display the PDF file on the Webflow page. Add a link or button element to your Webflow page where you want the Notion page to be embedded. In the link or button settings, choose the file field from the CMS collection as the URL. This will dynamically display the PDF file on the Webflow page.
By following these steps, you can embed Notion pages into a Webflow CMS collection without using HTML embed. Remember that this method will display the PDF file itself, rather than the live Notion page.
Regarding embedding PDFs on a Webflow page, Webflow currently does not have a native PDF embed element. However, you can still embed PDFs on a Webflow page using the HTML embed element:
Obtain the embed code of the PDF: If you have a PDF file hosted on a platform like Google Drive or Dropbox, you can usually obtain the embed code by navigating to the file and looking for the embed option. Alternatively, you can use a third-party service like Scribd or Issuu to host and generate an embed code for your PDF.
Add an HTML embed element to your Webflow page: In the Webflow Designer, drag and drop an HTML embed element onto your page.
Insert the embed code: Paste the embed code for the PDF into the HTML embed element.
Adjust the size and position: Use the options in the HTML embed element settings to adjust the size and position of the embedded PDF on the page.
By following these steps, you can embed and view PDFs on a Webflow page.
Additional Questions:
- How can I embed external content into a Webflow CMS collection without using HTML embed?
- Can I embed Notion pages into Webflow pages using custom code?
- Are there any limitations to embedding PDFs on Webflow pages?
