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.