🛠️ Build Widgets with Beeper

Introducing a new, hackable surface within Beeper.

Most chat apps are inflexible—you see and send messages on their interface, end of story. If you’re lucky, you’re allowed modest customization options, or maybe offered some sticker packs.

Except for us! Beeper is built upon the open source Matrix protocol, and we actively encourage using your chats to build cool things—even if a network Beeper supports offers no developer tools themselves. Command line clients, voice assistants, and iMessage bots are but a taste of what our community has already made.

Today, we’re excited to announce Beeper Widgets: a new way to do awesome things with chat!

Widgets x Beeper 🥳

Beeper Widgets are web apps shown inside Beeper that can interact with chat data, like reading messages, seeing participants, and sending or reacting to messages on your behalf. Our widgets are standard web apps built with React, so developers have full freedom to create any interface, interact with other services, and do anything else a website can.

Meet Summarizer: a widget that catches you up on your unread messages upon opening a chat.

As a feature, the Matrix team and open-source contributors have been nurturing widgets for years now. Today, we’re adding support for Matrix widgets inside Beeper. Our twist is that Beeper Widgets can be used in all chats on any chat network that Beeper supports. This means you can use widgets with WhatsApp, iMessage and 13 other chat networks!

What can Beeper Widgets do? 🤔

We’ve built two widgets: one that summarizes unread messages upon opening a busy chat, and one that provides useful information based on prior chat messages (such as suggesting ideas or providing information).

You can build widgets to do anything! As an example, your widget could:

• Send pre-written messages.

• Show info about everyone in the chat, using a data source like Clearbit.

• Add items within a chat to your to-do list.

Try Beeper Widgets right now 🤳

Choose any of our pre-built widgets here, then follow these instructions to add it to Beeper!

Loading video

How to create Beeper Widgets 🙌

Widgets you build today can be shared with any and all Beeper users, enhancing their chat experiences and earning you serious love from the community.

🏁 To get started, see beeper-sdk docs on Github »

A quick tutorial gets you set up to develop your first widget in just five minutes. For a visual walkthrough, check out our Widget video:

Loading video

Beeper Widgets are built on the wonderful matrix-widget-toolkit package by Nordeck. On top of it, we’ve added more widget functionality and made widgets available globally across all of your chats (rather than being installed on a per-chat basis). We’ve also created example widgets and a simple way to start building.

To hit us up about Beeper Widgets, get help, or share your latest creations, join our dedicated Matrix room #beeper-sdk:beeper.com. We’re excited to play with what you build!

–Griffin Li (Intern)