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.
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