About Givebutter Widgets 🔎
Givebutter Widgets is the most powerful way to drive donations to your campaigns by putting calls to action right where your donors already are – on your website! Donors can submit a transaction (or purchase tickets) directly on your site, without being redirected.
Widgets created from the Givebutter dashboard are dynamic, which means any changes you make on Givebutter will update on your Widget, without needing to update your site's code. You can embed Givebutter Widgets on specific parts of your website by copying and pasting provided HTML code into the editor area of the website where you'd like them to appear.
Types of Widgets 🖥️
Button – Buttons can be added anywhere on your website, and display a donation form when clicked. Buttons can be added to the header or footer section of your website. Buttons have two configurable formats, Static and Floating.
Static – Placed within your site formatting (such as your site navigation). Scrolls with the page when you scroll down.
Floating – Positioned in the lower right corner of the page and "floats" on top of your site formatting so it is always visible. Does not scroll when you scroll down the page.
Form – Donor-friendly donation forms can be added to any page on your website. Directly embeds the entire Form, which scrolls with the rest of the page content.
Supported payment methods 💸
Donors can complete transactions in a Widget using the following payment options:
Customization options 🎨
Looking to customize your Widget or align it to a specific position on your site? You can alter the button's color, styling, and icon, as well as add an align attribute to position your Widget on the left, right, or center or your page. Read more about our available configuration options →
Installing Widgets on GoDaddy ⚙️
Add the library 📖
To get started with creating and managing Widgets, visit your Givebutter dashboard.
Go to Account on the left-hand menu bar.
Click Integrations – only account admins have access to the Integrations page.
Click Widgets, and click on the GoDaddy button.
The following window will appear, with instructions on how to add the library code to your GoDaddy site. Follow the instructions shown, or read on for details and images showing the steps!
Log in to GoDaddy, and in your dashboard, click the button that says Edit Website.
In your website editor, create a new section where you want your embedded Widget to appear. For floating buttons, you can add this in any location.
A sidebar will appear. Search for HTML in the search bar, and click Add/Add Again to insert the section.
After adding the HTML section to your site, a placeholder block will appear, and you'll be prompted to enter your HTML code in the sidebar.
In this Custom Code box, paste the library code provided in your Givebutter dashboard.
Embed a Widget ➕
In the same Custom Code box in GoDaddy (below the library code), you'll paste the Widget's embed code.
Your Custom Code box should look something like this, with both pieces of code:
Click Done and Publish to save your changes. The Widget should now be added to your site!
GoDaddy FAQ 🤔
How can we hide the white space around Button Widgets on GoDaddy?
For Static Button Widgets, white space may be added in the custom HTML section you added. We recommend setting a smaller Forced Height (this option is located directly below the Custom Code box, where you added the code snippets). For Floating Button Widgets, our script automatically removes the blank/white space surrounding the section added. Please note that this correction will not appear in your editor – you must publish the site to view this in effect.
Can I add a Widget that appears on every page on my site?
GoDaddy doesn't allow you to add HTML directly to the header or footer on your site (or globally), so you can't install a Widget on GoDaddy sites that will automatically appear on every page. You'd need to install the code manually on each site you want your Widget to appear on.
My Form Widget is overlapping my website, or not formatting correctly.
This may be because you set a Forced Height for the section that is smaller than the Form. You'll need to remove the Forced Height you set for this section so the Form can display fully.