By default, the ReleasePad widget renders inside a div with id rp-token and displays a side tab. You can attach the widget behavior to any HTML element — a button, menu item, link, or custom div — so it opens when users click that element instead.

Go to your ReleasePad account’s General Settings and copy your widget code. It looks like this:

<div id="rp-token" 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">

Paste this into your page — it can be anywhere in the <body>.

Step 2: Add your custom element

Create the element you want users to click. For example:

<div id="whats-new">What's New</div>

This can be a <button>, <a>, <li>, or any other element.

Step 3: Add a click handler

Use JavaScript (jQuery in this example) to trigger the widget when users click your element:

<script>
  $("#whats-new").on('click', function(){
    $('.rp-container').click();
  });
</script>

This opens the ReleasePad widget whenever someone clicks your custom element.

Complete example

Here’s a full working example with styling:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <!-- Your custom trigger element -->
  <div id="whats-new" style="cursor: pointer; padding: 8px 16px; background: #0070c7; color: white; border-radius: 8px; display: inline-block;">
    What's New
  </div>

  <!-- ReleasePad widget (hidden or positioned off-screen) -->
  <div id="rp-token" data-param="YOUR_TOKEN" lang="en" style="position: fixed; bottom: 16px; right: 16px;"></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">

  <!-- Click handler -->
  <script>
    $("#whats-new").on('click', function(){
      $('.rp-container').click();
    });
  </script>

</body>
</html>

Tip: You can style the rp-token div to position the tab next to your custom element, or hide it entirely and rely on the click handler alone.

How to Install the Widget on a Custom HTML Element

Step 1: Copy your widget code

Step 2: Add your custom element

Step 3: Add a click handler

Complete example

Need more help?