​
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:

​
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.

  • 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.

  • Filter In: This is a regular expression value used to filter the values from your input field before passing it down to the editor. For instance, if you want to implement a Page Width selector and your dropdown selector has values of say: 8.6cm, 9cm, 12cm and 16cm you will want to capture only the selected number value. You can use the filter in value of \d+ to capture only the number value. You can reach out to us if you need help with this.

  • 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

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!