# Donation Bar for House Ad

**URL:** <https://meta.discourse.org/t/donation-bar-for-house-ad/216346>\
**Category:** Extras\
**Tags:** advertising\
**Created:** [January 28, 2022, 6:48pm UTC](https://meta.discourse.org/t/donation-bar-for-house-ad/216346 "2022-01-28T18:48:05Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [January 28, 2022, 6:48pm UTC](https://meta.discourse.org/t/donation-bar-for-house-ad/216346/1 "2022-01-28T18:48:06Z")

</div>

Hello,

This is a **Donate Bar** for [Discourse Official Advertising Plugin](https://meta.discourse.org/t/official-advertising-ad-plugin-for-discourse/33734) House ad function. You have to install the plugin first.

* * *

I was thinking a lot…how could I make the donation more attention-grabbing to our Members. The problem is the donation are not continuous. First time we used a banner in all topic top and bottom but our Members are used to it and no longer noticed it. So I made it more dynamic. Now we use a donation bar between posts. We use a donation goal and when someone donate we update the current price.

 ![donate-bar](https://global.discourse-cdn.com/meta/original/3X/d/6/d63c60337db5bdc7727e64e270ee7955f116c7db.jpeg)

* * *

## Add HTML in House Ad

1. Go to admin \> Plugins \> House Ads  
`/admin/plugins/pluginad/house_creatives`
2. Create a new house ad.
3. Paste the following ⏬

```xml
<a class="donate-bar" rel="noopener" href="paste here the link of your donate page">
  <div class="ad-container">
    <span class="label-strong">Support your favourite Forum... (replace this text)</span>
    <br>
    <span>Donations received in this month! (replace this text)</span>
    <div class="goal-container">
	  <div class="goal-container__current"></div>
	   <div class="goal-container__bar">
         <span class="goal-bar__total"></span>
	   </div>
	   <div class="goal-container__progress"></div>
    </div>
  </div>
</a>

```

1. Add this to Between posts or Topic above suggested or Topic above post stream.

* * *

## Install the theme component and set up.

[https://github.com/VaperinaDEV/house-ad-donate-bar](https://github.com/VaperinaDEV/house-ad-donate-bar)

 ![theme-settings](https://global.discourse-cdn.com/meta/original/3X/8/a/8a635f15001874b897db81141b0fdfb1de2478f9.png)

You’re done! 🙂  
Hope you find it useful!

---

_[View the full topic](https://meta.discourse.org/t/donation-bar-for-house-ad/216346)._