Whitelabel Virtual Product Creator
The whitelabel virtual product creator (VPC) is a tool that can be embedded into external systems (e.g. an ecommerce site) to allow a user to quickly create products both in CPP and the external system.
Key Features
- Embeds into an external system via an iframe and a Javascript API.
- Supports both multi product and single product modes.
- Can make use of any suitable personalisation app.
- Can make use of an external CSS stylesheet.
- Able to only show products suitable for the selected orientation (square, landscape and portrait).
- Hooks into an approvals system so that site administrators can control which products get published.
Embedding
Unlike a normal personalisation app iframe, the VPC iframe has extra security features which mean that it must be embedded into the external system by somebody with programming experience. The extra security features are necessary because the VPC iframe allows direct access into CPP.
The base URL is as follows:
https://whitelabel.custom-gateway.net/artists/vpc
In addition, the following URL parameters must be specified:
| Parameter | Description |
|---|---|
| company_ref_id | The company to which any created products will belong. |
| pending_pc | The holding category for any created products whilst they await approval. |
| approved_pc | The permanent category for any created products once they have been approved. |
| square_pc | Controls which products are available if the user selects the ‘Square’ orientation. |
| landscape_pc | Controls which products are available if the user selects the ‘Landscape’ orientation. |
| portrait_pc | Controls which products are available if the user selects the ‘Portrait’ orientation. |
| product_id | Optional Enables single product mode when set. |
| css | Optional Loads an external CSS stylesheet URL |
| app[l] | Controls which personalisation app is used (defaults to acp3_2-staging). |
| app[c] | Controls which personalisation app config is used (defaults to mt217h0kr51b1wh). |
| time | Security feature, see developer documentation |
| nonce | Security feature, see developer documentation |
| origin | Security feature, see developer documentation |
| hmac | Security feature, see developer documentation |
The VPC User
The VPC will assume the role of a CPP user with the user name whitelabel-vpc-XYZ,
where XYZ is the company ref ID.
This user must already exist in CPP and have read access to the square, landscape and portrait product categories as well as write access to the pending product category.
The user should have a random password set along with a custom role that denies all access.
Creating Products
Once the user clicks Create Products (in multi product mode) or Save (in single product mode), the VPC app will then create products using the user’s design in CPP.
Once the CPP products have been created, the VPC app will expose product information to the external system via the use of a simple Javascript API.
The product information given to the external system will include:
- The CPP product ID (both for the virtual product and the base product).
- The base product supplier SKU.
- The name of the virtual product.
- An automatically generated retail SKU for the virtual product.
- A thumbnail of the virtual product.
The Approval Process
A normal CPP user with a suitable access role and write access to both the pending and approval product categories can then see any pending approvals via the Approval Requests tool in CPPv2.
Approving a product will:
- Remove the approval request
- Move the product from the pending category into the approved category
- Lock the product
- Trigger a webhook callback
Rejecting a product will:
- Remove the approval request
- Trigger a webhook callback
The Approval Webhook
The approval webhook allows a external system to know when a product has been approved or rejected.
The data passed to the webhook includes the product ID and a flag to indicate approval or rejection.
The webhook URL can be set via the Webhooks / Product Approval Status Change URL
advanced company setting.
More details on the webhook can be found in the developer documentation.
Developer Documentation
Developer documentation is currently in the process of being written.
It will be available via developers.custom-gateway.net when ready.