Use embeddable widgets to collect donations on your website

Use the "In This Article" links to the left to find the appropriate section, depending on whether you are using a Simple Donation Widget or Branded Donation Widget, and as a function of the type of site on which it will be hosted (hosted, Squarespace, Wix or WordPress).

Two types of donations widgets

There are two types of widgets: Simple and Branded.

Simple Donation Widget

A Simple Donation Widget has a streamlined design and can be added anywhere.

Branded Donation Widget

A Branded Donation Widget allows for the use of branding, imagery, videos, and stories, as well as built-in social sharing to strengthen any fundraising appeal.

A note about digital wallets

In most cases, Give Lively widgets detect if a donor's device/browser has digital wallets like Apple Pay or Google Pay enabled as a payment method. Learn how to enable and disable digital wallets. 

In all cases, contact support@givelively.org if you have any problems setting up your widget.

A note about payment forms

Give Lively has two generations of payment forms in use. Your choice of features will dictate which form appears. At present, both Simple Widgets and Branded Widgets are supported by both generations of payment forms. Activation of Simple or Branded Widgets alongside other products or features on this list may trigger the second-generation payment form. Any combination of products or features beyond those detailed on the list will continue to see use of the first-generation donation form.

IMPORTANT: Both generations of payment forms guide donors through very similar giving experiences and there is no reason a nonprofit should favor one payment form over the other. Over the next few months, the new payment form will become the standard for all Give Lively donation pages. Learn more here.

Embed a Simple Donation Widget on a website you host

1. Log in to the Nonprofit Admin Portal and click the "Donation Widgets" link in the left-hand navigation bar.
2. Take a good look at the Widget Preview, which will fit the width of the container in which you embed it, with a recommended container height of 272 pixels.
3. "Customize Your Widget" by clicking the "Core Profile" field and choosing the fundraising page with which you wish to associate the widget. The widget will automatically adopt the campaign’s styling and donation frequency. In addition, donations from the widget will be associated with this fundraising page in the data you get from our platform.
4. Under "Donation Amounts," select from the options included on the widget. You can choose to include the four default suggested donation amount buttons ($25, $50, $100, and $250) or come up with your own four suggested amount options. Or you can set one pre-filled amount for the custom donation field (which hides all other suggested amounts).
5. If you wish to include an option for donors to give in honor or in memory of someone, click the box next to "Allow donors to dedicate their donations" and look back at the Widget Preview to see how it is presented.
6. Once done tailoring your widget, click the "Get Embed Code" button, and then select and copy the code in its entirety.
7. Paste the code into your website's code wherever you would like the widget to appear. The widget will fill the container you place it in.

IMPORTANT: You can only place one Donation Widget per web page. You may have more than one Donation Widget on your website so long as the widgets are placed on different pages.

See above for an important note about digital wallets and widgets.

Embed a Branded Donation widget on a website you host

1. Log in to the Nonprofit Admin Portal and click the "Donation Widgets" link in the left-hand navigation bar.
2. Click "Branded Donation Widget" in the left-hand menu.
3. Wait a moment for a preview of the widget to load using information pulled from your primary fundraising page.
4. If you wish, associate your widget with one of your customized fundraising pages instead of your primary fundraising page. The widget will reload after adopt your campaign’s styling and donation frequency. In addition, donations from the widget will be associated with this fundraising page in data you get from our platform.
5. Click "Get Embed Code" and then select and copy the code in its entirety.
6. Paste the code into your website's code wherever you would like the widget to appear. The widget will fill the container you place it in.
7. IMPORTANT: For your Branded Donation widget to work, it must be served over HTTPS, meaning your website must begin with HTTPS, not HTTP.

IMPORTANT: You can only place one Donation Widget per web page. You may have more than one Donation Widget on your website so long as the widgets are placed on different pages.

See above for an important note about digital wallets and widgets.

Embed a Simple or Branded Donation Widget on a Squarespace site

To add a Simple Donation Widget, follow steps 1-5 above in the Embed a Simple Donation Widget on a website you host section above before turning to the steps below.

To add a Branded Donation Widget, follow steps 1-4 above in the Embed a Branded Donation Widget on a website you host section above before turning to the steps below.

See above for an important note about digital wallets and widgets.

Embed a Simple or Branded Donation Widget on a Wix site

To add a Simple Donation Widget, follow steps 1-5 above in the Embed a Simple Donation Widget on a website you host section at the top of this page before turning to the steps below.

To add a Branded Donation Widget, follow steps 1-4 above in the Embed a Branded Donation Widget on a website you host section near the top of this page before turning to the steps below.

1. Click "Get Embed Code" and then select and copy the code in its entirety.
2. Click here and follow the instructions provided by Wix.
3. When editing your page, click the "Home Page Code" footer, which will bring up an HTML code editor. You should, by default, see the following code (if you have never edited this section before):
   
   $w.onReady(function () {
     //TODO: write your page related code here...
   ‍
4. Delete that code and paste in the following (if you've already embedded one widget on your Wix site, you will need to replace "html1" -- highlighted in bold in the first line below):

‍const GL_WIDGET_ID = "#html1";
import wixWindow from 'wix-window';
$w.onReady(function () {
  const glWidget = $w(GL_WIDGET_ID);
  glWidget.postMessage("is_wix");
  glWidget.onMessage((event) => {
      if (event.data === "is_wix") {
          glWidget.postMessage("is_wix");
      } else {
          const matches = event.data.match(/^wix:open_modal:(.*)$/);
          if (matches) {
              wixWindow.openModal(`${matches[1]}&show_close_button=false`, {
                  "width": 500,
                  "height": 650
              });
          }
      }
  });
});

Embed a Simple or Branded Donation Widget on a WordPress Site

To add a Simple Donation Widget, follow steps 1-5 above in the Embed a Simple Donation Widget on a website you host section at the top of this page before turning to the steps below.

To add a Branded Donation Widget, follow steps 1-4 above in the Embed a Branded Donation Widget on a website you host section near the top of this page before turning to the steps below.

1. Click "Get Embed Code" and then select and copy the code in its entirety.
2. Click here and follow WordPress's widget instructions.

See above for an important note about digital wallets and widgets.‍