Instructions
Demo Editor -
https://bubble.io/page?id=pdfviewer-30543&tab=Design&name=index&elements=bTGYfAdd the element
Drag PDF Viewer onto your page.
Set the element’s height explicitly, or place it in a container with a fixed/visible height. The viewer will automatically use all available space.
Provide the PDF URL (dynamic or static)
Bind PDF URL to any Bubble expression that resolves to a file URL, for example:
Parent group's Thing's PDF:file URL
Works with:
Files stored in Bubble (public or private, as long as the current user is authorised).
External URLs (make sure the remote server allows cross-origin access).
Tip: If a file is private and attached to a Thing with Privacy Rules, authorised users can view it directly. Unauthorised users will see nothing.
Layout and sizing
The viewer automatically fits the height and width of its container.
To make it fill a parent group, ensure the parent has a definite height (or use a row/column layout with a fixed min-height).
Viewer re-renders on container resize (e.g., group collapse/expand).
External URLs and CORS
If your PDF is hosted outside Bubble, the host must permit browser access (CORS).
If you see a CORS error, serve the file from Bubble or proxy it through your backend.
Performance tips
Very large PDFs (hundreds of pages) render fine but take longer.
Consider splitting large documents or lazy-loading sections.
Avoid mounting many viewers at once on a single page.
Troubleshooting
Blank viewer: check the PDF URL is valid/reachable and the user is authorised.
Nothing on mobile: ensure the element has a set height; test on a real device.
CORS error: host the file in Bubble or enable CORS on the remote server.
Built on Bubble
