Sidebar

The Sidebar refers to the right menu that you can find in the room, this is generally a good place to communicate with the attendees of an event.
For instance at Livestorm we use this area to put the native Chat, Polls and Questions.

registerPanel

This allows you to declare your Sidebar application.
Calling this method will add your app to the "Apps" menu of the room.

Once a person clicks on your app in the menu it will activate the template property.

use cases : chat, survey, file sharing, polls, questions

usage :

const app = await Sidebar.registerPanel({
    label: 'Handouts',
    imageSource,
    darkImageSource,
    slug: 'handouts',
   template: '<p>{{ content }}</p>',
   variables: { content: 'hello' },
   onMessage: (message) => {}
 })

app.focus()
app.remove()
app.sendMessage()
ParamTypeDescription
labelstringThe name of your sidebar app, will show in the menu
imageSourcestringThe logo of your sidebar app
darkImageSourcestringThe light version of your logo, will be displayed in the menu which has dark background. Defaults to imageSource if not specified
templatestringThe HTML content you want to display in the modal (can contain CSS or JS)
variablesHashHash of variables you can interpolate into the HTML template
onMessageFunctionFunction called whenever the postMessage({}) function is called within the HTML
Returns
Promise<SidebarApp>

Types

SidebarApp

MethodReturnsDescription
focusvoidWill focus your app
sendMessagevoidWill send a message to the app
removevoidRemove the app from the sidebar

Did this page help you?