Embed Shoelace Component in Header

I want to embed a Shoelace badge component in my Softr header to represent the number of new “notifications” (items in a notification Airtable table).

I did a test with static data and added the snippet of code (seen below) to a new header link field and it actually displays well. Now I need to find a way to use dynamic Airtable data to populate the value. It would be helpful if I could add the code to an Airtable formula field to pull dynamic count of records from a linked record. We do this a lot with progress bars and rings and we usually call it with a list block and an embed field.

Not sure if anyone else has tackled this one yet or not.

<div class="badge-pulse">
  <sl-badge variant="danger" pill pulse>6</sl-badge>

  .badge-pulse sl-badge:not(:last-of-type) {
    margin-right: 1rem;

View of the test:
Screenshot 2024-03-02 at 3.46.57 PM


You’ll find how here: New! In-App Notifications & Notification Center Feature

Oh, awesome. I’ll check it out!