Skip to content
PURE CSS
PARALLAX PIXEL STARS

How to install widget on a different HTML element (DIV, Button, Paragraph, Ahref, etc).

By default ReleasePad widget code has a div with id “rp-token” which is where the small bubble with the number of updates gets rendered. When clicked it expands the widget.

Sometimes you just want to add this behaviour to a different HTML component like a button, menu item, div, ahref among others. It can be done very easily in the following way:

Step 1
Copy and paste the HTML code provided in the general settings on your ReleasePad account.

Figure 1. Where to find my ReleasePad widget code.

Step 2

Identify the html element where you want to add the widget expanding functionality. In this example code I will be using the div with id “whats-new”.

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div id="whats-new">What's New</div>
<div id="rp-token" class="rp-container" data-param="XXXXXXXXXXXXYYYYYYYYYYYYYYYYYY" 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">

Once identified, let’s add the following javascript so that when the div is clicked the widget gets maximized.

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

Just added some styling so that the bubble appears to the right of the “What’s new” text.

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div id="whats-new" style="float: left;">What's New</div>
<div id="rp-token" class="rp-container" style="float:left;" data-param="XXXXXXXXXXXXYYYYYYYYY" lang="en"></div>
<div style="clear: both;">
</div>
</body>
<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">
<script>
	$("#whats-new").on('click', function(){
	$('.rp-container').click();
	})
</script>
</html>

The result will give you the following

Figure 2. Widget with custom location.
Figure 3. Maximized widget with custom location.

You can download this example by clicking the button below.

Download sample code