Call Layouts

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:

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:

// 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:

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:

const callSettings = {
  hideChangeLayoutButton: true,
  // ... other settings
};

Layout Constants

Access layout constants through the SDK:

const layouts = CometChatCalls.constants.LAYOUT;

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