With the Document embed control, you can display an external document—like a PDF, Word file, or presentation—directly within a form or dashboard. This allows users to preview documents without needing to download or open them in another tab.
What is a Document embed?
The Document embed control renders a document viewer inside your form. Supported files can include documents stored in attachments, data fields, or external links. It’s ideal for sharing contracts, manuals, reports, or any reference material alongside form content.
How it works
Once the control is added, you can configure the source file and adjust display settings such as height, visibility, and page display mode.
Add a Document embed
Firstly, find the control in the controls adding panel. Then, find the Document embed control in the controls adding panel. Then, drag and drop it into a section or container on your page.
Configuring Document embed
Content Settings
Document source
Set the URL of the document you want to embed. You can paste a fixed link, or bind it to a variable or field from a data list.
Appearance Settings
Height
Define the height of the embedded document viewer. Supported units include:px,%,em,rem,vh, andcalc().Hide if value is empty
When turned on, the control will be hidden if the document source cannot be retrieved.Fallback
Optional. Enter fallback content (like text or an alternate link) that will be shown if the document source is empty.Dynamic display rules
You can configure Dynamic display rules to control when this control appears, based on conditions like form input, user roles, or other data values.
Style of the Document embed
You can customize the visual appearance of the Document embed control to match your form or dashboard design.
General
Fallback
Typography: Adjust the font style of the fallback message.
Text color: Set the color of the fallback text.
Arrows
Style the navigation arrows used to flip through pages within the embedded document.
You can define styles for three states: Normal, Hover, and Active.
For each state, the following options are available:
Size: Set the size of the arrow icon. Supported units include:
px,em,rem,vw, andcalc().Color: Define the arrow color.
Background color: Set the background color of the arrow area.
Border type: Choose the border style.
Radius: Set the border radius for rounded corners. Supported units include:
px,%,em,rem, andcalc().Shadow: Apply shadow effects to enhance depth.
Prev arrow & Next arrow
Customize spacing for the previous and next arrows:
Left indent (Prev arrow): Control the horizontal offset of the previous arrow. Supported units include:
px,%,em,rem,vh, andcalc().Right indent (Next arrow): Control the horizontal offset of the next arrow. Supported units include:
px,%,em,rem,vh, andcalc().
You can use pixel (px), percentage (%), em, rem, vh, or custom values for sizing and spacing units.
Advanced Settings
Set the Advanced options that are applicable to this control.