Customize Daily Prebuilt's UI

If you need to build a fully custom UI, use the Daily call object.

Feature configuration

Many parts of the in-call experience can be customized by changing domain, room, or meeting token properties.

Domain and room properties

If a property is set at both the domain and room level, the room setting takes precedence.

Domain and room level properties
`enable_people_ui`
`enable_prejoin_ui`
`enable_network_ui`
`enable_emoji_reactions`
`enable_hand_raising`

Room and meeting token properties

If a property is set at both the room and meeting token level, the meeting token setting takes precedence.

Room and meeting token level properties
`enable_screenshare`
`enable_recording`
`start_with_video_off`

These UI-related properties can be specified at the room level:

Room level properties
`enable_knocking`
`enable_chat`

And these UI-related properties can be configured using meeting tokens:

Meeting token level properties
`is_owner`
`start_cloud_recording`
`close_tab_on_exit`
`redirect_on_meeting_exit` (can also be set at the domain level)

Pre-join experience

If you’re using Daily Prebuilt, setting enable_prejoin_ui to true at either the room or domain level turns on a lobby experience for call participants. They can check their camera and microphone before joining a call, and also wait to be admitted by the host if the room is private and they are joining without a token. You can also take advantage of a suite of Daily methods and events geared towards implementing a custom lobby if you’re building on top of the Daily call object. With these methods and events you can:

Determine the local participant’s access level, even before attempting to join a meeting: preAuth(), accessState(), 'access-state-updated'
Request elevated access to a meeting: requestAccess()
Manage pending access requests (if you’re a meeting owner): waitingParticipants(), updateWaitingParticipant(), updateWaitingParticipants(), 'waiting-participant-added', 'waiting-participant-updated', 'waiting-participant-removed'

These methods and events are also all available when using Daily Prebuilt if you’d like to build similar waiting room experiences around the call embed.

Leave behavior

Two properties control what happens when a user leaves a meeting from a standalone browser tab: close_tab_on_exit and redirect_on_meeting_exit. If close_tab_on_exit is set to true, the browser tab closes when the user clicks the leave meeting button in the in-call menu bar. If the redirect_on_meeting_exit property is set, the property value will be interpreted as a URL that the browser should redirect to when the user clicks the leave meeting button. A query string that includes the parameter recent-call=<domain>/<room> is appended to the URL.

By default, there is no leave meeting button when you embed Daily Prebuilt. You control that meeting flow with your own UI code outside the iframe. Or you can add a leave call button to the embedded UI with our Javascript API.

Branding

By default, Daily branding is shown in the call UI.

There is no associated cost to remove Daily branding from the call UI; you simply need to add your credit card information to your account and hide Daily branding via the hide_daily_branding domain property.

JavaScript API customization

The following customizations are applied via the daily-js API rather than room or domain configuration. They require a call instance created with createFrame() or wrap(). For color theming, see Customizing Daily Prebuilt calls with color themes.

Custom CSS

Inject CSS into the Prebuilt iframe for styling beyond what the theme colors allow. You can pass CSS options at construction time via createFrame():

const call = Daily.createFrame({
  bodyClass: 'my-call-theme',
  cssFile: 'https://example.com/daily-overrides.css',
  cssText: `
    .daily-video-tile { border-radius: 12px; }
    .daily-controls { background: transparent; }
  `,
});

Or update CSS after construction using loadCss():

call.loadCss({
  bodyClass: 'updated-theme',
  cssFile: 'https://example.com/updated.css',
  cssText: '.my-class { color: red; }',
});

bodyClass

string

CSS class name(s) added to the <body> element inside the Prebuilt iframe.

cssFile

string

URL of an external stylesheet to load inside the iframe.

cssText

string

Inline CSS string injected as a <style> tag inside the iframe.

Layout configuration

Control the number of video tiles shown in grid view via layoutConfig at construction time:

const call = Daily.createFrame({
  layoutConfig: {
    grid: {
      maxTilesPerPage: 9,
      minTilesPerPage: 1,
    },
  },
});

Custom integrations

Embed external web apps as a sidebar panel or main area overlay inside Prebuilt. Define integrations with setCustomIntegrations(), then start and stop them with startCustomIntegrations() and stopCustomIntegrations().

call.setCustomIntegrations({
  'my-app': {
    label: 'My App',
    location: 'sidebar',          // 'sidebar' | 'main'
    src: 'https://app.example.com/embed',
    iconURL: 'https://app.example.com/icon.png',
    controlledBy: 'owners',       // '*' | 'owners' | string[]
    shared: true,                 // sync open/close state across all participants
    allow: 'camera; microphone',
    sandbox: 'allow-scripts allow-same-origin',
    loading: 'lazy',
  },
});

// Start or stop integrations
call.startCustomIntegrations('my-app');
call.stopCustomIntegrations('my-app');

// Read currently registered integrations
const integrations = call.customIntegrations();

Key options:

Option	Description
`location`	`'sidebar'` renders as a panel; `'main'` renders as an overlay in the call area
`controlledBy`	Who can start/stop the integration: `'*'` (all), `'owners'`, or a list of session IDs
`shared`	When `true`, starting/stopping is synchronized for all participants
`loading`	`'lazy'` (default) loads the iframe on first open; `'eager'` loads immediately

Custom tray buttons

Add custom buttons to Prebuilt’s control bar with updateCustomTrayButtons(), then listen for clicks via the custom-button-click event.

call.updateCustomTrayButtons({
  'raise-hand': {
    iconPath: 'https://example.com/icons/hand.svg',
    iconPathDarkMode: 'https://example.com/icons/hand-dark.svg',
    label: 'Raise hand',
    tooltip: 'Raise or lower your hand',
    visualState: 'default',
  },
});

call.on('custom-button-click', ({ button_id }) => {
  if (button_id === 'raise-hand') {
    toggleHandRaise();

    // Update the button's visual state to reflect the toggle
    const current = call.customTrayButtons();
    const isActive = current['raise-hand'].visualState === 'active';
    call.updateCustomTrayButtons({
      'raise-hand': {
        ...current['raise-hand'],
        visualState: isActive ? 'default' : 'active',
      },
    });
  }
});

visualState controls the button’s appearance: 'default', 'active' (toggled/pressed style), or 'sidebar-open' (indicates an open sidebar panel).

​Feature configuration

​Domain and room properties

​Room and meeting token properties

​Pre-join experience

​Leave behavior

​Branding

​JavaScript API customization

​Custom CSS

​Layout configuration

​Custom integrations

​Custom tray buttons

Feature configuration

Domain and room properties

Room and meeting token properties

Pre-join experience

Leave behavior

Branding

JavaScript API customization

Custom CSS

Layout configuration

Custom integrations

Custom tray buttons