Customize Conversation UI

You can customize your conversation interface to match your style by updating Daily’s Prebuilt UI. Here’s an example showing how to customize the conversation UI by adding leave and fullscreen buttons, changing the language, and adjusting the UI color.

For more options, check the Daily theme configuration reference and Daily Call Properties.

Customization Example Guide

Step 1: Create Your Conversation

In this example, we will use stock face ID r90bbd427f71 (Anna) and stock PAL ID pcb7a34da5fe (Sales Development Rep).

Use the following request body example:

curl --request POST \
  --url https://tavusapi.com/v2/conversations \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: <api_key>' \
  --data '{
  "face_id": "r90bbd427f71",
  "pal_id": "pcb7a34da5fe"
}'

Replace <api_key> with your actual API key. You can generate one in the PAL Maker.

Step 2: Customize the Conversation UI

Make a new index.html file
Paste following code into the file, replace DAILY_ROOM_URL in the code with your own room URL from step above

<html>
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <body>
    <script>
      call = window.Daily.createFrame({
        showLeaveButton: true,       // Leave button on bottom right
        lang: "jp",                  // Language set to Japanese
        showFullscreenButton: true,  // Fullscreen button on top left
        iframeStyle: {
          position: 'fixed',
          top: '0',
          left: '0',
          width: '100%',
          height: '100%',
        },
        theme: {
          colors: {
            accent: "#2F80ED",      // primary button and accent color
            background: "#F8F9FA",  // main background color
            baseText: "#1A1A1A",    // text color
          },
        },
      });
      call.join({ url: 'DAILY_ROOM_URL' });
    </script>
  </body>
</html>

Step 3: Run the Application

Start the application by opening the file in the browser.

Embed Conversational Video Interface Overview

⌘I

Getting started

Build

Deploy

Debug

Guides

Resources

Customize Conversation UI

Customization Example Guide

​Customization Example Guide

Customization Example Guide