Daily.co API Documentation

Daily.co Video Calls API Developer Documentation

Welcome to the Daily.co API Documentation developer hub. You'll find comprehensive guides and documentation to help you start working with API Documentation as quickly as possible, as well as support if you get stuck. Let's jump right in!

API Reference

Factory methods and top-level configuration

You’ll never need to call the DailyIframe constructor directly. Instead, use one of the factory methods, createFrame(), wrap() or createTransparentFrame().

The factory methods accept a properties object. (You can also set these properties when you call the load or join() methods.)

// top-level configuration properties. can be passed to the factory
// method that creates the DailyIframe object, or to the join()
// method.
{
  url: <required: url of the meeting to join>
  token: <optional: meeting join token>
  iframeStyle: <optional: used only by `createFrame()`>
  customLayout: <optional: use a custom in-call UI>
  cssFile: <optional: for a custom UI, an external css stylesheet to load>
  cssText: <optional: for a custom UI, an inline css style text to load>
  bodyClass: <optional: for a custom UI, class attributes to apply to the iframe body element>
}

createFrame(parentEl, properties)

Use this method to create a call iframe element and insert it into the DOM.

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 the properties object defined above. 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.

You can set the css properties of the new iframe by passing a javascript-style css properties hash in the iframeStyle property. For example:

// for a full-page video call with the standard Daily.co UI
//
callFrame = window.DailyIframe.createFrame({
  iframeStyle: {
    position: 'fixed',
    width: '100%',
    height: '100%'
  }
});

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 are to fill
the width and height of the parent element.

wrap(iframe, properties)

Use this factory method to wrap an iframe DOM element that you've already defined.

The first argument is the iframe you want to wrap. The second argument is the properties object defined above. A properties argument is optional.

You will need to set allow="microphone; camera; autoplay" on your iframe to be able to turn on the camera and microphone.

createTransparentFrame(properties)

A convenience method that creates a full-page overlay, transparent iframe that ignores all pointer events.


Factory methods and top-level configuration


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.