Integration with WooCommerce

When your site includes a design editor, your users can customize products that you offer online. To allow your users to personalize print products, you can apply the Aurigma Personalization Plugin. This plugin embeds Customer's Canvas into your WooCommerce site. You can configure Customer's Canvas for a single product, which can then be personalized. For example, this can be the template name of an IDML template defining a product design for Wedding Invitations, Party Invitations, BBQ Invitations, etc. in a single category, Invitations.

In turn, your users can select products, personalize them in the editor, and make an order. After that, you can find and process these orders in the WooCommerce control panel.

Installing the Plugin

The current Customer's Canvas distribution does not include the Personalization plugin. Please contact our support team for the actual version of this plugin.


To run the plugin, you need a deployed Customer's Canvas instance - either the cloud or on-premises version will work. You can find step-by-step instructions on how to deploy the on-premises version on your server in the corresponding topic.

  1. In the WooCommerce control panel, click Plugins.
  2. Install and activate the Aurigma Personalization Plugin.

    Installing the WooCommerce plugin.

  3. Click Settings > Personalization Plugin > Editors.

    Uploading the WooCommerce plugin.

  4. Click Upload Editor and upload the file.
  5. Click the uploaded editor in the list.
  6. Click Upload Config and upload the JSON file.
  7. Click the Settings tab.

    Setting up the WooCommerce plugin.

  8. Copy and paste the URL of your Customer's Canvas instance.
  9. Copy and paste your Customer's Canvas API Key.
  10. Click the Save button.

For details about editor configs, you can refer to the UI Framework Tutorials.

Getting the API Key

To get your API Key and Customer's Canvas URL, log on to your cloud control panel and click the AppSettings.config tab.

In AppSettings.config, your API Key is the value of the ApiSecurityKey parameter.

Getting the API key and URL.

If the following line is commented, uncomment it:

<add key="ApiSecurityKey" value="CustomerSecurityKey" />

Then, you need to replace the value CustomerSecurityKey with your unique key (for example, you can generate a Globally Unique Identifier (GUID)).

To get the URL of your Customer's Canvas instance, replace <yourId> with the ID of your instance in the following link:<yourId>/SimplePolygraphy

Associating Products with Customer's Canvas

  1. In the WooCommerce control panel, click Products and then click Personalize.

    Enabling the product personalization.

  2. Select an editor and config.
  3. Select configuration attributes (templates and mockups).
  4. Click the Apply button.

Most of plugin configs require you to choose a design and mockup file. The Personalization plugin searches for these files on your Customer's Canvas instance. Just place them in the \ProductTemplates\designs\ and \ProductTemplates\mockups\ folders respectively, and these files will appear in the drop-down lists.

To verify that Customer's Canvas is integrated with your WooCommerce store, you can navigate to a product view and click the Personalize button to open the editor.

If you want to remove the connection between your WooCommerce product and the editor, click Unlink.

Downloading High-Resolution Outputs

To download resulting PDF files for order, click WooCommerce > Orders. Then, open order details and click Download design.

Downloading hi-res PDF outputs.

See Also