Givebear LogoGivebear

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 patternWhat to look for
Custom HTML blockPaste script and container markup together.
Header or footer script areaLoad the Givebear script once, then place mount elements in page content.
Code injection areaGood for site-wide SDK loading.
Restricted editorMay 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.

On this page