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 to 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.
  3. Functions of submenus under a button are as follows:
    • When subMenu is empty and the button is clicked, a notification is sent, indicating that the button that matches the ID is clicked.
    • When subMenu is not empty and the button is clicked, the level-2 menu specified by subMenu is displayed. No notification is sent.

    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. For details about how to refresh a custom button, see Updating Custom Button Configurations.

  • 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": [
                        {
    		        "id": "customMenu",
    			"title": "Custom button",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 1,
                            "subMenu":[
                             {
                                "id": "customSecondMenu",
                                "title": "Submenu",
                                "buttonImg": "../../native/default/svg/icon-whiteboard.svg"
                             }
                             ]
    		    },
                        {
                            "id": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "id": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • Update custom buttons.
    Ensure that the values of id and buttonPos are correct and modify other information about the button. The following describes how to rename a button on the bottom toolbar.
    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
    		        "id": "customMenu",
    			"title": "Renamed button",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 1,
                            "subMenu":[
                             {
                                "id": "customSecondMenu",
                                "title": "Submenu",
                                "buttonImg": "../../native/default/svg/icon-whiteboard.svg"
                             }
                             ]
    		    },
                        {
                            "id": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "id": "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": [
                        {
    		        "id": "customMore",
    			"title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
    		    },
                        {
                            "id": "customShare",
                            "title": "Custom sharing",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • Clear custom buttons in a position.

    Define custom buttons to be deleted in customButton. If no custom button of a position is defined in customButton, all custom buttons in the position are cleared. The following describes how to clear custom buttons on the bottom toolbar.

    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
                            "id": "customMore",
                            "title": "Custom more",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "id": "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": [
                ]
            }
        }
    }
}