Get chatty with Daily

We have lots of conversations with developers building on Daily. One of the most common questions we hear is, “How can we add chat to our calls?” ‍

There are lots of reasons why teams might want to make text chat a part of their meetings, like if they’re building:

  • Classrooms, where a teacher might need to share lesson-related links or activities with students.

  • Virtual tours, when follow up information like detailed pricing could be sent instantly via chat instead of in an email later.

  • Any situation that needs a way for meeting participants to share thoughts and questions without interrupting the current speaker. (We can think of many of those!)

This post walks through all the ways to add chat to your video calls using just the Daily API: with our prebuilt UI from the dashboard or via a POST request to our /rooms endpoint, or within your own custom call layout. ‍

Enable chat in Daily's prebuilt UI

If you want to build a fast prototype or to minimize developer time for any reason, our prebuilt UI is the quickest way to get a chat enabled video call up and running quickly. Of course, a few trade offs come with speed. The default interface we provide is pretty set: you won’t be able to change how the chat icon or conversation thread appears. And, chat in this interface isn’t exposed to our API. It only persists during the call, so in order to see a chat history, you must save the messages in a downloadable text file before exiting the meeting. Finally, prebuilt chat isn’t currently available as a feature in HIPAA compliant calls.

If a more customizable option sounds like a better fit for you, skip ahead to "Build your own custom chat." Otherwise, read on! ‍

Turn on chat from the dashboard

Earlier this month, we launched lots of new features in the dashboard, including advanced room customization. ‍ From dashboard.daily.co, click “Rooms” on the left navigation bar. Click the “Create room” button, and you should see lots of options for setting up your new room. Scroll to “Show advanced room settings.” You should see a menu that lists “Text chat” as an option. Toggle the “Off” button to “On.” After reviewing the other settings, click “Create room” at the bottom of the page.

Screenshot of the Daily dashboard advanced room settings.
Turn on “Text chat” from the advanced room settings in the Daily dashboard.

With that, you should have a prebuilt Daily room with chat enabled ready to go! Copy and paste the link in your browser, and look for the chat option in the bottom left toolbar:

Screenshot of Daily.co call with chat enabled.
Look for the chat icon in the bottom left corner.

Create a chat enabled room with a POST request

If you'd rather not use the dashboard, you can also create a prebuilt Daily room with chat enabled through a POST request to our /rooms API endpoint. To make sure chat will be turned on, set the enable_chat configuration property to true:

curl --request POST \
     --url https://api.daily.co/v1/rooms \
     --header 'authorization: Bearer INSERT_YOUR_TOKEN_HERE' \
     --header 'content-type: application/json' \
     --data '{"properties":{"enable_chat":true}}'

You should see a response like the one below if all goes well. Test the returned url in your browser to be sure.

{ 
  "id":"41fc9a57-00ed-401d-a1fb-0422fab07ac5", 
  "name":"TyhAfU45KJMMnwP5S5sI", 
  "api_created":true, 
  "privacy":"public", 
  "url":"https://YOUR_DOMAIN.daily.co/TyhAfU45KJMMnwP5S5sI", 
  "created_at":"2020-07-17T17:40:14.967Z", 
  "config":
    {
      "enable_chat":true
    }
}

Build your own custom chat with the Daily API

While the prebuilt UI is great for getting a video call with text chat going quickly, some cases call for customized interfaces. We've seen developers build entirely from scratch solutions, and we've also seen them use the prebuilt UI with a separate custom chat outside the call frame.

All of them use the sendAppMessage() method and corresponding app-message event to build chat powered by the Daily API.

An example

Our simple-chat-demo features a chatbox that includes text input for a participant, a send button, and a message display.

<div id="ui-chat">
  <div id="messages">
  <!--Chats will show up here!-->
  </div>
  <div id="chat-input-wrapper">
    <input
      id="chatbox"
      type="text"
      placeholder="Type your message here..."
    />
    <button onclick="sendMessage()" id="send-message-button">
      <img
        src="./icon-assets/icon-send-chat.png"
        alt="Send chat icon"
      />
    </button>
  </div>
</div>

After a participant types a message and clicks send, a function fires that adds that message to the participant's local display. You might’ve guessed that from onclick="sendMessage()":

async function sendMessage() {
  // Local update
  let newMessage = document.createElement("p");
  newMessage.innerHTML = `<span style="font-weight:500">You</span>: ${chatbox.value}`;
  messages.appendChild(newMessage);

  // Broadcast update
  newMessage = {
    message: chatbox.value,
  };
  callFrame.sendAppMessage(newMessage, "*");
  chatbox.value = "";
}

The function also broadcasts a message to the other participants using the Daily API’s sendAppMessage() method.

sendAppMessage() triggers the app-message event for the receiving participants. A callback function on app-message updates the other participants' displays with the incoming message. The callback also changes the "Chat" text in their menu bar to red to notify that a new message has been sent.

async function startCall() {
  // ...callFrame is created here 
  callFrame
    .on("app-message", updateChat);
    // other events are listened for here!
  await callFrame.join({
    // room details here 
  });
}

async function updateChat(e) {
  const participants = 
    callFrame.participants(),
      userName = 
        participants[e.fromId].user_name,
      newMessage = 
        document.createElement("p");
  newMessage.innerHTML = 
    `<span style="font-weight:500">${userName || "Guest"}</span>: ${e.data.message}`;
  messages.appendChild(newMessage);
  chatLabel.style.color = "red";
}

All together, the chat looks something like this gif:

Gif of Daily chat in action
Please forgive the knock knock joke!

Want to chat more?

There are so many ways to customize chat further, and not just through the UI or notifications. While we hope this post is a good springboard for building chat into your call, you might be interested in more advanced functionality, like enabling file exchange or a chat history. A third-party chat integration would be the best way to do that. Stay tuned for more details!

For now, experiment with our demo in action, dive into the sample code on GitHub, and please send feedback our way any time at help@daily.co.