Add DonorBox Button To Navigation

Site URL: https://hwh.squarespace.com/

On the website, in the navigation section I would like to add the DonorBox Button Code below. It is a button that opens a pop up box to donate but we want it in the navigation bar instead of the other button. 

@tuanphan please help!! 🙂

Donorbox code button:

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script><a class="dbox-donation-button" style="background: #035aa5

url(https://d1iczxrky3cnb2.cloudfront.net/red_logo.png) no-repeat 37px;color: #fff;text-decoration: none;font-family: helvetica;display: inline-block;font-size: 16px;padding: 15px 20px;padding-left: 75px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 0 0 #1f5a89;text-shadow: 0 1px rgba(0, 0, 0, 0.3);" href="https://donorbox.org/hwh-donate-now">DONATE NOW</a>

We also want to add the same button to a banner on multiple pages. 

Example on this page: https://hwh.squarespace.com/housing, we want to add the donorbox donate button on the banner to replace the red button, same code as above.

@tuanphan please help!! 🙂

Hi. Do you still need help on this?

What is access password?

@tuanphan yes please! We do need help, the password is hwh

Thank you!

Were you able to get this to work?

On 8/26/2021 at 11:11 AM, AmyN said:

Were you able to get this to work?

If you share link to your site, we will check it again

Was anybody able to solve this?

On 8/27/2021 at 2:35 PM, pavilion said:

Was anybody able to solve this?

Can you share link to your site + donor box code?

Hi - this is the website:

http://www.thestereotypeproject.org

To: Install a mobile optimized donation popup form

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script><a class="dbox-donation-button" style="background: #f9b41f url(https://donorbox.org/images/red_logo.png) no-repeat 37px;color: #fff;text-decoration: none;font-family: Verdana,sans-serif;display: inline-block;font-size: 16px;padding: 15px 38px;padding-left: 75px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 0 0 #1f5a89;text-shadow: 0 1px rgba(0, 0, 0, 0.3);" href="https://donorbox.org/the-stereotype-project">Donate</a>

To use my own link or button: 

Add a link with a href="https://donorbox.org/the-stereotype-project" and one of the class names should be custom-dbox-popup. Example:

<a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project">Donate Now</a>

You can also have a button image inside the link tag. Example:

<a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project">
  <img src="https://donorbox.org/images/png-donate/button-medium-blue.png" />
</a>

Add the below two lines of code anywhere in the page, preferably above the closing </head> tag.

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script>
<script>window.DonorBox = { widgetLinkClassName: 'custom-dbox-popup' }</script>

Thanks!

On 8/31/2021 at 1:15 PM, pavilion said:

Hi - this is the website:

http://www.thestereotypeproject.org

To: Install a mobile optimized donation popup form

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script><a class="dbox-donation-button" style="background: #f9b41f url(https://donorbox.org/images/red_logo.png) no-repeat 37px;color: #fff;text-decoration: none;font-family: Verdana,sans-serif;display: inline-block;font-size: 16px;padding: 15px 38px;padding-left: 75px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 0 0 #1f5a89;text-shadow: 0 1px rgba(0, 0, 0, 0.3);" href="https://donorbox.org/the-stereotype-project">Donate</a>

 

To use my own link or button: 

Add a link with a href="https://donorbox.org/the-stereotype-project" and one of the class names should be custom-dbox-popup. Example:

<a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project">Donate Now</a>

You can also have a button image inside the link tag. Example:

<a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project">
  <img src="https://donorbox.org/images/png-donate/button-medium-blue.png" />
</a>

Add the below two lines of code anywhere in the page, preferably above the closing </head> tag.

<script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script>
<script>window.DonorBox = { widgetLinkClassName: 'custom-dbox-popup' }</script>

 

 

Thanks!

and did you solve? or still need help?

No I still need help.  I'm trying to install the donation button in the Navigation just like the OP was trying to do.

Hey @tuanphan is this outside of your wheelhouse of expertise?