Skip to main content

How to customize your online giving widget in Gracely

You can tailor your giving widget's appearance, layout, behavior, and embed settings to match your church’s brand and giving needs.

Updated over 2 weeks ago

Navigate to:

Setup Church Portal > Church Portal Studio > Giving

From there, you can fully control the look and behavior of your online giving experience.

1. Form Styling

This section controls the look and feel of your giving form.

Option

Description

Primary Color

Set your church’s main color (used for buttons and highlights). Use a hex code (e.g. #419d68).

Background Color

Define the background of the form area. You can leave it blank for transparency or match your site.

Border Radius

Adjust how round the corners of the form fields and buttons are. Use the slider to increase or decrease.

Font Size

Set the size of the input and label text. Options include Small (14px), Medium (16px), or Large (18px).

Text Color

Select the color of text inside your form (e.g., black #000000).

Title Size

Choose how large the form title appears. Great for readability and style.

Field Gap

Adjust spacing between each field for better visual separation.

Section Gap

Add space between each major form section (e.g., donation info vs. personal info).

Label Alignment

Align labels to the left, center, or right of input fields. Left is most common.

Button Border Radius

Roundness of the button. Great for making buttons feel soft or sharp.

Button Size

Choose how big the call-to-action button should be (Medium, Large, etc.).

Label Placement

Place labels above, inside, or beside input fields. "Top" is most accessible.

Live Preview: As you adjust these, you can see real-time changes on the right preview window!

Online giving widget

2. Layout Options

Here you can control how the giving form is structured:

Option

Description

Show Giving Header With Message

Displays a top banner/message (e.g., “Your generosity fuels our mission.”).

Payment Plan Options

Toggle which frequencies are available: One Time, Weekly, Bi-Weekly, and Monthly.

Show Fee Breakdown by Default

If enabled, donors will immediately see a breakdown of fees. You can choose to show/hide it initially.

This section helps simplify or expand donor choices depending on how flexible you want your giving plans to be.

3. Advanced Settings

These settings allow you to control form behavior and messaging.

Option

Description

Continue Button Text

Customize the text on the donate button. Example: "Continue to Give", "Give Now", "Support Our Mission".

Success Message

Message displayed after a successful donation. Keep it thankful and warm (e.g., “Thank you for your donation!”).

Error Message

Shown when the transaction fails. Example: “We couldn’t process your payment. Please try again.”

Redirect URL (Optional)

After a successful gift, you can redirect users to a custom thank-you page on your church’s website.

4. Embed Code & Usage

This is where you publish and share your giving form.

How to Embed:

  1. Copy the HTML embed code from the box.

  2. Paste it into your church’s website where the form should appear.

  3. The widget will automatically reflect your custom settings.

You can also share the Direct Link provided at the bottom of this section. This is ideal for:

  • Email campaigns

  • Text messages

  • QR codes

  • Social media buttons

Live Preview Panel

Everything you change will immediately update in the Live Preview on the right side of the screen. This includes:

  • Donation amount display

  • Frequency buttons

  • Input fields for name, email

  • The “Continue to give” button styling

This helps ensure your form looks exactly the way you want before sharing.

💡Pro Tips

  • Stick to 2 or 3 payment plans for simplicity unless your givers are used to more options.

  • Use colors and fonts that match your church’s website for a cohesive look.

  • Customize thank-you messages to include next steps like inviting them to church or joining a group.

  • Always test your form using the Direct Link before embedding.

Did this answer your question?