The easiest way to add collaboration in your website. This component renders the Cord sidebar, positioned fixed on the right side of your website. You can customize its width, and you can use the open
and close
events to adjust your website’s CSS so the sidebar doesn’t overlap with your content.
Usage
-
import { Sidebar } from "@cord-sdk/react";
export const Example = () => (
<Sidebar
showPresence={true}
onOpen={() => {
console.log("sidebar is open");
}}
/>
);
-
<cord-sidebar show-presence="true" id="sidebar" />
<script>
document
.getElementById("sidebar")
.addEventListener("cord-sidebar:open", () => {
console.log("sidebar is open");
});
</script>
Properties
Name |
Default |
Description |
context |
current URL |
The context for the sidebar. |
open |
true |
Whether the sidebar should be open or closed. |
show-close-button |
true |
Whether to show the close button in the top navigation bar. |
show-presence |
true |
Whether to show the presence facepile for the context in the top navigation bar. |
exclude-viewer-from-presence |
false |
Whether to exclude the current user from the presence facepile in the top navigation bar. |
show-launcher |
true |
Whether to show the floating launcher button in the bottom-right corner of the page. Set this to false if you use the <cord-sidebar-launcher> component. |
Events
Name |
Description |
cord-sidebar:open |
The sidebar is now open. |
cord-sidebar:close |
The sidebar is now closed. |
CSS Custom Properties
Name |
Default |
Description |
--cord-sidebar-width |
312px |
Width of the sidebar. Cannot be wider than 500px or narrower than 312px . |
In this section