Skip to main content

Design Tool SDK

Installation​

Using npm:

npm install @printcart/design-tool-sdk

Using yarn:

yarn add @printcart/design-tool-sdk

Using unpkg:

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

Usage​

Using package:

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:

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

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

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

designer.close();

on ​

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

Example

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

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

closed ​

Fired when Designer closed.

Example

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

render-finish ​

Fired when Designer fully loaded.

Example

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

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

upload-error ​

Parameters:

  • error - The error object from Printcart API Response.

Example

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

edit-success ​

Parameters:

  • response - Printcart API Response object for design edit.

Example

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

edit ​

Fired when Designer enter edit mode.

Example

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