Link copied to pasteboard!
🎡

Welcome to Cord's Components Playground

💡
Want to try collaborating on this page right now?

Try opening and closing the Cord Sidebar using the embedded Sidebar Launcher Button in the top-nav of this page. This button and the Sidebar itself can be fully customised to include your brand fonts, colors and optional features.
Use the Sidebar to collaborate with colleagues and discuss elements on the page. As well as chat, you can create in-page annotations, resolve threads, and more.

This is an example of annotated text. Try clicking the annotation to view the related message in the Sidebar.

Collaboration Sidebar widget
  • Chat with colleagues, create and assign tasks, and annotate content on this page!
  • Code snippet
    •   import { Sidebar } from "@cord-sdk/react";
        const App = () => (
          <Sidebar  
            showPresence={false}
            showLauncher={false}
          />
        );
      
    •   <cord-sidebar 
          show-presence="false" 
          show-launcher="false" 
        >
        </cord-sidebar>
      
    Embedded Sidebar Launcher
  • A button that can be styled and positioned in your page wherever you decide
  • Code snippet
    •   import { SidebarLauncher } from "@cord-sdk/react";
        const App = () => (
            <SidebarLauncher />
        );
      
    •   <cord-sidebar-launcher
          style="--cord-sidebar-launcher-background-color: #dadce0;
                 --cord-sidebar-launcher-text-color: #fff;"
        ></cord-sidebar-launcher>
      
    Page Presence
  • A component to indicate who is currently online, and who has seen this page and when.
  • Code snippet
    •   import { PagePresence } from "@cord-sdk/react";
        const App = () => (
          <PagePresence  context={{ page: "playground" }} />
        );
      
    •  <cord-page-presence context='{ "page": "playground" }' />
      
    Presence Observer
  • Tracking presence on more granular contexts on your page - try hovering on any text in this page to see this in action!
  • Code snippet
    •   import { PresenceObserver } from "@cord-sdk/react";
        const App = () => (
                <PresenceObserver context={{ page: "playground", component: "presence-observer" }}>
                  <p>I'm being observed!</p>
                </PresenceObserver>
        );
      
    •  <cord-presence-observer
                context='{ "page": "playground", "component": "presence-observer" }'
                ></cord-presence-observer>
      
    Embedded Presence Facepile
  • A component to indicate who is online at a specific context.
  • Code snippet
    •   import { PresenceFacepile } from "@cord-sdk/react";
        const App = () => (
            <PresenceFacepile
                  context={{ page: "playground", component: "presence-facepile" }}
            />
        );
      
    •  <cord-presence-facepile
                context='{ "page": "playground", "component": "presence-facepile" }'
                ></cord-presence-facepile>