The ReleasePad widget comes with its own colors, sizing, and positioning. If you want the button to blend into your app’s existing UI — for example, as part of your navigation bar or sidebar — you can use the rp-btn-override class to strip all default widget styling.

How it works

Add rp-btn-override to the class list on your rp-token div:

<div id="rp-token"
     class="rp-btn-override"
     data-param="YOUR_TOKEN"
     lang="en">
</div>

<script type="text/javascript"
        src="https://widget.releasepad.io/releasepad-bundle.js"
        charset="utf-8">
</script>

<link rel="stylesheet" href="https://widget.releasepad.io/releasepad-bundle.min.css">

When this class is present, two things happen:

The default widget CSS rules (shape, size, shadow) are not applied
The button gets all: inherit — so your page’s styles take over

Style it yourself

Since the button now inherits from its parent, wrap it in a container with the styles you want:

<nav class="your-app-nav">
  <a href="/dashboard">Dashboard</a>
  <a href="/settings">Settings</a>

  <!-- Widget button inherits nav styling -->
  <div id="rp-token"
       class="rp-btn-override"
       data-param="YOUR_TOKEN"
       lang="en"
       style="cursor: pointer; padding: 8px 16px;">
  </div>
</nav>

You can also target the button directly with CSS:

#rp-token .rp-btn-override {
  background: transparent;
  color: #374151;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
}

#rp-token .rp-btn-override:hover {
  background: #f3f4f6;
}

The unread badge

Even with rp-btn-override, the widget still shows the unread post count. The badge inherits your styles too, so you may want to add specific styling for the .releasepad-widget-numPost element:

#rp-token .releasepad-widget-numPost {
  background: #ef4444;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

When to use this

You want the widget button to look like a native menu item in your app’s sidebar or nav
Your design system has strict button styles and the default tab doesn’t fit
You want full control over how the widget trigger looks and feels

How to Override the Widget Button Styling

How it works

Style it yourself

The unread badge

When to use this

Need more help?