---
title: "Interface: ISurfaceSwitchConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.ISurfaceSwitchConfig/"
---

# Interface: ISurfaceSwitchConfig

> A structure defining the configuration of the navigation area in the Bottom toolbar.

## Example

``` js
configuration = {
   widgets: {
       BottomToolbar: {
           zoomValueEnabled: false,
           zoomButtonsEnabled: false,
           fullWindowButtonEnabled: false,
           fullScreenButtonEnabled: false,

           // Enable only page names in the navigation area by default.
           surfaceSwitch: {
               enabled: true,
               showThumbnails: false,
               showSurfaceNames: true,
               scrollPageButtonsEnabled: false,
               toggleSurfaceButtonsEnabled: false,
               firstAndLastButtonsEnabled: false,
               specificForSurfaceCount: {
                   // Disable the navigation area for single-page products.
                   1: {
                       enabled: false
                   },
                   // Enable only page names for two-page products.
                   2: {
                       showSurfaceNames: true,
                       showThumbnails: false,
                       scrollPageButtonsEnabled: false,
                       toggleSurfaceButtonsEnabled: false,
                       firstAndLastButtonsEnabled: false
                   }
               }
           }
       }
   }
};
```

## Properties

### enabled?

> `optional` **enabled?**: `boolean`

Enables the pagination control. The default value is `true`.

***

### showThumbnails?

> `optional` **showThumbnails?**: `boolean`

Displays page thumbnails. The default value is `false`.

***

### showSurfaceNames?

> `optional` **showSurfaceNames?**: `boolean`

Displays page names in the pagination control. If it is `true` and you name your product surfaces, then these names are shown in the navigation area. Otherwise, surface indexes are shown. The default value is `false`.

***

### scrollPageButtonsEnabled?

> `optional` **scrollPageButtonsEnabled?**: `boolean`

Displays the **Next** and **Previous** buttons, which allow for scrolling the page selector. The default value is `true`.

***

### toggleSurfaceButtonsEnabled?

> `optional` **toggleSurfaceButtonsEnabled?**: `boolean`

Displays the **Next** and **Previous** buttons, which allow for switching between pages. The default value is `false`.

***

### firstAndLastButtonsEnabled?

> `optional` **firstAndLastButtonsEnabled?**: `boolean`

Displays the **First** and **Last** buttons for the page navigation. The default value is `true`.

***

### specificForSurfaceCount?

> `optional` **specificForSurfaceCount?**: `object`

Defines the pagination control for products consisting of the certain number of pages. There are the default settings for single-page, two-page, and three-page products.

#### Index Signature

\[`countOfSurfaces`: `string`\]: `ISurfaceSwitchConfig`