How to embed video calls on your own domain

Follow these steps to embed a video call on your website

You can add video calls to your own website, with our Daily.co video chat API. With a few lines of code, you can share your own URLs to chat with meeting guests. It’s free to start — our free plan lets you do nearly everything our paid plans offer, but with the flexibility of trying things out first!

## Embed a call on your site

Embedding calls requires a bit of code. If you aren’t comfortable with this, ask your website developer or engineering team for help. If you need more information, just [contact us](https://daily.co/contact-us). We are happy to help.

To embed a call on your site all you need to do is paste the following code onto your site — before the closing `</body>` tag.

    -- CODE language-markup --
   <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
   <script>
     callFrame = window.DailyIframe.createFrame();
     callFrame.join({ url: '<https://your-team.daily.co/hello>' })
   </script>

Then, just replace the link in the code above to one that you’ve created in your dashboard. For example, replace `https://your-team.daily.co/hello` with a room you've created from [your dashboard](https://dashboard.daily.co/).

Now try loading the page of your site! You should see a Daily.co video call running! This will work in tools like Webflow. Here's a screenshot of a call running on a Webflow staging URL.

Example of our simple embed on a custom domain

Notice that the call is embedded in the lower right hand corner of the browser. This is the default layout. However, you have full control over the layout of your call, as well as the design of your call.

Read on to learn how to create a full screen video call experience.

## Full screen video calls on your site

To take things a step further and create a full screen video call experience you need to add a bit more code. It's easy for anyone comfortable with website design and development:

First, add an iframe with a custom ID to your page. `<iframe id="ID-NAME" allow="camera; microphone; autoplay"></iframe>`. Be sure to set the `allow` value as it is shown above so that the browser asks for camera and microphone permissions.

Next add some CSS to set the iframe to full-screen. This works for the code snippet above.

    -- CODE language-css --
   #ID-NAME {
    width: 100%;
    height: 100%;
    border: 0;
    position: fixed;
    top: 0;
    left: 0;
   }

Finally, you'll need to update the script so that your call runs in the iframe you've just created. Edit the first `callFrame` line with our wrap method so that you can reference your iframe by its ID.

    -- CODE language-markup --
   callFrame = window.DailyIframe.wrap(
    document.getElementById('call-frame'),
   );

All together, this code will create video call that fills the height and width of the browser. As shown in the screen shot below.

Example of a full-screen video call embed on a custom domain

## How your custom URL works

Creating a full screen video call experience on your own domain, like `you.com/video-call` gives you the ability to brand your user's experience. Rather than pointing your users to a Daily.co video call link, you can point them to any URL on your domain.

Your users will feel like they never left your product. And you have the added benefit of improving your SEO down the road.

Technically, here's what you did with the code above:

- You created a meeting link in your Daily.co dashboard. Like: `your-team.daily.co/video-call`
- With the code above, you loaded `your-team.daily.co/video-call` on one of your own web pages. Let's say you put the video call iframe on the URL, `you.com/videocall`
- By adding the CSS above, you set the iframe containing the meeting link to span the entire page

When your users visit `you.com/videocall`, the web page loads an iframe with your meeting link. Since the iframe takes up the entire window, your users simply see the video call happening on your own web address (not ours!).

By simply following the steps above, you can quickly, and easily, create a rich video call experience for any link on your site.

Recent posts