> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Layouts

> CometChat Calling SDK v5 - Call Layouts for JavaScript

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"
```