---
title: "Configuring UI on different pages | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/multipage-config/"
---

# Configuring UI on different pages

> The Design Editor allows for customizing the designer's look and feel in several ways. You can set up:

- [A color set](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/color-picker.md)
- [A font list mode](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/font-list.md)
- [An editor mode](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/simple-and-advanced-modes.md)
- [Toolbars and widgets](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/ui-overview.md)

All the listed parameters are defined either for an entire web-to-print designer or for a single print product, but there is another way to set up the user interface. You can customize widgets in a different way for different pages.

The standard user interface of the Design Editor is shown in the following screenshot.

![The interface of Customer's Canvas.](images/CustomizingUserInterface01.png)

If you open the **Text** menu, you will notice that it contains the **Add text** and **Rich text** commands.

![The Text menu.](images/PerSurfaceWidgets1.png)

Also, there is the **Background** element in the Object Inspector. The following image shows the Color Picker with the default palette.

![The default color picker.](images/PerSurfaceWidgets2.png)

To find out how to set up these widgets for all your products and pages at once, refer to the [UI customization example](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/ui-overview.md#configuration-sample). Furthermore, what if you want your users to add texts and images to some pages, but not to other pages?

When you have a number of pages in a product, you can configure the Color Picker, the Object Inspector, and the Toolbox for those pages, using their names. For example, let us configure these widgets for the back side of the business card shown in the previous screenshot:

- Enable the **Add text** and **Image** commands in the Toolbox.
- Remove the **Background** element from the Object Inspector.
- Disable the default palette and define spot colors in the Color Picker.

```js title="Configuring UI on different pages"
product: {
	// Define a product which contains two pages. Their names are "FRONT" and "BACK".
	surfaces: [
		{
			name: "FRONT",
			printAreas: [ 
				{ designFile: "Card_FrontSide" }
			]
		},
		{
			name: "BACK",
			printAreas: [
				{ designFile: "Card_BackSide" }
			]
		}
	]
};

config: {
	// Set the configuration for the "BACK" page. The "FRONT" page keeps default settings.
	perSurfaceConfiguration: {
		"BACK": {
			widgets: {
				Toolbox: {
					buttons: ["Text", "Image"]
				},
				ObjectInspector: {
					bgItemEnabled: false
				},
				ColorPicker: {
					// Define a list of four spot colors.
					sections: [{
						type: "PaletteSection",
						viewType: "Line",
						palette: [[
							"spot(PANTONE 419 CP, cmyk(86%,70%,69%,95%,100%), 1, 100%)",
							"spot(PANTONE 8783 C, cmyk(100%,55%,0%,55%,100%), 1, 100%)",
							"spot(PANTONE 7683 C, cmyk(75%,50%,0%,0%,100%), 1, 100%)",
							"spot(TRUMATCH 21-h, cmyk(0%,0%,0%,0%,100%), 1, 100%)"
						]]
					}]
				}
			}
		}
	}
};

// Load the editor.
CustomersCanvas.IframeApi.loadEditor(iframe, product, config);
```

As a result, for the **BACK** page, the editor appears as follows:

![The interface of the web-to-print editor.](images/PerSurfaceWidgets3.png)

If the widgets are configured both for the editor and for a page, then the page settings override general settings.