GivebearTheme and place widgets
Style Givebear widgets to match your brand, then paste them onto your website builder.
You build each widget in the dashboard, style it there, then copy one snippet onto your site. This page covers the styling controls Givebear actually offers and how to place the snippet on common website builders.
If you are still deciding which widget to use, start with donation widgets or calendar and prayer widgets.
Before you start
- Set your public donation address in settings. The donation widget builder needs it before it can generate a snippet.
- Turn on the matching add-on for calendar or prayer-time widgets. See the add-ons reference.
- Have access to your website builder, specifically a block that accepts custom code.
What you can style
Styling controls differ by widget. Set them on each widget's Embed screen.
| Widget | Where to find it | Styling controls |
|---|---|---|
| Donation button or card | Donations, then Website button | Button text, accent color |
| Inline donation form | Donations, then Website button | None: it adapts to the page |
| Calendar or events | Events, then Website calendar | Layout: Agenda, Compact, or Next up |
| Prayer times | Add-ons, then Website widget | Light, dark, or auto theme; accent color; layout |
The light, dark, or auto theme toggle is offered only for prayer-time widgets. Donation and calendar widgets follow each visitor's light or dark system setting automatically.
Styling is baked into the snippet you copy. It applies to your external site only. You do not need to save it inside Givebear.
Build and copy a styled snippet
Open the Embed screen for your widget using the table above.
Choose the layout or surface you want. For donations, pick a button, card, or inline form. For calendars, pick a layout. For prayer times, pick full schedule, hero card, or header strip.
Set the styling controls. Pick your brand accent color, and set the button text or theme where those controls appear.
Check the live preview next to the builder. It shows exactly how the widget will look.
Select Copy to copy the snippet to your clipboard.
Test color contrast. An accent color that makes button text hard to read is not usable. Pick a shade that keeps text legible.
Add the snippet to your website
The snippet is self-contained. It loads Givebear and places the widget in one block, so you paste it once where the widget should appear.
Most website builders expose one of these surfaces. Find the one your builder offers.
Add an embed or custom HTML element to the page. Paste the whole snippet into it. This is the most common path on drag-and-drop builders.
Some builders have a site-wide header or footer code area. You can load Givebear there, but the widget still needs its block in the page body. Pasting the full snippet into a custom HTML block is simpler for a single widget.
Some plans or editors block custom code. If you cannot add a code block, the widget cannot render. Use a direct Givebear link instead, or ask your website maintainer for a code-enabled section.
After pasting, publish the page and open it in a normal browser tab.
Check the embed after publishing
Once the widget is live, confirm it looks right:
- Check it on desktop and on a phone.
- Scroll the page and confirm nothing overlaps or clips the widget.
- Open a donation button or card and confirm the popup is not cut off.
- Confirm the accent color and button text read clearly.
- Confirm a donor can still tell what their gift supports.
If your builder strips scripts
If a builder removes script code, the widget will not appear. The copied snippet includes a plain Givebear link as a fallback, so visitors still have a way to give or view events.
You can also share a direct public link instead of embedding:
- Your organization donation page.
- A specific fund or campaign link from the widget builder.
For calendars and prayer times, link to your public organization page so visitors can see the live schedule.
When to involve a developer
Copy-paste embeds cover most sites. Bring in a developer when you need more control:
- Several widgets rendering from shared data.
- A site built on a JavaScript framework.
- Widgets inserted after the page loads.
- Analytics wired to your own site events.
Developers use the JavaScript methods and data-givebear-* attributes in the SDK reference.