How to send a message in Prebuilt

I would like to send a message to the chat when a user presses a button is there a way to send a message with the callFrame method?

Tagged:

Best Answer

  • nienke
    nienke Moderator, Dailynista admin
    edited February 2023 Answer ✓

    @reeceatkinson, that's such a cool idea.

    You could hack this together, but we're going to be releasing a new custom integrations API pretty soon. With this new API you could add a third-party app like CometChat to your Prebuilt app and have complete control over the chat experience. I'm not sure when exactly the API will be be pushed to prod, but it shouldn't be much longer.

    Anyway, like I said, you could make this work. I wouldn't recommend doing it because it involves using the internal Prebuilt API which we can change at any second without warning. But, if you wanted to... my colleague @christian came up with this:

    The participant clicking the button sends the chat message like so:

    callFrame.sendAppMessage({
        event: 'chat-msg', // this will add the message to the chat. It's an internal Prebuilt name, could change any time!
        date: new Date(),
        message: generatedMessage,
        name: callFrame.participants().local.user_name,
    });
    

    Because the way sendAppMessage is set up, the sender will never receive their own message, so another participant would have to forward this message back to the sender:

    callFrame.sendAppMessage(originalMessage, fromId)
    

    One big caveat (and one reason why you should wait for the custom integrations API ;)): this will display the message in the chat as sent by another user for the participant who originally clicked the button.

    Again... you probably don't want to do this! But you could *insert Jurassic Park quote here*. Here's some more info that might be useful: Daily partnering with CometChat, and adding chat to your custom app (this goes into sendAppMessage more).

Answers

  • I have tried the below but it doesn't actually post anything to the chat:

    callFrame.sendAppMessage({ message: 'Hello, World!' }, '*');

  • nienke
    nienke Moderator, Dailynista admin

    Hiya,

    You're right that using the sendAppMessage approach doesn't send anything to the chat. It sends a message to call participants, but you'll need to listen to the event (https://docs.daily.co/reference/daily-js/events/participant-events#app-message) and handle it per participant. I don't think it'd be very easy to add custom messages to the existing chat UI in Prebuilt - you'd need to inject the received message into the Prebuilt DOM.

    Maybe there's a different approach depending on what you're trying to achieve! What are you thinking of exactly? :)

  • @nienke basically we are using AI for text generation. We want to have a button that has a function and sends a chat message on behalf of the participant sharing the text we generated. All of it is on the same page (see screenshot below).