# Customize Status Bar

## Content

You can customize the status bar in Designer Component by adding custom items using the [StatusBar class](/spreadjs/api/v17/modules/GC.Spread.Sheets.StatusBar) methods.

To know more about customizing the status bar, refer to [Status Bar](/spreadjs/docs/v17/features/workbook/UsingtheStatusBar).

Follow the below steps to add a company contact mail (for example "sales-kor@mescius.com") as a status item in the status bar.

1. Initialize the designer instance.

    ```JavaScript
    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
    ```
2. Get the status bar instance using [StatusBar.findControl](/spreadjs/api/v17/modules/GC.Spread.Sheets.StatusBar#findControl) method. This method accepts the host element or the host element id.

    ```JavaScript
    var statusBar = GC.Spread.Sheets.StatusBar.findControl(document.getElementsByClassName("gc-statusBar"));
    ```
3. Add the status item using the [StatusBar.StatusItem](/spreadjs/api/v17/modules/GC.Spread.Sheets.StatusBar#StatusItem) method.

    ```JavaScript
    var spanItem = new GC.Spread.Sheets.StatusBar.StatusItem('spanItem', {menuContent: 'current span', value: 'Contact: sales-kor@mescius.com'});
    statusBar.add(spanItem);
    ```

The below output will be generated.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/designer-statusbar.gif)