The *ovToolbarAdditionalPanelButtons directive allows to add additional panel buttons to the toolbar. In the example below we've added a simple button without any functionality. To learn how to toggle the panel check the AdditionalPanelsDirective.

You can run the associated tutorial here.

<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
    <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
        <button (click)="onButtonClicked()">MY PANEL</button>
export class ToolbarAdditionalPanelButtonsDirectiveComponent {

 sessionId = "toolbar-additionalPanelbtn";
 tokens!: TokenModel;

 constructor(private httpClient: HttpClient) { }

async ngOnInit() {
   this.tokens = {
    webcam: await this.getToken(),
     screen: await this.getToken(),

 onButtonClicked() {
   alert('button clicked');

 async getToken(): Promise<string> {
   // Returns an OpeVidu token



results matching ""

    No results matching ""