buttonsWithNotifyClick and need button toggled ui

I am trying to prevent default behavior of chat button by using buttonsWithNotifyClick, and i was able to done that. But now i want to change the button UI as toggled when it pressed, can i achieve that without appearing the chat,

Only thin i need, when user press toolbar chat icon, it appears my custom chat and button need to show as toggled and tooltip need to change as per that

Ping @horymury

You can do the following:

  1. Hide the jitsi default chat button by passing the toolbarButtons on the configOverwrite, without passing the ‘chat’ key:
    jitsi-meet/config.js at f76122f0b005610b5b0a2118e52c1f7d7259b6a5 · jitsi/jitsi-meet · GitHub
  2. Inject your own custom button for chat also through the configOverwrite:
    Configuration | Jitsi Meet
    jitsi-meet/config.js at f76122f0b005610b5b0a2118e52c1f7d7259b6a5 · jitsi/jitsi-meet · GitHub
  • initially set a suggesstive ‘toggled off’ icon for the custom button
  • give it a suggestive id, eg ‘custom-chat-button’
  1. Add the toolbarButtonClicked event handler
    Events | Jitsi Meet
    and use the overwriteConfig command to update your custom button
    Commands | Jitsi Meet
   api.on('toolbarButtonClicked', ({ key }) => {
      // if the toolbar button clicked is our custom button, do stuff
      if (key === 'custom-chat-button') {
        // we toggle our own chat
        <toggle my custom chat here>

        // we overwrite the icon and update the text for our custom chat button
                      icon: myCustomChatOpened ? <myToggledOnIcon>: <myToggledOffIcon>,  // we set the correct icon based on toggled state
                      id: 'custom-chat-button',
                      text: myCustomChatOpened  ? 'Close chat' : 'Open chat'

Haven’t tested this myself, but it should work. If you have any issues, please ping me.


How can I take that custom button into my toolbar main buttons

What type icons that we can feed

  • By main buttons you mean the ones always visible and not on the popup buttons? We don’t support configuring that yet unfortunately.
  • the supported icon types are mentioned on the jitsi documentation:
    Configuration | Jitsi Meet
1 Like

Can’t we change the status of the default chat button to toggled without opening jitsi chat

The default chat button’s toggle is linked to the redux store’s chat open prop and at the moment there is no way to overwrite it.