bonus bar builder

Bonus Bar Builder

How to use this tool

Enter your Bonus Headline, Subtext, and Link URL.
Click one of the buttons: “Show Top Bar”, “Show Side Widget”, or “Show Popup” to preview your style.
Your bar appears above — test the close and reopen buttons.
Review the generated code under Your Code:.
Use the “Copy Code” or “Download Code” buttons to export your bar snippet.
If helpful, rate this tool using the stars below — thank you!

Bonus Headline: Bonus Subtext: Bonus Link URL:

Live Preview

Your Code:

<div id="popupOverlay" style="position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9998;display:flex;justify-content:center;align-items:center;">
  <div style="background:linear-gradient(135deg,royalblue,magenta);color:gold;font-family:'Playfair Display',serif;padding:2rem;border-radius:16px;max-width:500px;width:90%;text-align:center;animation:pulse 2s infinite;position:relative;">
    <button onclick="document.getElementById('popupOverlay').style.display='none';document.getElementById('showPopupBonus').style.display='block';" style="position:absolute;top:10px;right:14px;background:gold;color:royalblue;border:none;border-radius:50%;font-size:1.2rem;width:28px;height:28px;cursor:pointer;">×</button>
    <h2>{{HEADLINE}}</h2>
    <p>{{SUBTEXT}}</p>
    <a href="{{URL}}" style="background:gold;color:royalblue;text-decoration:none;padding:0.6rem 1.2rem;border-radius:6px;font-weight:bold;" target="_blank">Access Bonus</a>
  </div>
</div>
<div id="showPopupBonus" style="display:none;position:fixed;bottom:10px;right:10px;z-index:9999;">
  <button onclick="document.getElementById('popupOverlay').style.display='flex';this.style.display='none';" style="background:gold;color:royalblue;padding:0.4rem 0.75rem;border:none;border-radius:5px;font-weight:bold;">Show Bonus</button>
</div>

If you found this tool helpful, please rate it:
★ ★ ★ ★ ★