Skip to main content
Let your AI assistant set it up: it reads your product page and your design, builds the connector, tests every choice and attaches it. See Set up connectors with AI.

About Connectors

A connector provides a means to link the editor’s functionality to elements on your web page. You can have input fields, buttons, selectors on your web page and have them send commands and data to the editor. You can also have the editor send data back to your web page. For instance, if you have a TShirt color picker on your products page, you can have the element send the selected color to the editor. The editor can then use that data to change the color of the TShirt in the preview. And if the user changes the color in the editor, you can have the editor send the new color back to the color picker on your web page.

We have the following connectors available:

The Page Width & Height connector captures and sets the size (width / height) of the design canvas in the editor.
When the editor loads, it will capture the set width and height from your input fields and adjust the canvas size accordingly. If the user changes the width and height in the editor, it will send the new values back to your input fields, which can be used to adjust pricing. This is useful for variable-canvas products like Banners, Verhicle Decals, Bill Boards, and other Large prints.
The value read from your field must be a plain number in the design’s unit, such as 12; a value like 12cm is ignored. For a dropdown, that is the option’s value, not the label the customer sees. A Print Options size field works as it is, because it sends its unit along.
The Text Value connector captures text input from your product page and replaces a specific targeted text in the editor when it loads. This is useful for personalized products like T-shirts, Mugs, or Greeting Cards, where customers can type their desired text, and the editor reflects it in the design. If the user updates the text in the editor, the new value will be sent back to your input field.
The Page Count connector sends the number of pages in the design to your input field whenever the customer adds or removes a page. This is useful for products priced by the page, like Booklets, Catalogs, and Magazines.
This connector only sends data from the editor to your page; it does not change how many pages the editor opens with. To have the editor repeat a page as many times as the customer chose on your product page, use the Page Clone connector.
The Printed Sides connector reports how many pages, or sides, of the design actually carry a print. A side the customer leaves blank is not counted. This is useful for apparel and other multi-side products where the first print is included and each additional side costs extra: a T-shirt with front, back and two sleeves reports 1 while only the front is designed, and 2 the moment something is placed on the back. The value is sent to your input field as the customer works, so the price can update before they add to cart.
Objects that belong to the design itself (locked template graphics and reference guides) do not count as a print, only what the customer places or edits.
This connector only sends data from the editor to your page. The target must be a field that takes a number: a number input, or a dropdown or Print Options choice field whose choices are named 1, 2, 3 and so on. A choice field with options like “Single-sided / Double-sided” will not be updated.
The Page Index connector allows you to display specific pages to your customers when the editor loads. For instance, if a customer selects Single Sided Business Card, you can have the editor show only the front side for the customer to personalize and hide the back side. This can be used to show or hide any specific page in the editor.
This connector clones a single page in the editor by the number of times spectified in your input / dropdown field. For instance, if you have a product with front & back with inner pages, you can have the editor clone the inner pages to the number of times specified in your input field.
The Design Selector connector opens a different design depending on what the customer chose on your product page. For instance, a flag sold in 70 × 100, 100 × 150 and 120 × 180 cm can have one design per size: the customer picks a size, and the editor opens the design made for that size. If they change the size while the editor is open, the editor switches to the matching design.
To set it up:
  1. Assign every design to the product. In Products, assign all the designs the connector can open (here, all three sizes). The editor can only switch to designs assigned to the product.
  2. Create the connector. Choose Design selector, and for a Print Options product choose Print Options field and the field that holds the choice (for sizes, Size — customer picks a preset, which finds the field with the role Size).
  3. Add a mapping per choice. On the left, type the choice as the customer sees it (70 x 100 cm) or its id. On the right, click Pick a design and choose the design for that choice from your library.
  4. Attach the connector to every one of those designs (see How to use a Connector below), so the editor can switch onwards from whichever design is open.
While a Design Selector is active, the editor does not offer the product’s other designs to the customer; the product page decides which design they get. If each choice has several designs for the customer to pick from, use a Template Filter instead.
The Template Filter connector narrows the editor’s Templates tab to the designs that fit what the customer chose on your product page, and the customer picks one of them. For instance, a novelty cheque sold in Small, Medium and Large can have a dozen bank designs in each size: the customer picks Small, and the Templates tab lists only the small designs. If they change the size while the editor is open, the list follows, and when the open design doesn’t fit the new size, the first design listed for it opens. If the customer has already made changes, the editor asks before it switches.
To set it up:
  1. Assign every design to the product. In Products, assign all the designs the connector lists, for every choice. The Templates tab only lists designs assigned to the product.
  2. Create the connector. Choose Filter the template list, and for a Print Options product choose Print Options field and the field that holds the choice (for sizes, Size — customer picks a preset).
  3. Add a mapping per choice. On the left, type the choice as the customer sees it (Small 1000x450mm) or its id. On the right, click Pick designs and choose that choice’s designs from your library. Select all in this folder picks a whole folder at once, so keeping each size’s designs in a folder of its own makes this quick. The first design you pick is the one that opens when the open design doesn’t fit.
  4. Attach the connector to every one of those designs (see How to use a Connector below), so the list keeps following the product page whichever design is open.
A choice with no mapping lists every design on the product. The Template Filter works in the PrintFx editor. In a project the customer reopens to edit, the list still narrows, but the editor never switches designs on its own.
An Underlay color is used for products like TShirts and other apparelts where customers can select the color of the physical product. On your product page, you may have a set of color options that your customers can select. With this connector, you can pass the selected color to the editor and have it pre-select the color when it loads.

How to create a Connector

1

Open your Dashboard

First navigate to your the Designs section in your Print.App Dashboard.
2

Open Connectors Panel

On the top menu, you will find the More actions button. Clicking it will open a dropdown menu. Select Connectors from the list.More Actions Menu A Panel should open on the right side of your screen. This is where you can create and manage your connectors
3

Open Connectors Panel

Click on the Add a New Connector button to create a new connector. This will open a new dialog panel where you can select the type of connector you want to create.
4

Configure your Connector

Provide a name for your connector and select the type of connector you want to create.
Depending on the type of connector you select, you will be presented with different configuration options.Connectors Panel
  • Query Selector: All selectors are required to have a query selector. This is the selector that will be used to find the element on your web page. You can use any valid CSS / HTML selector here. If you are unsure what this is, you can use the Inspect Element tool in your browser to find the selector for the element you want to use or reach out to us to assist you.
  • Target: This is required for a Text Value connector. This is the title of the text object on the canvas you wish to target.
  • Value Mappings: This is used to map the values from your input field to the values in the editor.
    For instance, if you want to set the design underlay color using colors on your page, but on your page, you have color values in names like Purple, Light Grey, Burnt Orange, and Mint Green, the computer doesn’t understand these color values.
    So you will create a mapping for each color to a standard hex value that will be passed to the editor. For instance, Purple will be mapped to #800080, Light Grey will be mapped to #D3D3D3, and so on. You can reach out to us if you need help with this.

How to use a Connector

Once a connector is created, you can assign it to any of your designs. To do this, hover over the design you want to assign the connector to and click on the Configuration button (the gear icon).
 This will open the design configuration panel on the right side of your screen. On the top menu, you will find the Connectors tab. Click on it and use the plus button to add the newly created connector to your design
 Assign Connector to Design Save your design configuration and you are good to go!
You can assign multiple connectors to a single design or the same selector to different designs
 You can reach out to us if you need help with this or have any questions about connectors. We are always here to help you!