1. Breeze Church Management
  2. Knowledge Base
  3. Online Giving
  4. Web Giving

Sharing Your Online Giving Page

Updated:

Sharing Your Online Giving Page

When you enable online giving with Breeze, we'll provide you with a web address that you can link to and share with your church members, supporters, and community. This online giving page allows for a seamless donation experience, whether it's accessed from your church's website, shared via email or social media, or embedded directly on your website. Here's how you can share your online giving page:

  1. Navigate to "Giving" > "Online Giving."
  2. Click the "Share" button in the "Web Giving Box" in the center-left of the page.
  3.  Sharing options:
    1. Giving Page Address - A link you can email to others or post on social media. Donors can click the link to give to your church.
    2. Link from Website - Code that your web developer can use to create a "Give" button directly on your church website.
    3. Embed in Website - Embed the giving form directly on your website for a seamless donation experience so the donor never has to leave your site. Note that we highly recommend installing an SSL certificate (https) on your site before using this option. You can use the simple version of the embed code, or, if you're looking for more custom options, see the advanced version. Information on that is below. Note: Log in option and page content are not available on the embed page.
    4. Sharing via QR Code - You can also share your online giving page using a QR code. Here are a couple of ways to generate and use a QR code for your online giving page:

      1. Right-click on the online giving page in Google Chrome:

        • Select "QR Code for this Page."
        • Click "Download" to save the QR code image.

      2. Use a QR code generator website:

        • Visit a website like https://www.qrcode-monkey.com/#url.
        • Upload the URL of your online giving page.
        • Customize the QR code as desired.
        • Download the free QR code image for sharing.

      Using a QR code, you can provide an easy and convenient way for donors to access your online giving page quickly, whether printed on materials or shared digitally.

Any additional code added, such as iframe, might cause the embedded giving page to change to the mobile view. This may cause the page to lose some intuitive design when viewing it from a desktop web browser. Functionality does remain the same.

Have a WordPress website? Switch to 'Code Editor' mode in WordPress and copy/paste the embed code from Breeze to integrate it with your website.

To switch to 'Code Editor' mode in WordPress, follow these steps:

  1. Log in to your WordPress Dashboard: Access your WordPress site's admin panel by logging in with your username and password.

  2. Navigate to the Post or Page Editor: Click on 'Posts' or 'Pages' from the dashboard menu, depending on where you want to add the code. Then, either create a new post/page or edit an existing one.

  3. Access the Code Editor:

    • If you are using the Gutenberg editor (the default editor in recent WordPress versions), you'll see a panel at the top with two tabs: 'Visual' and 'Code Editor.' Click on 'Code Editor' to switch.
    • If you don't see these tabs, click on the three vertical dots (options) in the top-right corner of the editor. In the dropdown menu, select 'Code Editor' or 'HTML Editor.'

  4. Paste Your Embed Code: Once in the Code Editor, you can paste the Breeze embed code where you want it to appear in your post or page.

  5. Save or Update Your Post/Page: After pasting the code, save your changes by clicking 'Update' (for existing posts/pages) or 'Publish' (for new posts/pages).

Remember, in 'Code Editor' mode, you're editing the HTML of your post or page directly, so be cautious with any changes you make to avoid disrupting the page's layout.

2020-02-22_18-11-02__1_.gif
 

Advanced vs Simple Options for Choosing to Embed by Website

The "Simple" code will read something like this: 

<div id="breeze_giving_embed" data-subdomain="SUBDOMAIN"></div>
><script src="https://www.breezechms.com/js/give.js"></script>

The "Advanced" code will be customizable and start with a look like this: 

<div id="breeze_giving_embed" data-subdomain="SUBDOMAIN" data-width="100%" data-background_color="fffff" data-text_color="000" data-donate_button_background_color="777777" data-donate_button_text_color="ffffff" data-fund_id="" data-frequency="" data-amount=""></div>
><script src="https://www.breezechms.com/js/give.js"></script>

When using the advanced code, here is what each section represents:

Code Description
data-subdomain Your Breeze account's subdomain
data-width The width of the giving section
data-background_color The giving screen's background color
data-text_color The giving screen's text color
data-donate_button_background_color The donate button's background color
data-donate_button_text_color The donate button's text color
data-fund_id The fund ID can be viewed by navigating to "Giving" > "Funds", clicking on the desired fund, and looking at the ID in the URL. When this option is used, the selected fund becomes the only fund that can be given to from that giving page.
data-frequency W = weekly
2W = every 2 weeks
M = monthly
Y = yearly
data-amount Any number

 

Additional Helpful Resources:

 

Articles in this section

See more