Widget Wizard - Givebutter Support Tool

🧈🪄 Need help with a widget issue? You're in the right place.

🔎 This wizard will help you become a widget detective!

We'll check everything from platform compatibility to code installation, step-by-step.

I'll guide you through the same troubleshooting steps our most experienced agents use.

📋 Step 1: Platform Compatibility Check

First, let's make sure we're not churning for nothing! This helps us catch compatibility issues early and save everyone time.

What website builder is your User using?

📋 Step 1.2: Plan Level Check

Let's verify they have the right plan level for widgets.

What plan do they have?

🎯 Step 2: Widget Type Identification

Different widget types have different requirements - this helps us ask the right questions.

What type of widget is your User trying to install?

Important: Form widgets only embed the donation section - not campaign images, story, or supporter activity. If Users want the full campaign to be embedded, upvote this feature request.

💰 Step 3: Payout Setup Check

Great! can definitely support widgets.

Have they connected their payout method?

Without payout info, widgets appear as blank boxes or load forever.

🔍 How to check: Click on the Payouts tab in the User's dashboard. Accounts that haven't set up their payout method yet will look like this:

🟢 Step 3.2: Campaign Published Check

Is their campaign active?

Widgets connected to unpublished campaigns will appear broken. They have nothing to point to.

🔍 How to check: Click on Campaigns in the left-hand menu bar. Check the Status of the campaign.

😞 Darn, widgets won't work with their current setup

💬 What to tell your User:

Relevant Help Article

How to share a campaign

https://help.givebutter.com/en/articles/3471486-how-to-share-a-campaign

Directions on text-to-donate, QR codes, and the Share this fundraiser feature built right into their campaign.

😞 Darn, widgets won't work with their current setup

💬 What to tell your User:

After checking, I confirmed that Google doesn't currently support Givebutter widgets. But don't worry - you can still share your campaign link directly on your website and on social media. 😊 Would you like directions on how to do that?

Relevant Help Article

How to share a campaign

https://help.givebutter.com/en/articles/3471486-how-to-share-a-campaign

Directions on text-to-donate, QR codes, and the Share this fundraiser feature built right into their campaign.

😞 Darn, widgets won't work with their current setup

💬 What to tell your User:

After checking, I confirmed that Shopify doesn't currently support Givebutter widgets. I'll upvote you on our feature request to integrate Shopify with Givebutter. In the meantime - you can still share your campaign link directly on your website and on social media. 😊 Would you like directions on how to do that?

Additional Resources

Shopify Canny Request

https://givebutter.canny.io/integration-requests/p/shopify-integration

Help Article: How to share a campaign

https://help.givebutter.com/en/articles/3471486-how-to-share-a-campaign

Directions on text-to-donate, QR codes, and the Share this fundraiser feature built right into their campaign.

Looks like we don't have any documentation about widgets and [PLATFORM NAME]

Don't panic, we can still help!

🔍 Research Step: Ask ChatGPT: "Does [PLATFORM NAME] support code injection?"

📋 What you'll get: A summary of whether Givebutter Widgets work with [PLATFORM NAME] and any plan requirements

🤔 Your decision: Is their [PLATFORM NAME] plan compatible with Givebutter widgets?

Let's find instructions for installing their library code on [PLATFORM NAME].

No worries, we can figure this out!

🔍 Research Step: Ask Google: "how to install custom code in [PLATFORM NAME] website"

🤖 Skip the AI summary. These can be inaccurate. We want instructions written specifically by [PLATFORM NAME].

👀 Look for pages that reference:

Custom HTML
Embed custom code
Embed elements
Code injection
Insert/install custom code

Once you find the best resource for your user, paste the web address here:

💬 What to tell your User:

I double-checked your website, and I see the library code isn't installed yet. I found this resource from [PLATFORM NAME] that explains how to add the library code to your website. Take a look at these steps and let me know what other questions I can help with. 😊

https://example.com/instructions

Here is your exact library code to use:

<script
    async
    src="https://widgets.givebutter.com/latest.umd.cjs?acct=XE8NSeupPNYijQZ9&p=squarespace"
></script>
            

Did this solve the issue?

Let's find instructions for installing their widget code on [PLATFORM NAME].

No worries, we can figure this out!

🔍 Research Step: Ask Google: "how to install custom code in [PLATFORM NAME] website"

🤖 Skip the AI summary. These can be inaccurate. We want instructions written specifically by [PLATFORM NAME].

👀 Look for pages that reference:

Custom HTML
Embed custom code
Embed elements
Code injection
Insert/install custom code

Once you find the best resource for your user, paste the web address here:

😞 Darn, widgets won't work with their current setup

💬 What to tell your User:

After checking, I confirmed that [PLATFORM NAME] doesn't currently support Givebutter widgets. But don't worry - you can still share your campaign link directly on your website and on social media. 😊 Would you like directions on how to do that?

Relevant Help Article

How to share a campaign

https://help.givebutter.com/en/articles/3471486-how-to-share-a-campaign

Directions on text-to-donate, QR codes, and the Share this fundraiser feature built right into their campaign.

🎉 Another common culprit! This could be the cause.

💬 What to tell your User:

Ah, it looks like you still need to connect your payout information. That has to be completed before widgets can work. Here are instructions on how to do that.

Relevant Help Article

How to add and edit your payout information with Stripe Connect

https://help.givebutter.com/en/articles/10401823-how-to-add-and-edit-your-payout-information-with-stripe-connect

🕵️ Most agents miss this step - you caught it!

This is probably why the widget isn't working.

💬 What to tell your User:

I found the issue! Your campaign needs to be published before the widget can work. Let's get that published and see if your widget starts working properly. 😊

📝 Steps to share:

1. Go to your campaign in your dashboard. On the top right corner, click the blue button that says Publish.
2. The Unpublished label should disappear
3. Try your widget again!

🎯 You're doing great! This is exactly the right approach!

📝 Code Collection

🕵️ Time for some detective work! There are two pieces of code for each widget: the library code and the widget code. We need to confirm that both pieces of code are installed on the user's website.

🚗 Think of widgets like a car - you need both the ENGINE (library code) and the STEERING WHEEL (widget code) to get anywhere. Lots of people install one but forget the other!

🚨 Sometimes, the Givebutter dashboard says the library is installed when it's actually not. Only check the button below if you have manually confirmed the library code is present on the user's website.

I already confirmed they have the library code installed

📚 Step 4: Library Code Detection

First, let's check if they installed their library code.

What's the website URL where the widget should appear?

Make sure this is the exact page URL they want the widget on, not just their home page.

🕵🏽‍♂️ Library Code Inspection

Time to check if the library code is actually installed on their website.

🔍 How to check:

1. Go to

2. Right-click anywhere on the page and select "Inspect" or "Inspect Element" (or press F12)

3. Select the Elements tab.

4. Press Ctrl+F (or Cmd+F on Mac) to open the search box

5. Search for: latest.umd.cjs

❗️ Remember - even if the Givebutter dashboard says the library is installed, that might not be true! This manual check is the only way to be sure.

Does anything highlight in yellow or show up in the search results?

Leave their webpage and that search box open; we might need it again in a minute.

📝 Library Code Installation

Aha! The library code is missing. Let's get that fixed!

💬 What to tell your User:

I double-checked your website, and I see the library code isn't installed yet. Let's get that taken care of. I'd be happy to walk you through step-by-step right now, or I can send you the instructions for that part. What would you like to do?

💛 Installing code can feel overwhelming, so it's helpful to check in before sending a help article. When someone reaches out, they're often looking for emotional support—not just instructions. Offering them a choice shows we're here to help in whatever way feels best for them.

Great, we'll walk them through installing the library code together.

You'll need to find the user's library code for the next step. Follow these instructions to get their specific code.

📝 Steps for you:

1. Go to their campaign in their Givebutter dashboard

2. Click on the Sharing tab

3. Click Widgets

4. Click the blue text that says Installation

5. Choose [Platform Name]

6. Copy the library code

📋 Paste their library code here:

Great, we'll walk them through installing the library code together.

You'll need to find the user's Givebutter Account ID for the next step. This is not the same account ID found in their URL or in Forest. The only place to find it is by following these instructions.

📝 Steps for you:

1. Go to their campaign in their Givebutter dashboard

2. Click on the Sharing tab

3. Click Widgets

4. Click the blue text that says Installation

5. Choose WordPress

6. Copy the long string of letters and numbers in the Account ID box

📋 Paste their Account ID here:

💬 What to tell your User:

To install the library on your Squarespace website, please follow these steps:

1. Click on the Website heading in your Squarespace account.
2. Scroll down, and under the Utilities heading, click Website Tools.
3. Click Code Injection.
4. Under the Header section, paste the library code below, and save.

[Library code will appear here]

💬 What to tell your User:

To install the library on your GoDaddy website, please follow these steps:

1. Log in to your GoDaddy account.
2. Scroll to Websites + Marketing and select Manage next to your website to open your site.
3. Select Edit Website or Edit Site to open your website builder.
4. Go to the page and location you want to add your custom code, and add a section.
5. Search for HTML section and select Add. Paste the code below in the Custom Code field.

[Library code will appear here]

💬 What to tell your User:

To install the library on your Weebly website, please follow these steps:

1. Log in to your Weebly account.
2. Navigate to Settings → SEO → Header code.
3. Copy and paste the code below in the Header Type text field.

[Library code will appear here]

🔧 Platform Installation Instructions

Here are the step-by-step instructions for their specific platform.

💬 What to tell your User:

📝 Library Code to Install:

🤔 Widget still not working

Here are some rarer situations that you should check before creating a linear ticket.

🔍 What to check:

1. Is their newest version of the website published?
Sometimes users make changes but forget to publish/save their updates. Have them republish or save their website to make sure all changes are live.

2. Are they looking at their published page or are they still in the web builder?
Some web builders don't show a visual of the widget, so it may appear broken. Always check the actual website to confirm.

3. If you helped them install the library or widget code, did they actually do it?
Double-check their website again manually. People sometimes say "yes, I did it" but haven't actually completed the installation.

4. Did they accidentally install multiple instances of their library or widget code?
Be careful on this step, because multiple DIFFERENT widget codes are fine - a goal bar and a button, for example. If they have doubles of the SAME code, have them remove the duplicates.

After checking these items, did any of them solve the issue?

📋 Time to submit a linear ticket

You've completed all the basic troubleshooting steps. Since the widget still isn't working, it's time to submit a linear ticket.

📝 Steps for you:

1. Create a linear ticket.

2. Copy your progress tracker notes using the copy button below.

3. Paste the progress tracker notes into your linear.

💬 What to tell your User:

I need to escalate this to our advanced team for further investigation. This may take some time, so I'll keep you updated via email. Is there anything else I can help with for now?

🎉 Fantastic! Widget Issue Resolved!

You successfully diagnosed and solved the widget issue!
You're officially a Widget Wizard!

📝 Step 5: Widget Code Detection

Time to find their specific Button Widget code and check if it's installed correctly. More than one widget can be installed on a website. For now, we'll troubleshoot the specific widget they asked about. You can follow these instructions for any additional widgets that might be causing them trouble.

📝 Steps for you:

1. Go to their campaign in their Givebutter dashboard

2. Click on the Sharing tab

3. Click Widgets

4. Find their Button Widget and click the Embed button.

5. Copy the entire widget code block

📋 Paste their Button Widget code here:

I already confirmed they have the widget code installed

📝 Step 5: Widget Code Detection

📝 Steps for you:

1. Go to their campaign in their Givebutter dashboard

2. Click on the Sharing tab

3. Click Widgets

4. Find their Button Widget and click the Embed button.

5. Copy the entire widget code block and paste in the first box below.

6. Also copy the shortcode. Paste that in the second box below.

📋 Paste their Button Widget code here:

📋 Paste their shortcode here:

I already confirmed they have the widget code installed

🌐 Website address

What's the website URL where their Button Widget should appear?

Make sure this is the exact page URL they want the widget on, not just their home page.

🕵🏽‍♂️ Widget Code Inspection

Let's check if their Button Widget code is correctly installed on their website.

🔍 How to check:

1. Go to

2. Right-click anywhere on the page and select "Inspect" or "Inspect Element" (or press F12)

3. Select the Elements tab.

4. Press Ctrl+F (or Cmd+F on Mac) to open the search box

5. Search for: givebutter-widget id="abc123"

6. If you don't find anything with their full widget code, search for their shortcode instead: [givebutter id="abc123"]

Does anything highlight in yellow or show up in the search results?

📝 Button Widget Installation

Aha! The Button Widget code is missing. Let's get that fixed!

💬 What to tell your User:

I took a look at your site and noticed the widget code still needs to be added. We can take care of that now—I'm happy to guide you through it step-by-step, or I can share the setup instructions for you to follow on your own. What works best for you?

😊 Installing code can be intimidating, so check in first. People often need reassurance as much as instructions. Offering options shows we're here for them either way.

🔧 WordPress - Button Widget Installation

💬 What to tell your User:

To install your Button Widget on your WordPress website, please follow these steps:

1. In the WordPress dashboard, select Pages from the left-hand navigation menu.
2. Select the page you'd like to embed the widget on.
3. Once in the editor, click the + button to add a new block. Select Custom HTML. You may need to search for this block.
4. Copy and paste the below code into the HTML block and click Update.

<givebutter-widget id="abc123"></givebutter-widget>

5. Alternatively, you can utilize the shortcode below to embed the widget.

[givebutter id="abc123"]

Did this solve the issue?

🎨 Squarespace - Button Widget Installation

💬 What to tell your User:

To install your Button Widget on your Squarespace website, please follow these steps:

1. Select Pages from the main dashboard and navigate to the specific page where you want to add the widget.
2. Click the + Add icon to add a new block and select Code from the menu. Copy the code below for your created widget and paste it into the code block and save.

<givebutter-widget id="abc123"></givebutter-widget>

Did this solve the issue?

🌐 GoDaddy - Button Widget Installation

💬 What to tell your User:

To install your Button Widget on your GoDaddy website, please follow these steps:

1. Click on the HTML section where you've inserted the library code, and paste your widget's code immediately below it.

<givebutter-widget id="abc123"></givebutter-widget>

Did this solve the issue?

🏗️ Weebly - Button Widget Installation

💬 What to tell your User:

To install your Button Widget on your Weebly website, please follow these steps:

1. On the left sidebar, find the Embed Code element under the Basic section. Click on it, drag it to where you want your widget to appear.
2. Click on Click to set custom HTML, paste your widget's HTML code into the provided space and save.

<givebutter-widget id="abc123"></givebutter-widget>

Did this solve the issue?

Button Widget Installation

💬 What to tell your User:

To install your Button Widget on your Wix website, please follow these steps:

1. Log into your Wix account, and click on the site you'd like to edit in your Wix dashboard. Click Edit Site to open your site editor.
2. Click the large blue plus sign located in the site editor.
3. Under the Add to site menu, click Embed Code, and then select Custom element.
4. 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.
5. Click Choose Source.
6. Under Server URL, add your library code:

https://widgets.givebutter.com/latest.umd.cjs

7. Under Tag name, add givebutter-widget.
8. Next, click Set Attributes to complete the embed. Under Attribute name, add id. Under Value, add this widget ID:

abc123

9. Save your changes, and hit Publish!

Did this solve the issue?

🔧 [PLATFORM NAME] - Button Widget Installation

💬 What to tell your User:

It looks like your widget code isn't installed on your website. Here are instructions from [PLATFORM NAME] on how to do that. Check out these steps and let me know if there's anything else you'd like to go over. 😊

https://example.com/instructions

This is the widget code you need:

<givebutter-widget id="abc123"></givebutter-widget>

Did this solve the issue?

📝 Code Collection

🚨 Wix is different from other webbuilder installations. They have users install the library code and a unique widget ID at the same time.

First, we need to collect both their library code and their widget ID#.

📝 Steps for you:

1. Go to their campaign in their Givebutter dashboard

2. Click on the Sharing tab

3. Click Widgets

4. Click the blue text that says Installation

5. Choose Wix

6. Close the install page and click on the Embed button of the widget they want to install

7. Copy the library code

8. Copy the widget ID

📋 Paste their library code here:

📋 Paste their widget ID here:

🕵🏽‍♂️ Library Code and Widget Code Inspection

Time to check if both codes are actually installed on their website.

🔍 How to check:

1. Go to

2. Right-click anywhere on the page and select "Inspect" or "Inspect Element" (or press F12)

3. Select the Elements tab.

4. Press Ctrl+F (or Cmd+F on Mac) to open the search box

5. Search for: latest.umd.cjs

6. Now search for their widget ID: abc123

Does anything highlight in yellow or show up in the search results for BOTH searches?