Loom integration for Whiteboards.io

We are using Loom at Whiteboards.io, it is essential part of our process - the medium for asynchronous communication. Adding a Loom recording to a whiteboards was always a bit expensive - prerequisite: Loom extension installed, do the recording, embed on whiteboard as an iframe. The idea was to make it as simple as single click directly from Whiteboards.io interface.

This integration allows Whiteboards.io users to record a Loom with a single click, and also it will automatically convert pasted Loom urls into embeds.

Various team activities can be enhanced with recordings. For us this is the planning process, and backlog grooming, which happens more asynchronously, because a picture is worth a thousand words. It is important do do the recording when you see a bug, or when you have a new idea.

You can put your Loom on a whiteboard in some particular context, for example:

add a bug explanation recording to the "TO DO" column of your kanban on a whiteboard
record a video explaining rules of upcoming user story mapping session which is going to be held on a whiteboard
daily standup meeting, let your team record their status updates, listen to them, and comment asynchronously

Technical stuff

Looms recordSDK was very easy to use inside our app: install the package, get API keys, configure the button, handle the insert-click event - insert the Loom embed as object on the whiteboard.

The implementation is very compact, and the value to lines of code ratio is very high!

import { setup } from "@loomhq/loom-sdk";
// ...
  const setupButton = useCallback(async (element: HTMLElement) => {
    const { configureButton } = await setup({ apiKey: API_KEY });
    configureButton({ element }).on("insert-click", async (video) => {
      const width = 300, height = (300 * video.height) / video.width;
      const { zoom, translate } = await getViewport();
      triggerSelection([await createCard(
        (window.innerWidth / 2 - translate[0] - width / 2) / zoom,
        (window.innerHeight / 2 - translate[1] - height / 2) / zoom,
        width / zoom, height / zoom,
        { color: "black", iframe: { url: video.embedUrl }, }
      )]);
      dispatchAnalyticsEvent("loomRecordInserted");
    });
  }, [createCard, getViewport]);
  // ...
  useEffect(() => {
    setupButton(ref.current);
  }, [ref, setupButton]);
  // ...
  return <Button ref={ref} ... />;