All Collections
Website Embeds
How to use Givebutter Elements on a Weebly website
How to use Givebutter Elements on a Weebly website
Add donation buttons, bubbles, and forms directly to your own Weebly website
Sunny avatar
Written by Sunny
Updated over a week ago

Contents:

Copy the Elements library from Givebutter

  • In your Givebutter dashboard, go to Account in the left-hand menu bar, and then Integrations.

  • Click on Elements.

  • Click Next.

  • Click the Copy button, then click Next again.

  • For now, choose Enable Later. We'll come back to creating a button/bubble/form later.

Install the Elements library into your Weebly account

  • In your Weebly dashboard, click the Theme tab.

  • Click Edit HTMLS/CSS in the bottom left-hand corner.

  • Under the HEADER TYPE section, click on header.html

  • Scroll past all the existing code in the header and paste the elements library code at the end.

  • Click Save.

  • You may be prompted to name your theme. Go ahead and create a name and click Save.

Types of Elements

  • Donation Bubbles add a bubble to your website that displays a donation form when clicked. By default, your Donation Bubble will float in the bottom right-hand corner of every page of your website.

  • Donation Buttons can be added anywhere on your website that displays a donation form when clicked.

  • Donation Forms are our donor-friendly donation forms you can add to any page on your website.

Create an Element

  • In your Givebutter dashboard, click New Element.

    • If you've left the Elements section, you can return there by going to Account in the left-hand menu bar, then Integrations, then Elements.

numbered steps
  • Choose which type of Element you want to create.

  • Customize your Element.

  • Click Create Element.

  • Click Copy on the page that pops up next.

  • Close the pop up screen.

Install a bubble or button in Weebly

  • Install in the header section exactly like you installed the Elements library.

Install a donation form in Weebly

  • In your Weebly dashboard go to your home page or the page you want to add the form to.

  • Click and drag the Embed Code black to where you want it to appear on your page.

  • Click on the empty block.

  • Paste the Elements Form code inside the HTML block.

  • Adjust position.

  • Click Publish.


Did this answer your question?