Link to the plugin page: https://zeroqode.com/plugin/1528969499158x537880196351262700
Demo to preview the plugin:
Bubble Editor: https://bubble.io/plugin/1514076958993x355028148880670700
Introduction
Obtain a no-code plugin that empowers apps with the capability to print the current page and offers various other features. No API setups or waiting time for file creation required.
This plugin also allows printing based on a custom stylesheet, skipping elements, printing specific elements, creating HTML templates for dynamic data insertion, or designing templates with custom HTML, JavaScript, CSS, and dynamic data combined.
The plugin encompasses all these functionalities within just a few actions. The instructions are straightforward, but if you need any assistance, please don’t hesitate to reach out.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
- Add Elements to the Page
- Open the Design Tab in Bubble.
- Locate the following elements under Visual Elements:
- PDF Viewer → Displays PDF documents in your app.
- Print Toolkit → The main printing handler that enables printing functionalities.
- Print Pro Viewer → An advanced PDF viewer with enhanced display options.
- Drag and drop the necessary elements onto your Bubble page.
- Set Up Printing Workflows
- Open the Workflow Tab in Bubble.
- Click "Add an Action" and select one of the available printing actions from Print Toolkit.
- Configure the parameters as needed:
- Select the elements you want to print.
- If using Print Element By ID, ensure the element has a unique ID Attribute set.
- If using Print HTML Template, define the HTML content and styles.
Plugin Element Properties
PDF Viewer
Title | Description | Type |
PDF URL | The URL of the PDF file to be displayed in the viewer. It can be dynamically set using an input or database value. | Text |
Print Toolkit
Title | Description | Type |
URL for print | The URL of the page or template to be printed. This can be dynamically set using an external or internal Bubble URL. | Text |
Print Pro Viewer
Title | Description | Type |
HTML | The HTML content to be displayed in the viewer before printing. This field allows rendering custom HTML for preview and print. | Text |
Plugin Actions
Print Elements
Prints one or multiple selected elements from the page.
Title | Description | Type |
Page Title | The title of the printed page. | Text |
ID of Elements to Print | The ID(s) of the elements to be printed. Use commas to separate multiple IDs. | Text |
Import Page's CSS? | Whether to import the page's CSS styles in the print. | Yes/No |
Import Page's Style? | Whether to include the page's style settings in the print. | Yes/No |
External CSS Files URL | The URL(s) of external CSS files to be applied to the print. | Text |
Remove Inline Styles? | Whether to remove inline styles from the elements before printing. | Yes/No |
Set Print Delay (ms) | Time delay (in milliseconds) before printing, useful for ensuring content loads properly. | Number |
Print HTML Template
Prints a custom HTML template with optional timeout and file naming.
Title | Description | Type |
Custom HTML Template | The HTML content to be printed. This can be dynamically set using a multiline input or database value. | Text |
Timeout | Time delay (in milliseconds) before printing. Useful to ensure content is fully rendered before execution. | Number |
Output the Template | Whether to generate an output of the template before printing. | Yes/No |
File Name | The name of the file if the print output needs to be saved as a document. | Text |
Print HTML Template (Advanced)
Prints an advanced HTML template with custom CSS and enhanced settings.
Title | Description | Type |
Custom CSS | Custom styles to be applied to the printed content. Wrap the styles inside ( <style></style>) tags. | Text |
Custom CSS URL | External CSS file URL to be applied to the printed content. | Text |
Custom Head JavaScript | JavaScript code to be included inside the <head> section. Useful for global scripts. | Text |
Custom Body JavaScript | JavaScript code to be included inside the <body> section. | Text |
Custom Head HTML (remove tags) | Custom HTML content for the <head> section without additional tags. | Text |
Custom HTML Header | HTML structure to be used as the header of the document. | Text |
Custom Footer HTML | HTML structure to be used as the footer of the document. | Text |
Timeout | Time delay (in milliseconds) before printing to ensure content is fully loaded. | Number |
Output the Template | Whether to generate an output of the template before printing. | Yes/No |
File Name | The name of the file if the print output needs to be saved as a document. | Text |
Print Whole Page
Prints the entire page as it appears in the browser.
Title | Description | Type |
File Name | The name of the file if the print output needs to be saved as a document. | Text |
Invoice Builder
Generates and prints an invoice template with customer and service provider details.
Title | Description | Type |
Invoice Number | Unique identifier for the invoice. | Text |
Creation Date | The date and time when the invoice is generated. | Date |
Customer’s Name | The name of the customer receiving the invoice. | Text |
Customer’s Address | The street address of the customer. | Text |
Customer’s City | The city where the customer is located. | Text |
Customer’s Phone Number | The contact number of the customer. | Text |
Customer’s Zip Code | The postal code of the customer's address. | Text |
Logo | The company logo to be displayed on the invoice. | Image |
Company Name | The name of the service provider issuing the invoice. | Text |
Company Address | The address of the service provider. | Text |
Company City | The city where the service provider is located. | Text |
Company Email | The email contact for the service provider. | Email |
Company Zip Code | The postal code of the service provider’s address. | Text |
Company Phone | The contact number of the service provider. | Text |
Items | A list of items included in the invoice. | List |
Price | The price for each item in the invoice. | List (Number) |
Amount | The quantity of each item. | List (Number) |
Item Total | The total price for each item (Price x Amount). | List (Number) |
Total | The total sum of all item totals. | Number |
File Name | The name of the file if the invoice needs to be saved. | Text |
Print Another Page
Prints content from another page by using a specified URL.
Title | Description | Type |
Element | Select the Print Toolkit element that will handle the print operation. | Element |
Print Element Inline Styles
Prints an element while preserving its inline styles.
Title | Description | Type |
Element | Select the Print Toolkit element that will handle the print operation. | Element |
Element ID | The unique ID of the element to be printed with inline styles. | Text |
Print Element By ID
Prints a specific element using its unique ID.
Title | Description | Type |
Element ID | The unique ID of the element to be printed. Ensure the ID is correctly set in the element properties. | Element |
File Name | The name of the file if the print output needs to be saved as a document. | Text |
