Embed
The embed component displays a preview of printable content from a specified source URL. Use it to show users what will be printed before triggering the actual print operation.
Embed works in conjunction with the Print API to provide complete print functionality from preview to execution.
Supported document types:
-
HTML documents (
.html,.htm) - Best printing experience with full CSS styling, embedded images, and complex layouts. Use for receipts, invoices, and formatted reports. -
Text files (
.txt,.csv) - Plain text with basic content and tabular data support. Use for simple receipts and data exports. -
PDF files (
.pdf) - Behavior varies by platform: prints directly on iOS/desktop, but downloads to external viewer on Android. Use for complex documents and compliance requirements.
Learn how to build a print extension in POS.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the embed component. This component must be a direct child of the screen component.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label that describes the purpose or contents of the embed. It will be read to users using assistive technologies such as screen readers.
- Anchor to blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to srcsrcsrcstringstring
The source of the file to preview.
The value must be either:
- A relative path that will be appended to your app's
. - A full URL to your app's backend that will be used to return the file.
Supported file types:
- HTML files
- Text files
- PDF files
- A relative path that will be appended to your app's
- Anchor to typetypetype'text/html' | 'text/plain' | 'application/pdf''text/html' | 'text/plain' | 'application/pdf'Default: 'text/html'Default: 'text/html'
The content type of the file to display.
MaybeResponsive
T | `@container${string}`SizeUnitsOrAuto
SizeUnits | 'auto'SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | 'none'Anchor to ExamplesExamples
Anchor to Preview printable contentPreview printable content
Display a preview of printable content before triggering the print operation. This example shows how to use embed with HTML documents, PDFs, or text files, supporting various document formats with proper rendering for receipts, invoices, and formatted reports.Preview printable content
Preview printable content
Anchor to Best practicesBest practices
- Design print-optimized content: Structure your printable content with print-specific CSS media queries, appropriate page breaks, and formatting that works well on physical paper. Consider printer capabilities and paper sizes commonly used in POS environments.
- Implement proper error handling: Handle cases where the source URL is unavailable, the document format is unsupported, or network issues prevent content loading. Provide clear feedback to users when preview or printing fails.
- Consider platform-specific limitations: Be aware that PDF files on Android devices require external applications for printing. Design your workflow to handle this gracefully, potentially offering alternative formats or clear instructions for Android users.
- Optimize source URL management: Use relative paths when possible for internal app resources to simplify URL management and improve performance. Reserve full URLs for external resources or when you need complete control over the endpoint.
- Provide clear print workflows: Combine Embed with appropriate UI controls like print buttons, allowing users to review content before committing to print. Consider implementing print confirmation dialogs for important or expensive print operations.
Anchor to LimitationsLimitations
- Embed must be a direct child of the screen component and can't be nested inside any other component—this structural requirement ensures proper preview rendering and print functionality.
- The component requires network access to fetch content from the specified source URL—offline functionality isn't supported for remote content.
- Content is displayed as-is from the source—real-time content modification or editing within the preview isn't supported.
- PDF printing on Android devices requires external applications—the component can't handle PDF printing natively on all platforms, which may affect user experience consistency across different POS devices.