Three ways to add chat to your video calls with the Daily API

Use the dashboard or built-in methods to enable text chat in a video call

#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](https://help.daily.co/en/articles/2260198-chat-and-participant-lists) 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](https://www.daily.co/blog/introducing-your-new-api-dashboard-summer-2020), 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](https://docs.daily.co/reference#create-room). To make sure chat will be turned on, set the `enable_chat` [configuration property](https://docs.daily.co/reference#create-room) to true:

    -- CODE language-bash --
    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.

    -- CODE language-json --
    { 
      "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](https://docs.daily.co/reference#%EF%B8%8F-sendappmessage) and corresponding `app-message` [event](https://docs.daily.co/reference#app-message) to build chat powered by the Daily API.

##An example
Our [simple-chat-demo](https://demos.daily.co/static-demos/simple-chat-demo/index.html) features a chatbox that includes text input for a participant, a send button, and a message display.

    -- CODE language-markup --
    <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()"`:

    -- CODE language-js --
    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](https://docs.daily.co/reference#%EF%B8%8F-sendappmessage).

`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.

    -- CODE language-js --
    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](https://demos.daily.co/static-demos/simple-chat-demo/index.html), dive into the [sample code on GitHub](https://github.com/daily-co/daily-demos/tree/main/static-demos/simple-chat-demo), and please send feedback our way any time at `help@daily.co`.

Recent posts