Maneken Embed API

⚠️⚠️⚠️ The Maneken Embed API is licensed by Maneken and requires your domain to be allowed access. If you want to embed Maneken on your website contact us on [email protected]

Getting Started

Install the maneken package.

npm install maneken

Or load it from unpkg

<script src="https://unpkg.com/maneken/dist/index.js" />

import Maneken from "maneken";

const element = document.querySelector(".maneken-embed");
const maneken = new Maneken(element, "ToteBag", {
  showInterface: false,
  allowMove: false,
  backgroundColor: "#efeade",
  padding: 0,
  printArea: {
    width: 13,
    height: 13,
    padding: [4, 2, 2, 2],
  },
});

Usage

Build your own interface using your own component library and communicate with the Maneken Embed API.

/**
 * Set the product color
 *
 * @param {String} color. Hex code i.e. #00554B
 * @param {Number} slotIndex. The index of the slot to apply the color to
 */
maneken.setColor(color, slotIndex);

/**
 * Set the fitting of the insert
 *
 * @param {String} fit. The fitting to apply: fit|fill|stretch
 * @param {Number} slotIndex. The index of the slot to apply the fit to
 */
maneken.setFit(fit, slotIndex);

/**
 * Insert media into the slot
 *
 * @param {File|Img|ImageBitmap|String} file. The media to insert. Accepts File|Img|ImageBitmap|String(src url).
 * @param {Number} slotIndex. The index of the slot to insert the media in
 */
maneken.insertMedia(file, slotIndex);

/**
 * Set print area
 *
 * @params {Object} values. width, height and padding
 */
await maneken.setPrintArea({
  width: 13,
  height: 13,
  padding: [4, 2, 2, 2],
});

/**
 * Zoom in
 */
maneken.zoomIn();

/**
 * Zoom Out
 */
maneken.zoomOut();

/**
 * Resets all values to the original state
 */
maneken.reset();

/**
 * Zoom in
 *
 * @params {String} slug. The slug of the mockup to load
 */
await maneken.load(slug);

/**
 * Zoom in
 *
 * @returns {_} Returns the boundingbox of the insert as percentage values of the slot's boundingbox
 */
const data = await maneken.getData();