Frontend integration
Use this section to embed Customer's Canvas Hub editors and Workflow Elements into your storefront.
It enables customization scenarios in online stores, B2B print ordering portals, marketing automation systems, print-on-demand solutions, and similar applications. No matter what application type you build, typically, you need to follow same steps: load a product configuration or a design template into an editor, let customers personalize it, save the result, and send it to Customer's Canvas Hub to render a print-ready file.
This section explains the available integration options.
Choose an integration approach
Customer's Canvas Hub editors are integrated through different JavaScript libraries.
- Workflow Elements
- Recommended for most new implementations.
- Supports freehand and option-based product configuration scenarios.
- Works well for products with options and multiple variants.
- UI Framework
- More flexible, but more complicated.
- Suitable for older Customer's Canvas Hub implementations.
- Supports classic Design Editor, Preflight Tool, and Data-Driven Editor.
- IFrameAPI.js
- Works only with classic Design Editor.
- Useful for migrations from on-premises Design Editor installations.
Before you start
Before you embed an editor, prepare tenant data, products, assets, and integration values as explained in Prepare for frontend integration.
Choose an editor
Choose an editor based on the customization scenario you support. Some integrations use several editors or additional components, such as Options or Configurator.
| Scenario | Product type examples | Editor | JS library |
|---|---|---|---|
| Freehand editor for customizing products from scratch or pre-designed templates | Print products, promo items, apparel, wide format printing | Handy Editor | Workflow Elements |
| Editor for products with a non-trivial structure that requires 3D preview | Folding cartons, labels, wide format printing | Handy Editor 3D | Workflow Elements |
| Option-based product configurator with limited editing options, similar to a product details page | Book covers, invitations, trophies, promo items | Simple Editor | Workflow Elements |
| Same editor as you use in BackOffice, e.g. if you would like to add asset management functionality outside of Customer's Canvas Hub | Any Customer's Canvas Hub design template types | Template Editor | Workflow Elements |
| Form-based editor where customers cannot change the template layout or make other freehand edits | Marketing collateral, business cards | Data-Driven Editor | UI Framework |
| Editor for adjusting variable data printing templates | Direct mail, nameplates, badges | Design Editor | UI Framework or IFrameAPI |
| Migration from on-premises Design Editor | All kinds of products | Design Editor | UI Framework or IFrameAPI |
| Add UI to a product detail page to work with options and variants configured in Customer's Canvas Hub admin | All kinds of products (set up options, no customization) | Options | Workflow Elements |
| Add UI to a product detail page to work with parametric products (set up assets and options, no customization) | All kinds of products | Configurator | Workflow Elements |
Choose an integration strategy
Consider how to connect Customer's Canvas Hub data to your system.
- Store design template IDs in product metadata in your platform.
- Store Customer's Canvas Hub product IDs and matching SKUs in your platform.
- Store your system product IDs in Customer's Canvas Hub as product references.
The last option is the recommended approach because it does not require changes in your system administration interface. However, if you don't have products with multiple variants or mockups that depend on product options, working with assets directly may be simpler.