Before you start ❗
The Custom element feature is required to use Widgets. As of 3/30/23, only paid premium Wix accounts with a custom domain connected (without ads) have access to the this feature.
If you have a free Wix site, you will not be able to install custom elements using code snippets.
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 can be used with any campaign type, including Forms, Pages and Events. Please note that an embedded Widget will not embed the entire campaign page for Pages and Events – it will embed the checkout flow.
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. (The equivalent to our previous Bubble Element option.)
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.
Goal Bar – Showcase the progress of your campaign's success with a simple goal bar reflecting performance in real time. Also available as a thermometer-style embed.
Signup Form – Add an embedded form (or popup) to your external website to capture potential donor information for your newsletter mailing list. Contact form entries are automatically added as new contacts in your Givebutter account.
Supported payment methods 💸
Donors can complete transactions in a Widget using the following payment options:
Credit or debit card
Paypal
Venmo
Google Pay
Apple Pay will not appear in embedded Widgets, as limitations set by Apple prevent it from being used in iFrames. If you would like to provide this option, you will need to direct supporters to your Givebutter campaign page directly.
Customization options 🎨
Looking to customize your Widget or align it to a specific position on your site? You can alter a 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. Goal bar Widgets also have configurable options for color and sizing. Read more about our available configuration options →
Installing Widgets on Wix ⚙️
Widgets are installed in two parts: the library, and the Widget itself. On Wix sites, these are both added to the same relative location using their Custom element option.
To get started with creating and managing Widgets, visit your Givebutter dashboard.
Go to Settings on the left-hand menu bar.
Click Integrations under the Settings header – only account admins have access to the Integrations page.
Click Widgets, and click on the Wix button.
The following window will appear, with instructions on how to add the library code to your Wix site. Follow the instructions shown, or read on for details and images showing the steps!
Log into to your Wix account. In the sidebar menu, click Site & App, then click on Website. Click Edit Site, and this will open up your site editor.
Click the large blue plus sign located in the site editor.
Under the Add to site menu, click Embed Code, and then select Custom element.
After you click Custom element, a placeholder object will be added to your site preview. If applicable, move the placeholder to the desired location of your Widget.
Click Choose Source.
Under Server URL, add the library code provided in your Givebutter dashboard.
Under Tag name, add givebutter-widget.
Where is my library code?
You can find your library code by clicking the Wix button in the Widgets installation guide, or walk through the steps at the beginning of this section.
Next, click Set Attributes to complete the embed. Under Attribute name, add id. Under Value, add the Widget ID.
What's my Widget ID?
Go to your campaign's Sharing tab, click Widgets in the sub-menu, and click Embed on the relevant Widget. The ID is at the top if you've selected the Wix guide. Otherwise, you'll find the ID in green, located in the code at the top of the window.
Save your changes, and hit Publish! Your Widget is now live on your Wix site.
Wix FAQ 🤔
Can the Floating Button appear in the lower left corner of my site instead?
Yes! To position your Floating Button, all you need to do is add an additional attribute under Set Attributes. (You'll still need the "id" attribute.) Click New Attribute, then enter position as the name, and bottom-left as the value.
Can I remove a Floating Button Widget from specific pages on my site?
Yes, you can hide a Floating Button Widget from specific pages on your site using CSS. You'll need the Widget ID in order to hide it. Add the following CSS to the page that you'd like to remove the Widget from, replacing "WIDGETID" with the ID of the relevant Widget:
givebutter-widget[id='WIDGETID'] { display: none; }
My Floating Button is only displaying on one page. I want it on all my pages!
This is likely because your Widget is installed in the body area of your site editor. Move it to your site's header or footer (a consistent element of your site) and it will appear on all pages. You can also add it to the body area of multiple pages, if you want it to appear on some pages, but not all.
In my site preview, my Widgets are cropped or getting cut off.
Don't worry – this is just in the preview! Save and Publish, then view your live site. The Widget shouldn't be constrained by the box it's in on the live site.