Printcart logo

Design Tool SDK

The Printcart Design Tool SDK embeds the same product designer used throughout Printcart directly inside your own storefront, so a buyer can customize a product without leaving your site. This page covers installing the package from npm, Yarn or a CDN, and the options, methods and events the designer exposes once it is running.

Updated . Maintained by the Printcart team.

Installation

Using npm:

text
npm install @printcart/design-tool-sdk

Using yarn:

text
yarn add @printcart/design-tool-sdk

Using unpkg:

text
<script src="https://unpkg.com/@printcart/design-tool-sdk@1.4.2/dist/main.js"></script>

Usage

Using package:

text
import PrintcartDesigner from "@printcart/design-tool-sdk";

const designer = new PrintcartDesigner({
  token: "your-printcart-unauth-token",
  productId: "your-product-id",
  options: {},
});

Using CDN-hosted copy of the library:

text
<script defer src="https://unpkg.com/@printcart/design-tool-sdk@1.4.2/dist/main.js"></script>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    const designer = new PrintcartDesigner({
      token: "your-printcart-unauth-token",
      productId: "your-product-id",
      options: {},
    });
  });
</script>

Options

token

  • Required
  • Type: string

Your Printcart Unauth Token. You can get your token from your Printcart dashboard (Settings).

productId

  • Required
  • Type: string

The Product ID that you want to assign the designer to.

options

  • Optional
  • Type: object | undefined

Provide options to config the Designer UI and locale.

Parameters

  • processBtnBgColor: string | null - Change the Process button background color.
  • logoUrl: string | null - Add your branding logo to Designer.

Methods

render

Render and display Designer.

Example

text
const designer = new PrintcartDesigner({
  token: "your-printcart-unauth-token",
  productId: "your-product-id",
});

const openDesignerButton = document.getElementById("your-button-id");

openDesignerButton.addEventListener("click", function () {
  designer.render();
});

close

Unmount and hide Designer.

Example

text
designer.close();

on

Subscribe to a Design Tool event. See below for full list of events.

Example

text
designer.on("upload-success", callback);

Events

Exposed events that you can subscribe in your app:

rendered

Fired when Designer finish render and displayed to the screen.

Example

text
designer.on("rendered", function () {
  console.log("Designer opened.");
});

closed

Fired when Designer closed.

Example

text
designer.on("closed", function () {
  console.log("Designer closed.");
});

render-finish

Fired when Designer fully loaded.

Example

text
designer.on("render-finish", function () {
  console.log("Designer rendered.");
});

upload-success

Parameters:

  • response - Printcart API Response object for design upload.

Fired when all upload success.

Example

text
designer.on("upload-success", function (response) {
  console.log("Response:", response);
});

upload-error

Parameters:

  • error - The error object from Printcart API Response.

Example

text
designer.on("upload-error", function (error) {
  console.log(error);
});

edit-success

Parameters:

  • response - Printcart API Response object for design edit.

Example

text
designer.on("edit-success", function (response) {
  console.log("Response:", response);
});

edit

Fired when Designer enter edit mode.

Example

text
designer.on("edit", function () {
  console.log("Designer on edit mode");
});

Related docs

Questions & answers

What does the Design Tool SDK need to start?

A Printcart public (unauth) token and a productId. Both come from your store, the token from the dashboard Settings page.

Can I load it without npm?

Yes. A CDN-hosted build is available from unpkg; include the script tag and construct PrintcartDesigner once the DOM is ready.

Does it work with any Printcart product?

Yes — pass the productId of any product on your store; the SDK renders the same designer the Printcart dashboard and storefronts use.

Can you work with a merchant in my country?

Yes. Printcart services are delivered remotely, so we work with merchants in any country. Netbase JSC, the company behind Printcart, has worked with clients in 80+ countries.

Do you support my industry?

Printcart services are not tied to one industry. Full stores, custom development, integration and support are delivered remotely; tell us what you sell and we will say plainly whether Printcart fits.

How do I pay securely?

You sign the contract with and pay the company, Netbase JSC. App plans are billed through Shopify or Wix for stores on those platforms, and through PayPal for WooCommerce and direct stores. Full-store orders on solution.printcart.com check out through PayPal. Service work is quoted in writing in your Helpdesk ticket before any payment.

Who do I talk to?

Talk to our CEO, Huy Nguyen (David), on WhatsApp at https://wa.me/84937869689 or by email at support@printcart.com.

Sources