If you previously embedded a Givebutter campaign on your own external website using Givebutter Elements, we recommend updating to the newest version – Widgets!
Benefits of switching 🔄
Improved reliability and support
Widgets are faster and more reliable than Elements, with a more lightweight library, additional customization options, and a shorter code snippet. Embed previews in the dashboard are smoother and faster to load. Widgets also include full support on Wix sites. In-depth instructions and better support are available, with platform-specific onboarding guides. UTM tracking has also been upgraded for improved reliability.
Switching to Elements is also important because Elements and Widgets are not compatible with each other, meaning you cannot install code from both of these systems on your website. Widget embeds will not work correctly unless the Elements code has been removed from your website.
Identifying Elements 🔍
Not sure if you still have Elements on your site? Existing Elements and Widgets don't have major visual differences to tell them apart. You'll need to view the HTML source code on your website, and have editing access. In your site HTML, look for Givebutter-related code that includes the word "element" or "iframe" – Widgets HTML does not include these terms. Elements were installed two ways:
Library code + Element
A longer HTML library "script" code installed in the <head> of a site, plus the shorter HTML Element snippet code installed where the Element embed appears on your published site. The shorter snippet code is likely in the body of your site on a specific page, in the site heading or navigation bar, or in the footer.
An HTML code available from a campaign's Sharing tab, for embedding a Form on your site. iFrames were installed in a single block.
Removing Elements 🗑
To remove an Element from your site, you'll need to edit the code on your site. All you need to do is remove the Elements HTML from your site's source code, and save. Elements HTML to delete may include:
Elements library code (in the <head> of your site)
Element snippet code (in the location of the Element, likely in the body of your site)
iFrame code (including the <div> segment placed before the iFrame)
Please see Identifying Elements to see examples of the source code to remove.
Once you've removed the Elements from your site code, double check that you've saved your changes and published the site, and view your live site. Ensure that the Elements are no longer appearing on the published site.
Installing Widgets ✨
Once Elements have been removed from your site, you can install a new Widget! Our platform-specific guides are the most detailed, but you can also view our general Widgets installation guide if you're more comfortable with coding, or use a different web platform.
Want to learn more about Widgets?