createFrame()

createFrame(parentEl, {properties})

Compatibility:
Prebuilt
Custom

Use this method to create a DailyCall client along with a Daily Prebuilt iframe embedded in the DOM, which the DailyCall controls.

Both arguments are optional. If you provide a parentEl, the new iframe will be appended as a child of that element. Otherwise, the new iframe will be appended as a child of document.body.

The second argument is a properties object. If you don't set at least the url property here, you'll need to set it later when you call the join() or load() method.

Styling the Daily Prebuilt iframe

iframeStyle

You can set the CSS properties of the new iframe by passing a javascript-style css properties hash in the iframeStyle property, like so:

The default iframeStyle (styles applied to the iframe if you don't supply any) depend on whether the new iframe is a child of document.body or not. If the new iframe is a child of document.body, the defaults position the iframe as a floating window in the bottom right of the page. If, on the other hand, you specify a parentEl deeper in the DOM tree, the defaults fill the width and height of the parent element.

layoutConfig

When the default Active Speaker View is turned off (through the activeSpeakerMode iframe property or setActiveSpeakerMode() method), Grid View can be customized via a layoutConfig iframe property. layoutConfig specifies the maximum and minimum participant tiles per page when a browser is resized:

Only one call frame instance is supported at a time. When re-joining a call, you can either re-use the existing call frame instance or be sure to call destroy() on an existing one before creating a new one. Duplicate call frame instances will result in a plethora of issues and loud warnings. Starting in daily-js 0.45.0, createFrame() throws an Error if multiple call frame instances are detected.