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.
![Screenshot 2021-12-02 at 11.53.28.png 2102](https://files.readme.io/907fd53-Screenshot_2021-12-02_at_11.53.28.png)
registerPanel
This allows you to declare your Sidebar application.
Calling this method will add your app to the "Apps" menu of the room.
![Screenshot 2021-12-02 at 11.44.37.png 618](https://files.readme.io/c72ed4a-Screenshot_2021-12-02_at_11.44.37.png)
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: 'https://url/logo.png',
darkImageSource: 'logo.png',
slug: 'handouts',
template: '<p>{{ content }}</p>',
variables: { content: 'hello' },
onMessage: (message) => {
// Do something when using `postMessage({ foo: 'bar' })` from within the template
},
onClose: () => {
// Do something when the sidebar panel is closed
},
onMinimize: () => {
// Do something when the sidebar panel is minimized
},
})
app.focus()
app.setNotificationCount(1)
app.clearNotificationCount()
app.remove()
app.sendMessage({ foo: 'bar' }) // The message can be caught in the template using `window.addEventListener('message', () => {})`
Param | Type | Description |
---|---|---|
label | string | The name of your sidebar app, will show in the menu |
slug | string | The slug that will be used in the URL when the sidebar panel is opened |
imageSource | string | The logo of your sidebar app |
darkImageSource | string | The light version of your logo, will be displayed in the menu which has dark background. Defaults to imageSource if not specified |
template | string | The HTML content you want to display in the modal (can contain CSS or JS) |
variables | Hash | Hash of variables you can interpolate into the HTML template |
onMessage | Function | Function called whenever the postMessage({}) function is called within the HTML |
onClose | Function | Function called whenever the sidebar panel is closed |
onMinimize | Function | Function called whenever the sidebar panel is minimized |
Returns |
---|
Promise< SidebarApp> |
Types
SidebarApp
Method | Params | Description |
---|---|---|
focus | void | Focus your app |
sendMessage | Object | Sends a message to the app's template, can be caught using window.addEventListener('message', () => {}) |
remove | void | Remove the app from the sidebar |
setNotificationCount | number | Display a related notification badge in apps menu |
clearNotificationCount | void | Remove the related notification badge in apps menu |
Updated 7 months ago