> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Layouts

> Customize CometChat Calls SDK v5 call layouts on JavaScript with tile, spotlight, sidebar views, layout changes, and layout events.

The CometChat Calls SDK provides three layout modes to display participants during a call. Each participant can independently choose their preferred layout without affecting others.

## Available Layouts

| Layout      | Description                                           | Best For                              |
| ----------- | ----------------------------------------------------- | ------------------------------------- |
| `TILE`      | Grid layout with equally-sized tiles                  | Group discussions, team meetings      |
| `SIDEBAR`   | Main speaker with participants in a sidebar           | Presentations, webinars               |
| `SPOTLIGHT` | Large view for active speaker, small tiles for others | One-on-one calls, focused discussions |

## Set Initial Layout

Configure the initial layout when joining a session using the `layout` property in session settings:

```javascript theme={null}
const callSettings = {
  layout: "TILE", // or "SIDEBAR" or "SPOTLIGHT"
  // ... other settings
};

await CometChatCalls.joinSession(callToken, callSettings, container);
```

## Change Layout During Call

Change the layout dynamically during an active call:

```javascript theme={null}
// Switch to tile layout
CometChatCalls.setLayout("TILE");

// Switch to sidebar layout
CometChatCalls.setLayout("SIDEBAR");

// Switch to spotlight layout
CometChatCalls.setLayout("SPOTLIGHT");
```

## Listen for Layout Changes

Monitor when the layout changes:

```javascript theme={null}
CometChatCalls.addEventListener("onCallLayoutChanged", (layout) => {
  console.log("Layout changed to:", layout);
});
```

## Hide Layout Controls

To prevent users from changing the layout, hide the layout change button:

```javascript theme={null}
const callSettings = {
  hideChangeLayoutButton: true,
  // ... other settings
};
```

## Layout Constants

Access layout constants through the SDK:

```javascript theme={null}
const layouts = CometChatCalls.constants.LAYOUT;

console.log(layouts.TILE);      // "TILE"
console.log(layouts.SIDEBAR);   // "SIDEBAR"
console.log(layouts.SPOTLIGHT); // "SPOTLIGHT"
```