Introduction
PDF Viewer for Adalo
PDF Viewer is a cross-platform component that lets users read any PDF document directly inside your Adalo app — no redirects, no browser tabs. It works natively on iOS, Android, and Web from a single component with one property to set.
Contracts & Agreements
Let users read and share legal documents in-app before signing.
Invoices & Receipts
Show per-user PDFs from your database dynamically.
E-books & Manuals
Full page navigation with Previous / Next controls.
Menus & Brochures
Pinch-to-zoom and fit-to-width for visual documents.
Installation
PDF Viewer is installed directly through the Adalo Marketplace — no code, no npm, no configuration files.
Find PDF Viewer in the Adalo Marketplace and complete the one-time $29.99 purchase.
The component appears automatically in your left-side component panel under Marketplace Components.
Drag the PDF Viewer onto your screen and resize it to fill the area where you want the PDF to appear.
In the right-side panel, set PDF URL to a static URL or use Magic Text to pull from your database.
Quick Start
The minimum setup is just one property: PDF URL. Everything else has sensible defaults.
Static URL example
To test the component immediately, paste any public PDF URL into the PDF URL field:
https://www.w3.org/WAI/WCAG21/wcag21.pdfDynamic URL from your database
To show a different PDF per user or per record, use Adalo's Magic Text:
- Add a File field (or a Text field containing a URL) to your Adalo collection.
- On the PDF Viewer component, click the PDF URL field.
- Choose Magic Text → select the relevant collection → select the File / URL field.
All Properties
| Property | Type | Default | Description |
|---|---|---|---|
| pdfUrl * | text | — | URL of the PDF to display. Supports Magic Text for dynamic values. |
| fitWidth | boolean | true | When ON, PDF scales to fill the component width. When OFF, the full page is visible at once. |
| showControls | boolean | true | Show Previous / Next page buttons and the current page number. |
| backgroundColor | color | @background | Background color behind the PDF. |
| controlColor | color | @primary | Color of navigation buttons and accents. Visible when showControls is ON. |
| controlTextColor | color | #FFFFFF | Text color inside navigation controls (Android only). |
| loadingText | text | "Loading PDF…" | Text shown while the PDF is being fetched. |
| loadingTextColor | color | @text | Color of the loading text. |
| errorText | text | "Could not load PDF." | Text shown when the PDF fails to load. |
| errorTextColor | color | #E53E3E | Color of the error message. |
| documentTitle | text | "PDF Document" | Title shown in the native share sheet when a user shares the PDF. |
| pageOfLabel | text | "of" | The connector word between current and total pages (e.g. "1 of 5"). Change for non-English apps. |
Actions (Event Triggers)
Connect these to Adalo actions to respond to PDF events in your app.
| Action | When it fires | Arguments |
|---|---|---|
| onLoadComplete | PDF has fully loaded | Total Pages (number) |
| onPageChange | User navigates to a different page | Current Page, Total Pages (numbers) |
| onError | PDF fails to load | — |
onLoadComplete to update a "totalPages" field in your database, then display it elsewhere on the screen using Magic Text.
PDF URL Guide
Getting the URL right is the most common setup issue. Here's what works and what doesn't.
✅ Works
- Direct
.pdffile URLs:https://example.com/document.pdf - Adalo File fields (automatically public)
- Amazon S3 public object URLs
- Cloudinary, Uploadcare, or similar CDN URLs
- Google Drive direct download links:
https://drive.google.com/uc?export=download&id=FILE_ID
❌ Doesn't work
- Google Drive sharing links (
drive.google.com/file/d/...) — use the direct download URL above - Dropbox sharing links — use
?dl=1at the end to force direct download - PDFs behind login / authentication walls
- URLs that redirect to a login page
Common Use Cases
Per-user documents
Store a File field on your Users collection. When a user logs in, show their contract, invoice, or certificate using Magic Text bound to Logged In User → Document URL.
Document library
Create a Documents collection with a File field and a Name field. Use a List to display all documents, and link each row to a detail screen containing the PDF Viewer bound to that record's File field.
Onboarding PDF
Drop the PDF Viewer on an onboarding screen with a static URL pointing to your product guide. Add an onLoadComplete action to mark the user's hasViewedGuide field as true after they open it.
Localization
PDF Viewer supports non-English apps through three configurable text properties:
| Property | English default | Example (Arabic) |
|---|---|---|
| loadingText | Loading PDF… | جاري التحميل… |
| errorText | Could not load PDF. | تعذّر تحميل الملف. |
| pageOfLabel | of | من |
| documentTitle | PDF Document | مستند PDF |
For RTL languages like Arabic, Adalo handles the overall layout direction — the PDF itself renders in whatever direction the document was authored.
Troubleshooting
PDF shows a blank white screen
The URL loaded but returned an empty or non-PDF response. Verify the URL returns a real PDF file (check Content-Type: application/pdf in browser dev tools).
Error message appears immediately
The URL couldn't be reached. Check: (1) the URL is correct, (2) it's publicly accessible without login, (3) the server hasn't blocked cross-origin requests.
PDF loads on iOS/Android but not Web
The PDF host is blocking cross-origin embedding. You may need to re-host the file on a CDN that sets permissive CORS headers (e.g. Cloudinary, S3 with public policy).
Page navigation buttons don't appear
Make sure Show Page Controls is turned ON, and that the PDF has more than one page — controls are hidden for single-page documents.
Support
Email s.shinnawy@gmail.com with:
- A description of the issue
- The PDF URL you're trying to load (or a screenshot of your component settings)
- Which platform the issue is on (iOS / Android / Web)
Most questions are answered within 24 hours on weekdays.