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

You can embed bubbles and donation forms on a Wix website. Buttons are currently not supported, however, we're working directly with Wix on making this a possibility in the future.

Contents:

Before you start

Custom code is required to use the Elements bubble. As of 3/30/23, only paid Wix accounts have access to the custom code feature. Free accounts can still embed donation forms using the instructions below.

settings and custom code

Install the Elements library into your Wix account

(Not required if you are embedding a Donation Form)

  • 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 bubble later.

  • In your Wix dashboard, scroll down to Settings, then to Advanced and click Custom code.

  • Click on Add Custom Code.

  • Paste the copied Elements library code.

  • Name your code.

  • Choose Load code once.

  • Choose Head for where you will place the code.

  • Click Apply.

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.

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 in Wix

  • Copy the bubble code from your Givebutter dashboard.

  • In your Wix dashboard, scroll down to Settings, then to Advanced and click Custom code.

  • Click on Add Custom Code.

  • Paste the copied bubble code.

  • Name your code.

  • Choose Load code once.

  • Choose Head for where you will place the code.

  • Click Apply.

Install a donation form in Wix

  • In your Givebutter dashboard, click on the Sharing tab of your campaign.

  • Copy the code in the Embed section.

  • In your Wix website editor, go to the page where you want to embed the form.

  • Click the plus icon.

  • Click Embed Code.

  • Choose Embed HTML.

  • Paste the code into the box that appears.

  • Add alt text if desired and then close the code box.

  • Adjust the form size to make sure the Continue button displays.

  • Click Publish.


Did this answer your question?