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:

By default, only one call frame instance is supported at a time and the constructor will throw an Error if multiple are detected. Starting in daily-js 0.67.0, multiple instances are supported on an opt in basis. To opt-in, setallowMultipleCallInstances to true in your factory method's properties. and checkout this guide for more information.

createFrame() in action