Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tavus.io/llms.txt

Use this file to discover all available pages before exploring further.

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: Create Your Conversation

In this example, we will use stock replica ID r90bbd427f71 (Anna) and stock persona 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 '{
  "replica_id": "r90bbd427f71",
  "persona_id": "pcb7a34da5fe"
}'
Replace <api_key> with your actual API key. You can generate one in the Developer Portal.
2

Step 2: 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>
3

Step 3: Run the Application

Start the application by opening the file in the browser.