Adding a link to a Donations modal popup on your website

With Donations modal popups, you can add them anywhere on your website and trigger them through a hyperlink the visitor clicks on or a hyperlink you share over social media, emails, QR codes, or other websites.

This example shows a Donations modal popup triggered by a button on the page of a website:

To add a Donations modal popup on your website, you'll need to do the following:

1. Add the installation code for the Donations modal popup to your website. This only needs to be done once by your website administrator. It does not need to be repeated for each Donations modal popup after being added initially.
2. Create a Donations page in Soapbox Engage to use as the Donations modal popup, making sure to customize the parameters in the Donation Modal Popup section on the Integration tab. If you wish, you can use an existing Donations form in Soapbox Engage, though it is recommended that you use a Donation form created specifically to be used as a Donations modal popup.
3. Go to the Integrations tab of the add/edit Donations page you will use as your modal popup. In the Donations Modal Popup section, click the Copy button under the Sample Link parameter to copy the code to your clipboard. It will look similar to this:
   
   <a href="#donate" data-sbx data-id="1" data-host="example.secure.nonprofitsoapbox.com">Donate Today!</a>
   
4. Paste the sample code wherever you would like the hyperlink to appear on your website
5. You may update and add the code code as a hyperlink anywhere on your website. If you wish, you may update any or all of the following:
   
   1. For the href parameter, replace "#sbx{Id}" default with any anchor link of your choosing (e.g., "#give", "#givingtuesday", "#dec2023campaign", etc), It will just need to start with a # and not contain any spaces. If you have multiple Donations modal popups on the same page, ensure that this anchor link is unique. Also ensure that there is no other anchor tag element on the page that has the same name.
   2. For "Donate Today!", add whatever text you wish to appear as the hyperlink
   3. Alter the design and presentation of the hyperlink as you wish for the purposes of including it on your website, either through inline styling or adding CSS to your site template.