Skip to main content

dyte-chat-toggle

A button which toggles visibility of chat.

You need to pass the meeting object to it to see the unread messages count badge.

When clicked it emits a dyteStateUpdate event with the data:

{
  activeSidebar: boolean;
  sidebar: 'chat' | 'none';
}
<dyte-chat-toggle size="sm" class="dyte-el"></dyte-chat-toggle>
<dyte-chat-toggle size="lg" class="dyte-el"></dyte-chat-toggle>
<dyte-chat-toggle variant="horizontal" class="dyte-el"></dyte-chat-toggle>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.meeting = meeting;
  }
</script>

Props​

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()

variant

Variant

Default
'button'
Type
"button" | "horizontal"