Embed and Widgets

NeedBridge lets you embed volunteer signup forms and need listings directly on your organization's own website. Instead of sending visitors to a separate page, you can add a NeedBridge widget to your existing site so volunteers can sign up or browse needs without leaving your domain.

What Embedding Does

Embedding adds a NeedBridge component to your website using an iframe -- a standard web technology that displays one page inside another. When a visitor interacts with the embedded widget, they are using NeedBridge functionality within the context of your own site.

Common embed use cases:

  • Volunteer signup form on your homepage or "Get Involved" page, so visitors can subscribe to need notifications without navigating to a separate site.
  • Needs list on your website, so visitors can browse current open needs and see where help is needed.
  • Area-specific displays showing needs or signup options for specific service areas.

Where to Find Embed Code

To get the embed code for your organization:

  1. Navigate to Settings in the left-hand navigation.
  2. Select Embed (or Embed and Widgets).
  3. You will see embed options with generated iframe code for each type of widget.

Embed Options

NeedBridge offers several embed types:

Volunteer Signup

An embeddable form that lets visitors subscribe to need notifications. The form collects the volunteer's name, email, phone, address, and preferred service areas -- the same information collected on your standalone signup page.

Needs List

An embeddable display of your organization's current open needs. Visitors can browse available needs, see details, and claim needs directly from your website.

Areas

An embeddable display that shows your organization's service areas, allowing visitors to see where you operate and choose areas to subscribe to.

Copying the Iframe Code

For each embed type:

  1. Select the type of widget you want (volunteer signup, needs list, or areas).
  2. Review the generated iframe code.
  3. Click Copy to copy the code to your clipboard.
  4. Paste the iframe code into your website's HTML where you want the widget to appear.

The iframe code looks something like:

<iframe src="https://your-org.needbridge.com/embed/signup" width="100%" height="600" frameborder="0"></iframe>

Your web developer or website builder (WordPress, Squarespace, Wix, etc.) should be able to add this code to any page.

Customization Options

Embedded widgets inherit your organization's branding settings:

  • Colors -- Buttons and links use your primary brand color as configured in the Branding settings.
  • Terminology -- Labels use your customized terminology (for example, if you changed "Volunteer" to "Neighbor," the embedded form will say "Neighbor").
  • Logo -- Your organization's logo may appear in the embedded widget depending on the widget type.

Some embed settings may allow you to adjust the widget height or control which elements are displayed.

Adding the Embed to Your Website

How you add the embed code depends on your website platform:

  • WordPress -- Add a Custom HTML block to any page or post and paste the iframe code.
  • Squarespace -- Use an Embed block or Code block to paste the iframe code.
  • Wix -- Add an HTML iframe element to your page and paste the code.
  • Custom website -- Paste the iframe code directly into your HTML file at the location where you want the widget.

If you are not sure how to add HTML to your website, your web developer or the support documentation for your website platform can help.

Tips

  • Place the signup form prominently. The more visible your volunteer signup widget is, the more signups you will get. Consider placing it on your homepage, your "Get Involved" page, or both.
  • Set an appropriate height. If the iframe is too short, visitors will have to scroll within the widget. Test different heights to find one that shows the full form or list without excessive scrolling.
  • Test on mobile. Many visitors will view your website on a phone. Make sure the embedded widget looks good and is usable at smaller screen widths. Using width="100%" helps the widget adapt to different screen sizes.
  • Keep your NeedBridge branding consistent. Since the widget inherits your NeedBridge branding, make sure your NeedBridge brand colors and logo are up to date so the embed matches the rest of your website.