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" data-param="XXXXXXXXXXXXYYYYYYYYYYYYYYYYYY" lang="en"></div>
<script type="text/javascript" src="https://widget.releasepad.io/releasepad-bundle.js" charset="utf-8"></script>

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(){<br>	$('.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><br>

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 in the following link widget-custom-example.html.zip

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us