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

1

Step 1: Get an API Key

  1. Go to the Tavus platform and select API Key from the sidebar menu.
  2. Click Create New Key to begin generating your API key.
  3. Enter a name for the key and (optional) specify allowed IP addresses, then click Create API Key.
  4. Copy your newly created API key and store it securely.

We cannot recover your API Key if you lose it.

2

Step 2: Create a Conversation

In this example, we will use stock replica ID rfe12d8b9597 (Nathan) and stock persona ID pdced222244b (Sales Coach).

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 '{
  "replica_id": "rfe12d8b9597",
  "persona_id": "pdced222244b"
}'

Note: Replace <api_key> with your actual API key.

3

Step 3: Customize the Conversation UI

  1. Make a new index.html file

  2. 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>
4

Run the Application

Start the application by opening the file in the browser.