With Give Lively you can embed one of your Give Lively pages onto your own separate website using our Widgets! This enables you to collect donations on your own website while still using Give Lively for handling and processing donation data.
Important: Since these embed codes are made for running a fundraising page on a different website the widgets cannot be placed into an iFrame. We also cannot troubleshoot widgets for nonprofits that have chosen to customize the styling using custom code.
Widgets are created inside your admin dashboard under the "Donation Widgets" section. There are two types of widgets, the Simple Donation Widget and the Branded Donation Widget. This page will display a preview of how each type of widget will look when embedded onto your external website.
Example images are also provided below.
The Simple Donation Widget (screenshot above) has a streamlined and miniature design. It's useful for when you need a Donate button that will process donations, but don't want the Give Lively fundraising page to appear along with it on your website.
The Branded Widget (screenshot above) will display the entire Give Lively fundraising page within your website. 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. All Branded Widgets require that users scroll to see the full page.
Create the Widget Embed Code
At the bottom of the widget preview in the "Donation Widgets" section is the "Customize Your Widget" section. This is where you'll go to pick which of your Campaign Pages the widget will act like when embedded onto your website.
Customize Your Widget
Click on the large square under "Associate Your Widget With a Fundraising Page." This will show a dropdown list of all the pages you have created. Each time you pick a new page the widget preview will change automatically so that you can be sure of which page you're embedding as the widget.
Widget Custom Donation Amounts
Your widget allows you to set the donation amounts that will appear. Selecting "Include suggested donation amount buttons" will leave the donation suggestions the same as the page you picked.
Selecting "Set a pre-filled amount for the custom donation field" will hide all the suggested donation amounts and display only a custom donation field where donors can write in how much they want to donate. You can write in a suggestion for this field, but the donor can choose to ignore it and write in however much they want to donate.
The last checkbox, "Allow donors to dedicate their donations" is for determining if you want the widget to accept donation dedications or not. This will not change whether the actual Give Lively page itself can accept donor dedications, it will change it only for the widget.
Once you're sure that you've picked the widget type you want, the page it should use, and what donation options it will show, and whether it will accept donor dedications, you're done customizing! Click on the "Get Embed Code" button. This will automatically copy the code to your computer's clipboard, meaning you can now right-click and paste the code immediately to your separate website platform of choice.
Widget Donation Payment Options
Both the Simple and Branded Widgets have the same donation options as a normal Give Lively page. However, Apple Pay does require an extra step to work on widgets. We provide instructions on what to do in our Payment Methods article.
Where To Embed The Widget Code
Different websites have different processes for embedding a block of code like the donation widget. Give Lively cannot provide personal instructions on embedding widgets as website builders and hosts can change their instructions frequently. So it is always best to look at your website builder's own help articles to determine where and how it is you should embed your code.
Below are some examples of websites where you can embed the widget with links where they put their instructions for doing so.
Squarespace Widget Embed
Give Lively widgets will work in Squarespace "Code" blocks. You can find instructions and details on Squarespace code blocks in their help article below:
You will want to set the Code block to "HTML" for it to read the Give Lively Widget Embed code directly. If the UI or instructions have changed on how to do this, please contact Squarespace support for help on embedding third-party widgets.
Wordpress Widget Embed
Similar to Squarespace, Wordpress also allows embedding third party widgets through their own Code blocks. You can read more about how to use it through Wordpress's own help article: