breeze_giving

The Tithely Breeze Giving module provides a simple and elegant way to integrate your Breeze ChMS (now merged with Tithely) online giving form into your Drupal website. It creates a block that renders a slide-out drawer, accessible via a persistent, clickable tab on the side of the screen. This allows users to access the giving form quickly without navigating away from the current page.

This module currently only supports BreezeChMS style giving forms and doesn't support Tithely specific giving forms as this module started development around the time of the merger.

DISCLAIMER: This module is in no way affiliated with or supported by Tithely or Breeze ChMS.

Features

• Seamless Integration: Embeds the Breeze online giving form using only your organization's Breeze subdomain.
• Slide-Out Widget: The giving form is presented in a sleek drawer that slides in from the right side of the viewport, ensuring it doesn't disrupt the user's browsing experience.
• Configurable Tab: The text for the clickable tab and the header of the drawer can be customized via the block's title setting.
• Customizable Appearance: All display options for the Breeze giving form are configurable, including:
  • Width of the drawer
  • Background, text, and button colors
• Pre-fill Options: You can configure the block to pre-fill donation details, such as:
  • A default donation amount
  • A default giving frequency (e.g., onetime, weekly, monthly)
  • A specific fund ID to pre-select a giving fund

Post-Installation

Once the module is enabled, you can place the Breeze Giving block in any region to make it active on your site.

1. Navigate to the Block layout page at /admin/structure/block.
2. Choose a region for the block (e.g., "Content" or any other main region). Because the drawer uses fixed positioning, the specific region does not affect its placement on the page.
3. Click Place block and select "Breeze Giving" from the list.
4. Configure the block settings:
   • Block title: The text entered here will be used for the clickable tab and the header inside the giving drawer. If left blank, it defaults to "Giving".
   • Breeze ChMS Subdomain: This is the only required field. Enter your organization's subdomain (e.g., if your giving URL is https://example.breezechms.com/give/online, your subdomain is example).
   • Embed Options: This section contains settings to customize the appearance and behavior of the embedded Breeze form.
     • Width: The width of the slide-out drawer (e.g., `500px` or `100%`).
     • Colors: Set the hex color codes (without the `#`) for the background, text, and donate button.
     • Fund ID: Optionally pre-select a giving fund by entering its ID.
     • Frequency: Optionally pre-select a giving frequency (e.g., "onetime", "weekly").
     • Amount: Optionally pre-fill a donation amount.
5. Click Save block. The giving tab will now appear on your site.

Additional Requirements

• Drupal 10 or 11
• A Breeze ChMS account with Online Giving enabled

Supporting this Module

A lot of hard work and dedication has gone into developing this module. If you find it helpful and would like to support ongoing development, consider buying me a coffee! Your support helps ensure that I can continue enhancing and
maintaining this module for everyone. Thank you for your generosity!

How it works

The module leverages a combination of a custom block plugin, a Twig template override, CSS, and JavaScript to create the slide-out widget.

• Block Plugin: The BreezeGivingBlock plugin defines the configuration form and passes the settings to the template.
• Template: The block--breeze-giving-widget.html.twig template provides the HTML structure for the drawer and the clickable tab. It is designed to be placed off-screen initially.
• CSS: The css/breeze_giving.css file contains the styles for the drawer, the tab, and the slide-in/slide-out animation. The animation is triggered by adding or removing an is-expanded class.
• JavaScript:
  • js/breeze_giving.js: This file contains a small script that adds a click event listener to the tab. When clicked, it toggles the is-expanded class on the widget's main container.
  • give.js: The module attaches the official give.js script from Breeze ChMS, which inspects the page for the <div id="breeze_giving_embed"> and replaces it with an <iframe> containing the actual giving form.