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:

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"