How to personalize your video conference component with SuperViz
Tags: videosdk, learning, webdev, superviz
Published: 2024-03-06 17:21:46

SuperViz is a low-code SDK designed to accelerate your software development by entrusting us with the responsibility of crafting top-tier collaboration tools for you. With just a few lines of code, you can [implement a video conference feature](https://docs.superviz.com/sdk/video/video-conference) inside your application. But what if you want more customization than the default options of our Video SDK? 

In this article, we are going to show how to use our methods and callback functions to customize your video meeting component. 

## Callback functions

When using the Video Conference, you can define a range of callbacks to handle specific events and interactions within the meeting. These callbacks allow you to respond to participant actions, meeting state changes, and other event-driven functionalities.

To define a callback, you need to pass a function when creating the Video Conference, as shown in the example below:

```jsx
import { VideoConference } from "@superviz/sdk/lib/components";

const video = new VideoConference({
  callbacks: {
    onToggleMicrophone: () => {},
    onToggleCam: () => {},
    onToggleTranscript: () => {},
    onToggleChat: () => {},
    onToggleScreenShare: () => {},
    onClickHangup: () => {},
    onToggleMeetingSetup: () => {},
  },
});
```

When you pass a function to the `callbacks` object, the default behavior of the Video Conference will be overridden by the function you provide. This allows you to customize the behavior of the Video Conference to suit your specific requirements.

For example, when using `onToggleChat()`, the chat modal will not be displayed when the participant clicks the chat button, as a custom function has been provided by you. This means you can use your own chat instead of ours.

## Methods

But let’s say you want to implement your own set of components for the buttons like “Hang up”, “Start Transcription”, “Share Screen”, “Mute/Unmute” and so on. You can still accomplish that by removing the button from the screen, and adding your own, as shown below:

```tsx
import { VideoConference } from "@superviz/sdk/lib/components";

video = new VideoConference({
	...
	screenshareOff: true // disables the screen share button
})
```

And you can have your own button anywhere on your page, by calling `toogleScreenShare` method on your HTML. Once activated it will ask the participant to share their screen. To do that, use the following code:

```tsx
<button id="personalized-id" 
		onClick={() => video.toggleScreenShare()} 
		value="Share your screen">
</button>
```

## Mixing callback functions and methods

Of course you can mix these two ways to accomplish new things, like adding new capabilities when a user clicks on our default button and still uses our implementation. Like, for example, using our chat modal, you can include the `toogleChat` within the callback function you provide, like so:

```tsx
const video = new VideoConference({
  callbacks: {
    onToggleChat: () => {
      // Your logic
      video.toggleChat();
    },
  },
});
```

In conclusion, the SuperViz Video SDK offers a wide range of customization options for your video conference tool. Whether you want to use our default options, or your own additional functionality, it allows you to enhance the Video SDK to your specific needs.