Theming and Platforms
Place Givebear widgets on website builders and keep styling readable.
Widgets should feel like part of the organization's website while still making the donor path clear. The goal is not to hide Givebear. The goal is to make the action obvious and trustworthy.
Theme settings
Common configuration includes:
- Organization slug or id.
- Fund or campaign id.
- Accent color.
- Light, dark, or automatic embed theme where supported.
- Button text.
- Placement.
- Calendar, prayer-time, or event options.
Use the organization's brand accent color, but test contrast. A beautiful accent color that makes button text hard to read is not usable.
Website builders
Most website builders have one of these embed surfaces:
| Platform pattern | What to look for |
|---|---|
| Custom HTML block | Paste script and container markup together. |
| Header or footer script area | Load the Givebear script once, then place mount elements in page content. |
| Code injection area | Good for site-wide SDK loading. |
| Restricted editor | May block scripts or clip overlays. Use a direct Givebear link if embeds are not allowed. |
If a builder strips scripts, the widget cannot render inside that block. Use a direct public Givebear link or ask the website maintainer for a script-enabled section.
Layout checks
After embedding, check:
- Desktop width.
- Mobile width.
- Scroll behavior.
- Overlay or popover clipping.
- Button contrast.
- Font sizing around the widget.
- Whether the donor can still understand what they are giving to.
When to involve a developer
Involve a developer when:
- Several widgets need to render from shared data.
- The website uses a JavaScript framework.
- Analytics must be wired to site events.
- The widget must be inserted after page load.
- The builder requires custom script placement.
Developer details live in the SDK section.