Workflow Elements

Workflow Elements is a set of Customer's Canvas customization components you can embed into a storefront or other web application. This section helps you choose the right component, understand the shared integration model, and open the component-specific documentation.

Recommended learn path

1. Prepare test products, assets, app details and credentials - see Prepare a frontend integration for more detail.
2. Learn Workflow Elements basics to understand how they are organized.
3. Choose the component that matches your storefront scenario.
4. Open the component documentation and follow its quick start or initialization guide.
5. Explore the sample application: https://github.com/aurigma/CCHubSample_WorkflowElements

Choose a component

• Use Handy Editor when customers need freehand design editing.
• Use Simple Editor when customers should customize a product through forms, options, image uploads, and controlled layout choices.
• Use Template Editor when you would like to provide a tool to configure editable templates outside of Customer's Canvas Hub admin panel.
• Use Customers Canvas Options when the page needs a product option selector.
• Use Configurator for parametric product configuration.

Sample application

The Workflow Elements sample application shows how the components are embedded in a storefront-like project. Use it after you prepare a tenant and read the basics, so the sample code has real tenant, product, and storefront values to work with.

It is written with React/NodeJS. However, no strong React knowledge is required. Customer's Canvas Hub components can be used with any JavaScript framework and backend technology.

Clone the sample application from Github

For more details, refer to the Samples topic.