Help Center/ Meeting/ Client SDK Reference/ Electron SDK/ Remarks/ Customizing Meeting Control Buttons
Updated on 2022-07-11 GMT+08:00

Customizing Meeting Control Buttons

  1. Add custom buttons. You can add buttons on the bottom toolbar, sharing toolbar, and More menus. Currently, you can customize one button on the bottom or sharing toolbar and the button is displayed before the More menu. More custom buttons are displayed in the More menu. Custom buttons in the More menu take effect on the bottom and sharing toolbars. Custom buttons in the More menu on the bottom toolbar are displayed at the end of the More menu. Custom buttons in the More menu on the sharing toolbar are displayed before the Leave button.
  2. Delete custom buttons. Call the Config API delete the button configuration in customButton. If customButton:[] is passed, all custom buttons are cleared. If a position is specified under customButton but no specific custom button is specified, all custom buttons in the position are cleared.

    When calling the Config API to add, delete, or modify custom buttons, pass all custom buttons in the corresponding position. The bottom and sharing toolbars can be dynamically refreshed. More menus can only be refreshed when they are regenerated.

  • Add custom buttons.
    The following describes how to add a custom button with submenus on the bottom toolbar, sharing toolbar, and More menus.
    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
    		        "buttonId": "customMenu",
    			"title": "Custom button",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 1
    		    },
                        {
                            "buttonId": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "buttonId": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • Update custom buttons.
    The following describes how to rename a button on the bottom toolbar.
    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
    		        "buttonId": "customMenu",
    			"title": "Renamed button",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 1
    		    },
                        {
                            "buttonId": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "buttonId": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • Delete some custom buttons.
    Buttons defined in customButton are deleted and other custom buttons are retained. The following describes how to delete custom buttons on the bottom toolbar.
    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
    		        "buttonId": "customMore",
    			"title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
    		    },
                        {
                            "buttonId": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • Clear custom buttons in a position.

    All custom buttons in the position defined in customButton are deleted. If no custom button is configured in the position defined in customButton, all custom buttons in the position are cleared. The following uses the bottom toolbar as an example:

    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
                            "buttonId": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "buttonId": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        },
                    ]
                }
            }
        }
    }

  • Clear all custom buttons.

If an empty array is passed for customButton, custom buttons in all positions are cleared. The following is an example:

{
    "frame":{
        "confMenu":{
            "toolBar":{
                "customButton": [
                ]
            }
        }
    }
}