Customizing Prebuilt

kylemilloy

Hi there — we're looking to build an application pretty quickly and after a quick foray into a custom app on Daily we're switching gears and going to try and stretch the prebuilt as far as we can.

We're thinking that the easiest approach would be to use the custom tray buttons option and listen to events there to activate other parts of our application however we also really like how custom integrations injects directly into the app's chrome.

We're hoping there's a best of both worlds here where we can have a custom tray button that triggers an integration to open. For example, we want to add a sidebar element that might load a survey for a user. What would be great is that instead of clicking a button that opens the side bar and then navigating to that custom sidebar integration is if we could just have a custom tray that goes straight to that page. Is this doable? Are we on the right path as well or are there better ways to augment this?

The other, likely more difficult ask, is that we want to have an "observer" role where there can be one or more people present in a video call but we don't necessarily want to show their video tile to other participants. When you join a chat as an observer we want to make it so we skip the dialogue about setting up your camera/mic and go straight into the call without a name tile showing up. We were also considering maybe showing them a different page instead of the prebuilt where it's just the video stream but there looks to be a delay on this of about 30s which doesn't work for us. Any other ideas?

Thanks!

K.

mark_at_daily

Hey @kylemilloy, apologies for the delay. For some reason, this was marked as spam by our community automation. In case you still need an answer, here goes! (tl;dr what you want to do is doable)

What would be great is that instead of clicking a button that opens the side bar and then navigating to that custom sidebar integration is if we could just have a custom tray that goes straight to that page. Is this doable?

This is doable. There's a setSidebarView method ( https://docs.daily.co/reference/daily-js/instance-methods/set-sidebar-view ), which allows allows you to specify the name of the tab to open. When calling this method, it will immediately open the sidebar to the specified view. We built this with custom integrations and buttons in mind, so you can specify your own string to open your own sidebar integration.

As for your other question, Prebuilt (and daily-js in general) supports the ability to allow users to join a call either without sending presence (e.g. they don't appear in the participants() list and/or without sending media. You can learn more about that by checking out the updateParticipants method docs: https://docs.daily.co/reference/daily-js/instance-methods/update-participant#permissions . In your specific case, if you want a participant that can join a meeting, isn't visible to others, but can chat, you'll want to try something like this:

call.updateParticipant('PARTICIPANT_ID', {

  updatePermissions: {

    hasPresence: false,

  },

});

You can also specify this hasPresence information in a token (docs: https://docs.daily.co/reference/rest-api/meeting-tokens/config#permissions ), so that the settings are configured immediately.

Hope this helps!

kylemilloy

We eventually found both of these in the docs ourselves…but thanks for following up anyways 🙃