How to Add HexCoda PDF Viewer Pro in Flatsome UX Builder
Flatsome UX Builder gives WordPress and WooCommerce site owners a visual way to create product pages, landing pages, reusable UX Blocks, category layouts, and other custom content. A basic PDF link, however, does not create an integrated document-reading experience.
A dedicated Flatsome PDF viewer allows visitors to read product catalogs, technical manuals, brochures, size guides, menus, reports, and other PDF documents directly inside the layout without leaving the page.
HexCoda PDF Viewer Pro includes a native PDF Viewer element for Flatsome UX Builder.
The plugin uses PDFs stored in the WordPress Media Library and renders them through a locally bundled PDF.js engine. It does not depend on Google Docs Viewer or another external document service.
Step 1: Install and Activate the Plugin
- Download the HexCoda PDF Viewer Pro ZIP file.
- Open the WordPress dashboard.
- Go to Plugins and select Add New Plugin.
- Select Upload Plugin.
- Choose the plugin ZIP file.
- Install and activate the plugin.
Step 2: Open Flatsome UX Builder
Open the page, landing page, product content, custom product layout, or UX Block where the PDF should appear. The viewer can be placed inside a standard page, reusable block, WooCommerce product section, category landing page, tab, accordion, row, or column.
Step 3: Add the PDF Viewer Element
- Select Add Elements.
- Open the HexCoda category.
- Select PDF Viewer.
- Place the element inside the required row, column, tab, or section.
Screenshot placeholder: HexCoda PDF Viewer element inside Flatsome UX Builder.
Step 4: Select the PDF
Choose an existing PDF from the WordPress Media Library or upload a new document. Using the Media Library keeps the publishing workflow inside WordPress and removes the need to paste an external viewer URL.
Screenshot placeholder: Selecting a PDF from the WordPress Media Library in Flatsome UX Builder.
Step 5: Choose a Reading Mode
Select the mode that best matches the document.
Single Page
Single Page mode displays one PDF page at a time with Previous and Next navigation. It works well for short product catalogs, restaurant menus, product brochures, property brochures, visual lookbooks, and presentations.
Continuous Scroll
Continuous Scroll mode displays multiple pages in a vertical reading flow. It is usually the better choice for technical manuals, installation instructions, annual reports, long specifications, policies, procedures, and course materials.
| Reading Mode | Recommended Use |
|---|---|
| Single Page | Brochures, menus, catalogs, presentations, visual documents |
| Continuous Scroll | Manuals, reports, workbooks, technical documents, long publications |
Step 6: Configure the Viewer Controls
Choose which controls visitors should see. Page navigation, zoom, fullscreen mode, Print, and Download can be managed according to the purpose of the document.
A product manual may allow Download so customers can keep an offline copy. A preview brochure may hide Download and use an image watermark. A public report may keep both Print and Download visible.
Step 7: Add a Watermark or Protection Settings
HexCoda PDF Viewer Pro supports PNG, JPG, and JPEG watermark images. A watermark can contain a company logo, copyright notice, preview label, client name, draft notice, or usage message.
The plugin also includes browser-level protection controls that can reduce casual copying and downloading.
Screenshot placeholder: Flatsome PDF viewer with image watermark and protection settings.
Step 8: Check the Desktop and Mobile Layouts
Use the UX Builder preview to check the viewer across desktop, tablet, and mobile layouts. Review the row width, viewer height, toolbar spacing, portrait and landscape pages, fullscreen behavior, touch controls, and any parent tabs or accordions.
Sticky and overflow settings on surrounding Flatsome elements can also affect the viewer. Open the published page on a real phone before considering the layout complete.
Step 9: Publish or Update the Page
After testing the document, controls, hyperlinks, and responsive layout, apply the UX Builder changes and publish or update the page.
How to Add a PDF Viewer to a Flatsome Product Page
WooCommerce product pages often need more than product images and a short description. Customers may also need access to manuals, technical specifications, size charts, installation instructions, warranty details, or product brochures.
Add the Viewer to the Product Description
Place the PDF Viewer inside the long product description when the document supports the purchasing decision. This works well for brochures, technical sheets, size guides, material specifications, and installation documents.
Add the Viewer to a Custom Product UX Block
Flatsome UX Blocks can create reusable product sections or complete custom product layouts. A product-document section could combine a short introduction, the PDF viewer, a related support link, and a contact or quotation button.
The same UX Block can be reused across several products or assigned to specific categories.
Add the Viewer to a Dedicated Tab or Section
A separate Manuals, Documentation, Specifications, or Downloads section can keep the product page organized when several resources are available.
Check the viewer dimensions carefully inside hidden tabs or accordions. Interactive viewers may need to recalculate their width after the container becomes visible.
How to Display a Product Catalog in Flatsome
A product catalog can be placed inside a dedicated landing page, category page, campaign layout, or reusable UX Block. A practical catalog page usually includes a clear title, a short introduction, the embedded PDF viewer, a link to the relevant product category, and a quotation or contact button.
Single Page mode often works well for visual catalogs where each page needs focused attention. Continuous Scroll may be more suitable for larger catalogs that visitors need to scan quickly.
If the catalog contains clickable product links, test every internal and external destination after embedding the PDF.
How to Add Product Manuals and Technical Documents
Product manuals and technical documents can reduce purchase uncertainty and provide support after the sale. Installation guides, user manuals, technical specifications, warranty information, safety instructions, maintenance procedures, parts lists, and certification documents can all be displayed through the viewer.
These PDFs may appear on product pages, support pages, customer resource areas, or category landing pages.
Continuous Scroll is usually the better choice for long manuals, particularly when the document contains a clickable table of contents or internal page links.
Can You Display a PDF Without Forcing a Download?
Yes. A dedicated PDF viewer renders the document directly inside the Flatsome layout rather than sending the visitor to a basic file URL.
The visible Download button can also be hidden when the PDF should remain focused on on-page reading.
For a detailed explanation of browser behavior and protection limits, read how to display a PDF in WordPress without forcing a download.
Can You Hide the Print and Download Buttons?
HexCoda PDF Viewer Pro provides global defaults and per-viewer settings, allowing different PDFs to use different toolbar configurations. A public price list may offer Print and Download, while a product preview may hide both. A manual may allow Download but hide Print, and a catalog may use a watermark while keeping Download available.
The toolbar should match the purpose of the document rather than apply the same restriction everywhere.
Do PDF Links Work Inside Flatsome?
Support for links inside the document depends on the PDF viewer rather than Flatsome itself.
A capable viewer should support external website links, email links, internal page links, named destinations, and clickable tables of contents. These features are especially useful in manuals, reports, policies, catalogs, and long documentation.
HexCoda PDF Viewer Pro supports these common PDF link types.
Can You Display Multiple PDFs on One Flatsome Page?
Yes. A compatible plugin can display several independent PDF viewers on the same page or UX Block.
This may be useful for several product manuals, catalogs for different collections, reports from different years, property brochures, course modules, or documents in multiple languages.
Each viewer should maintain its own document state, navigation, and toolbar controls. Large PDFs can increase page weight, so avoid loading more viewers than the page genuinely needs. Tabs, accordions, archive pages, or separate document pages may provide a better experience when the library becomes large.
Final Recommendation
The best way to add a PDF viewer in Flatsome UX Builder is to use a native element that works with the WordPress Media Library and provides responsive on-page reading.
This approach keeps the document inside the page, avoids manual iframe code, and gives editors greater control over reading modes, navigation, fullscreen viewing, hyperlinks, watermarks, printing, and downloading.
HexCoda PDF Viewer Pro includes a native Flatsome UX Builder element, along with Gutenberg, Classic Editor, Elementor Free, and shortcode integrations.
Explore HexCoda PDF Viewer Pro and view the complete product details.
For more information about the first release, read the HexCoda PDF Viewer Pro launch announcement.
Frequently Asked Questions
Install a PDF viewer plugin with native Flatsome support, open the page or UX Block in UX Builder, select Add Elements, choose the PDF Viewer element, select a document from the WordPress Media Library, configure the viewer, and publish the layout.
Flatsome can display PDF links, HTML code, and shortcodes, but a complete PDF Viewer element usually comes from a compatible WordPress plugin.
Yes. You can add a direct file link or place an iframe inside an HTML element. These methods provide less control over responsive behavior, toolbar buttons, watermarks, and individual viewer settings.
Yes. You can add the viewer to the product description, a custom product UX Block, a dedicated tab, or another product-page section.
Yes. A native element or shortcode can be added to a reusable UX Block and used across product pages, category layouts, landing pages, or other Flatsome content.
Yes. A compatible viewer can hide the visible Download control. HexCoda PDF Viewer Pro allows Print and Download settings to be configured globally or for an individual viewer.
No. It discourages casual downloading but cannot prevent screenshots, screen recording, browser inspection, cached-resource access, or advanced extraction.
Yes. A responsive viewer can adapt to the available layout width and provide touch-friendly controls, fullscreen reading, and mobile-specific behavior.
They can, provided the viewer supports external links, email links, internal page destinations, named destinations, and the PDF annotation layer.
Yes. A compatible plugin can display multiple independent PDF viewers on the same page or UX Block.
No. HexCoda PDF Viewer Pro uses a locally bundled PDF.js engine and does not depend on Google Docs Viewer or another external document service.
