Skip to main content
Daily.createFrame(parentEl, { properties }) Prebuilt Custom Creates a DailyCall instance and embeds a Daily Prebuilt iframe in the DOM. Both arguments are optional. If parentEl is provided, the iframe is appended as a child of that element; otherwise it is appended to document.body.

​
Parameters

​
parentEl
HTMLElement
Optional. The DOM element to append the Daily Prebuilt iframe into. Defaults to document.body if omitted.
​
properties
DailyCallOptions
Optional configuration. If url is not set here, it must be provided when calling join() or load(). See DailyCallOptions for the full list of options.

​
Prebuilt-specific options

createFrame() supports three options that are specific to how it embeds and controls the Daily Prebuilt iframe.

​
iframeStyle

A JavaScript CSS properties object applied directly to the iframe element. If omitted, the default styles depend on the parent: when appended to document.body the iframe floats as a window in the bottom-right corner; when appended to a specific parentEl it fills the width and height of that element. 
// Make the call fullscreen
const call = Daily.createFrame({
  iframeStyle: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
});

​
layoutConfig

Customizes Grid View tile counts when Active Speaker View is disabled (via the activeSpeakerMode property or setActiveSpeakerMode()). Specifies the minimum and maximum participant tiles per page when the browser is resized. 
Daily.createFrame({
  layoutConfig: {
    grid: {
      minTilesPerPage: 3,  // default: 1, minimum: 1
      maxTilesPerPage: 36, // default: 25, maximum: 49
    },
  },
});

​
userData

Custom data associated with the local participant. In Daily Prebuilt, setting userData.avatar to a publicly accessible image URL displays that image on muted participant tiles and in the People tab. See setUserData() to update it after joining. 
Daily.createFrame(parentEl, {
  userData: {
    avatar: 'https://example.com/avatar.jpg',
  },
});
Video call with one participant using custom avatar image

​
Return value

Returns a new DailyCall instance.

​
Example

const call = Daily.createFrame(document.getElementById('call-container'), {
  url: 'https://your-domain.daily.co/room-name',
});

await call.join();

​
See also

Types

Methods

Guides

Demos