Use Embeddable Widgets to collect donations on your website

Our customizable donation widgets can be integrated seamlessly and directly into your website or blog to collect donations directly from the site. Here's how to embed a widget on a site you host, or one built using Squarespace, Wix or WordPress.

Examples

No items found.

Before You Get Started

Video Overview

Text Walkthrough

There are two types of widgets: Simple and Branded. A Simple Donation Widget has a streamlined design and can be added anywhere. 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.

VERY IMPORTANT NOTE: The information in this article pertains only to structured widgets set up through the “Widgets” tab in the Nonprofit Admin Portal and added to your website using an embed code that we generate. Our donation widgets do not look like or operate in the same manner as a Give Lively fundraising page that appears in an iframe or is otherwise embedded in your website.
 
To manage the look, feel and fields of any other type of Give Lively fundraising page that you embedded in your website, follow the instructions that apply to Campaign Pages or Event Ticketing pages. To troubleshoot issues outside the fields of a non-widget Give Lively fundraising page embedded in your website, please turn to the web developer who embedded the page.

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).

Also see below for details about how to enable Apple Pay on the Simple Donation Widget.

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

Embed a Simple Donation Widget on a website you host

  1. Log in to the Nonprofit Admin Portal and click the "Widgets" tab in the menu on the top of the dashboard.
  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.

Embed a Branded Donation widget on a website you host

  1. Log in to the Nonprofit Admin Portal and click the "Widgets" tab in the menu on the top of the dashboard.
  2. Click "Branded Donation Widget" on the lefthand 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.

Embed a Simple or Branded Donation Widget on a Squarespace site

Squarespace logo

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.

  1. Click "Get Embed Code" and then select the "div" element of the code. For a Simple Donation Widget, it will look like this:

    For a Branded Donation Widget, it will be similar to this, using your organization's real name and, if relevant, campaign name:
    
            <div data-widget-src=’https://smart-donations-staging.givelively.org/donate/your-organization-name/campaign-name?ref=sd_widget' id=“give-lively-widget” class=“gl-branded-donation-widget”></div> 
          
  2. Follow these instructions provided by Squarespace
  3. Paste the "div" element from above into the Code element on the page where the widget will appear.
  4. Copy the "script" element from the embed code. The section starts and ends with "script" and will look something like this, using the type of widget, your organization's real name and, if relevant, campaign name:
    
        <script>gl=document.createElement(‘script’);gl.src=’https://smart-donations-staging.givelively.org/widgets/simple_donation/your-organization-name/ddsao.js?show_suggested_amount_buttons=false&show_in_honor_of=false&address_required=false&has_required_custom_question=false';document.getElementsByTagName('head')[0].appendChild(gl);</script>
       
  5. On the lefthand menu of the page in Squarespace, go to "Settings" and then "Advanced" and click "Code Injection" to paste the "script" code into the "Header" section.
  6. For Branded Donation Widgets, if the widget appears to be cut off after you paste in your code, refresh the page and the full widget should appear.

Embed a Simple or Branded Donation Widget on a Wix site

Wix.com logo

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

Wordpress logo

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.

Enable Apple Pay on the Simple Widget

ApplePay logo

Once you have embedded the simple widget on your site, if you would like to add Apple Pay as an option for your donors (not required), follow the three steps below. Keep in mind that Apple Pay will only appear on Apple Pay-enabled Apple devices using Safari.

  1. First, your application must be served over HTTPS, meaning your website must begin with HTTPS, not HTTP.
  2. Download this domain association file and host it at /.well-known/apple-developer-merchantid-domain-association on your site. For example, if you're registering https://example.com, make the domain association file available at https://example.com/.well-known/apple-developer-merchantid-domain-association. You'll know it's correctly hosted if you see the file when you go to that URL on your domain.
  3. Email support+applepay@givelively.org with the name of your nonprofit in the subject line. In the body of the email include the URL of the web page where your widget is hosted. We will register your domain as approved on our end.

To learn more about enabling and disabling digital wallets, visit this page.

Downloads

No items found.

Related Articles

Link to any fundraising/event page from call-to-action button on website

Add a link to your fundraising page from a "Donate" or "Get tickets" button on your website, with instructions on how to do so from the most popular website-building services: WordPress, Wix, and SquareSpace.

Integrate with Double the Donation

Learn everything you need to know about Double the Donation: what it is, what it does and how to add it to your Give Lively donation pages.