---
title: Embeddable Forms & Buttons
description: Learn how to embed and create link embedded buttons for your ActBlue contribution forms.
---

[Skip to content](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#main-content)

English - United States

Show submenu for translations

![ActBlue](https://help.actblue.com/hubfs/1-B-AB-HorizontalLockupLogo-FullColor-RGB.svg)

Open main navigation

Close main navigation

- English - United States
  
  Show submenu for translations
- [Contact us](https://help.actblue.com/hc/en-us/requests/new)

[Contact us](https://help.actblue.com/hc/en-us/requests/new)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [ActBlue Support Documentation](https://help.actblue.com/hc/en-us)
2. [Core ActBlue](https://help.actblue.com/hc/en-us/core-actblue)
3. [Working with Core Contribution Forms](https://help.actblue.com/hc/en-us/core-actblue#working-with-core-contribution-forms)

# Embeddable Forms & Buttons

**Disclaimer:** [ActBlue user roles and permissions](https://help.actblue.com/hc/en-us/articles/16870076456599-how-do-i-enable-specific-user-roles-and-permissions)dictate what users can do on our platform. If the tools or features mentioned in this article are unavailable to you, please speak to your Dashboard Admin(s) about updating your permissions. 

### **In this article:**

- [What are embeddable forms and buttons?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#what-are)
- [What account types are embeddable forms and buttons available for?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#who-can-use)
- [What are my embed options?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#types_of_embeds)
- [How do I create an embed form or button?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#create_form_or_button)
- [How do I customize an embed form or button?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#customize)
- [How do I embed a form or button into my website's code?](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#embed_website)
- [Using the WordPress plugin for embeddable forms and buttons](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#embed_wordpress)
- [Backup form settings](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#backup_form)
- [Evaluating embeds](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#evaluating_embeds)
- [Embedding a goal tracker](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#goal_tracker)
- [Advanced](https://help.actblue.com/hc/en-us/articles/16870074582679-embeddable-forms-buttons#advanced)

---

### **What are embeddable forms and buttons?**

Embeddable forms and buttons are donation features you can add directly to your webpage, so supporters don't need to leave your site to donate. Embeddable forms allow ActBlue Express users with saved information to donate via a prefilled embed on your site in seconds. 

All three steps of the donation flow — **contribution amount, payment information, and donor details** — occur within your embeddable form or buttons. Donors can also give via PayPal™ in an embed, just like regular contribution forms, but embeds cannot currently accept Apple Pay. 

Because embeddable forms and buttons live on your website, some customization options **aren't available**, including titles, donation asks, goal thermometers, or brandings. Donation amounts, Spanish language forms, and most other customization options within the form editor are available for embeds. 

To use embeddable forms and buttons, you just need a way to edit your webpage's source code. [If your website is on WordPress, use our plugin to make it even easier.](https://help.actblue.com/hc/en-us/articles/16870090647063-wordpress-plugin-for-nonprofits-using-embeddable-forms-and-buttons)

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed1.png)

---

### **What account types are embeddable forms and buttons available for?**

Embeddable forms and buttons are only available for Federal campaigns, Federal PACs, 501(c)(3) and 501(c)(4) nonprofit organizations.

---

 

### **What are my embed options?**

### Embeddable forms

Embeddable forms are contribution forms that are inserted directly into your webpage. The entire donation process, whether multistep for new donors or single-click for ActBlue Express donors, takes place within the form on your site. The image below depicts an embeddable form on a website from the viewpoint of an ActBlue Express donor.

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate1.png)

 

### Embeddable buttons

Embeddable buttons are donate buttons you can insert into your webpage that launch a pop-up modal where a donor finishes the donation process. They are a great option when your webpage has limited space, like in a navigation bar, menu, or hero area.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed3.png)

 

The pop-up looks like this:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate2.png)

 

If a donor has an ActBlue Express account, the pop-up will already have their payment information in the fields.

---

### How do I create an embeddable form or button?

Click "Create form" in your Dashboard and select "Embed form." Fill in the basic information for your form.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Wizard_Step3_Update6.png)

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed_WizUpdate_3.png)

 

Click “Next step” to enter more details for this form, or click “Publish now” to enter the form editor. From there, navigate to the “Embed Generator” tab to create your form or buttons and copy the code for your website.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedSmartBoost1.png)

 

Enter any URLs where you want to embed a form or buttons in the “Allowed URLs” field, separating each URL with a comma. You can only host embeds in the URLs listed here, and the URLs must be secure (start with https).

After entering your URLs, click “Publish” to save your work and continue creating your embeddable form or button.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed8.png)

 

After publishing, more options will appear under “Step 2:”. Under “Type of Embed,” select either form or button.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed9.png)

 

A preview of your form or buttons will always be visible on the right side of your screen. Click "Publish" to preview the most up-to-date version of your form or buttons.

---

### How do I customize an embed form or button?

### Embeddable forms

If you choose “Form,” you will see an unchecked “fixed height” box. By default, the embeddable form height is dynamic, so donors can see the entire form on your website (the form will not have an internal scroll). To set your own form height (which may create internal scrolling), check the "Fixed height" box and change the number in the "Height" field.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate3.png)

 

You can also create [refcodes](https://actblueplatform.com/support/refcodes) for your embeddable form, allowing you to collect data about where your donations come from. Once you enter your custom refcode, we will include it in the code used to embed the form on your webpage.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed11.png)

To select the donation amounts on your form, return to the main menu of the form editor and select the “Preset donation amounts” tab. There is always an “Other amount” option.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed12.png)![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed13.png)

Publish your changes to save them.

---

### Embeddable buttons

If you choose “Button,” you can customize your buttons in the “Embed Generator” tab.

To ask supporters for recurring donations, choose a recurring ask in the “Recurring” dropdown menu. The default recurring setting for embeddable buttons is “Donor Decides,” which gives donors the option between a one-time or recurring contribution:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate4.png)

 

If you select “Recurring,” embeddable buttons will only accept recurring donations, and no one-time donation options appear in the pop-up. The donor will have already chosen to give a recurring contribution by clicking the button, so there is no recurring upsell after they donate. Embeddable buttons make it clear to the donor that they're making a recurring donation:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate5.png)

 

If you select “One-Time” from the “Recurring” dropdown menu, your embeddable buttons will only accept one-time contributions. Donors won't see a recurring option in the pop-up. They also won't see an additional recurring upsell after donating, even if you enable the upsell in the “Recurring settings” tab of the form editor.

Set specific amounts for your embeddable buttons in the “Preset amounts” field, separating each amount with a comma. To include an “Other amount” option, check the box below the “Preset amounts” field.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate6.png)

 

You can leave the buttons with just the amounts or add a verb like “donate" by entering it in the “Button verb” field.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed15.png)

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed16.png)

 

Click the "Color" and "Font Color" dropdown menus to customize these elements of your buttons. 

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed17.png)

 

You can paste the hex code for your brand's colors or use the color picker to select a color.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed18.png)

 

You can also change your font size and weight.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed19.png)

 

Edit the “Border Radius” field to adjust how round your buttons are.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed20.png)

 

By clicking “[Advanced](https://actblueplatform.com/support/embeddable-forms-buttons#advanced),” you can use custom CSS to change how your buttons look. 

Finally, you can create custom refcodes for your embeddable buttons just like you can for embeddable forms.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed21.png)

 

---

### Code add-ons

The Embed Generator can also include code to integrate with other popular platforms. For example, you can add "Facebook Conversion Tracking" if you have a Facebook pixel on the page with your embed.

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/fbconversiontracking.png)

 

Use "Google Conversion Tracking" if you track Google Ads conversions to the page with your embed.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedGoogleAddOn.png)

 

---

### Other embed settings

Once you’re happy with how your buttons or form look, you have a few other options that you can apply to your embed. Exit the “Embed Generator” tab to return to your form editor.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedSmartBoost2.png)

 

In the **“Form customization” tab**, you can change the provided text on your form or your button’s pop-up modal to Spanish. Doing so translates most form elements:

- Form buttons
- Donation block helper text
- Donor information fields
- Recurring options
- Recurring or Smart Boost upsell text
- Standard contribution rules
- ActBlue or AB Charities disclaimers

However, translation doesn't apply to any verbs you add to embeddable buttons because they are user-generated text. 

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate7.png)

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate8.png)

 

Add a [custom input](https://help.actblue.com/hc/en-us/articles/16870059914519-custom-inputs) — a field you can customize to collect additional information from your supporters. You can apply this to your embeddable form or embeddable button's pop-up modal. 

You can customize your recurring settings in the “Recurring settings” tab. 

If you are creating an embeddable form or embeddable buttons with the “Donor Decides” option selected in the “Embed Generator” tab, read on to learn about your customization options in the “Recurring settings” tab of the editor. 

If you select “One-Time” or “Recurring” in the menu in the "Embed Generator" tab, upsell customizations made in the "Recurring settings" will not apply. 

In the “Recurring settings” tab’s “Monthly recurring donations” dropdown menu, you can change your recurring ask and recurring upsell:

- **Disabled:** no recurring option in the embeddable object or recurring upsell
- **Specified duration:** donors will see a recurring option on your embeddable object. If they make a one-time contribution, they will see a recurring upsell after donating. Your form will prompt them to customize how long their contribution will recur.
- **Unlimited:** donors will see a recurring option in the embeddable object, and if they choose to make a one-time contribution, they will see a recurring upsell after donating. There is no duration option, so their contribution will recur until they cancel it or change the schedule in their ActBlue Express account.
- **Unlimited + Smart Options:** your donors will see a recurring option in the embeddable object. If they make a one-time contribution, they will see a recurring upsell after donating, suggesting multiple smaller recurring amounts. They will also have the option to set their own amount.

If you select “Smart Boost” in the “Post-donation upsells” tab, donors won't see a recurring upsell, even if you enable one of the options above. 

In the “Pop-up recurring ask threshold” box in the “Recurring settings” tab, you can create a donation threshold for who should get a recurring upsell if you are using the “Specified duration” or “Unlimited” setting. Supporters who give a one-time donation smaller than the amount you enter in this field will see a recurring upsell asking them to make a monthly donation of the same amount they just gave as a one-time donation. If you want any of your donors to see a recurring upsell, you must enter an amount in the “Pop-up recurring ask threshold” box. 

Click “Publish” to preview what the recurring ask will look like on your embeddable form or embeddable button’s pop-up modal.

You can also manage other recurring settings in this tab. 

If you select “Recurring pitch” in the “Promote recurring donations” dropdown menu, you can write a custom recurring pitch to highlight the recurring option.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/EmbedUpdate9.png)

 

In the **“Thanks and receipt” tab**, you can write the text for the top of donors’ email receipts.

In the **“Post-donation upsells” tab,** you can select the upsell you want donors to see after they give an initial contribution. If you select “Recurring,” customize these settings in the “Recurring settings” tab (if you’re creating embeddable buttons, in the “Embed Generator” tab). 

If you select “Smart Boost,” an upsell will give donors multiple options to increase their initial donation. You can customize the Smart Boost upsell title and ask in the “Post-donation upsells” tab.

Donors will still see the Smart Boost upsell if they make a recurring donation through your embeddable form or buttons. However, Smart Boost will not add to the recurring contribution amount, only the initial contribution. So, if they donate a recurring amount of $5 and then choose to increase their donation by $1 in the Smart Boost upsell, their first charge will be $6. But their future recurrences will be $5.

Publish any changes you make in the form editor. 

---

### **How do I embed a form or button into my website's code?**

Return to the “Embed Generator” tab to generate the code to embed a form or buttons in your webpage.

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed25.png)

 

At the bottom of the tab, click “Generate Embed.”

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed26.png)

 

The pop-up will have the code you need to paste into your webpage's source code (HTML) – insert it wherever you want your embeddable buttons or form to appear. Our engineers also included information in this pop-up if you’re new to editing HTML.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/copyembeddablebuttoncode.png)

 

You can include multiple embeddable buttons and forms in a single webpage.

You only need to include the `<script>` tab in the `<head>` once per page and then copy and paste the different `<div>` tags where you want your embeds to display. 

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/editedcopyembeddablebuttoncode.png)

---

### **Using the WordPress plugin for embeddable forms and buttons**

If your website is on WordPress, you can embed your contribution form or buttons in a few clicks. Just download our “ActBlue Contributions” plugin in the WordPress plugin directory and search for the “ActBlue Embed” or “ActBlue Buttons” blocks in the WordPress editor.

---

### **Backup form settings**

The rest of the form editor, which you can find under “Backup Form Settings,” does not apply to your embeddable form or buttons. These settings apply to your backup form, a regular contribution form that your donors will land on if something prevents your embed from working.

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed29.png)

 

There are limited customizations available for backup forms. Customizing the title and donation ask on your backup form is essential so donors know they are still giving to you even if the embed does not work and they leave your site. Write these in the “Title, ask, and URL” tab.

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed30.png)

 

Backup forms do not support multiple recipients (Tandem Fundraising) or tracking.

---

### **Evaluating embeds**

To see how your embed is doing, go to the “Contribution Forms” tab of your Dashboard. You can filter the list by “Embed” to find your form more quickly:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/Embed31.png)

 

Select the Contributions or Amount total for your backup form to view its Statistics page, or go straight there by selecting the “Stats” button in the form navigation bar:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/stats+button.png)

 

You can also set up email alerts for contributions or refunds for embeddable forms and buttons in the “More” dropdown of the navigation bar. Data will also appear in the rest of your Dashboard data.

---

### **Embedding a goal tracker**

Click [here](https://help.actblue.com/hc/en-us/articles/16870106057111-goal-tracker) to read more about embedding a goal tracker on your website or email.

---

### **Advanced**

### Tracking embeds

Find Embed statistics like visits and contributions on the Statistics page for that contribution form.

Visit tracking works differently from standard ActBlue contribution form reporting. ActBlue only tracks a visit to an embeddable form if a potential donor interacts with an embedded element. This interaction can occur by clicking an embeddable button or anywhere on an embed form iframe.

Pair this information with your website traffic data for a broader picture of your end-to-end conversion.

You can pass a refcode into the embed through an attribute on the embed div or a URL parameter.

Refcode inheritance:

1. `data-ab-refcode`
2. `abConfigure({refcodes: {refcode: ‘refcode’}});`
3. URL params: 
     1. `ab_refcode`
     2. `refcode`
     3. `ref`

Refcode2 inheritance:

1. `data-ab-refcode2`
2. `abConfigure({refcodes: {refcode: ‘refcode’}});`
3. URL params: 
     1. `ab_refcode2`
     2. `refcode2`

In order to track events, just add a function to your `actBlueConfig` object:

### onContribute

Called with `contribution` that includes:

- amount: the amount, in cents, that was donated
- email: the email of the donor
- name: the name of the form (the slug that appears in the URL)
- order\_number: the ActBlue contribution order number
- recurring: whether the donor chose recurring
- refcode: the refcode of the contribution

### actblue

`actblue` is a new global object on window that allows you to interact with ActBlue’s embeddable form functions from a host website. Provided by the `actblue.js` script tag.

`actblue.requestContribution:`function that accepts an object with amount in cents and token and will open a modal to ask the user for a `contribution`. It returns a promise that resolves with a contribution if the user completes the contribution. The promise will reject if the user closes the modal without making a contribution.

For example:

`actblue.requestContribution({amount: 1000, token: ‘abc123’});`

You can look up a token from the “Generate Embed” button in the “Embed Generator”:

 

![](https://help.actblue.com/hubfs/Knowledge%20Base%20Import/copyembeddaleformcode.png)

### abConfigure(configuration)

Configure all embeds on the page, with new refcodes, a different language, and more. See the reference for all options.

#### API Reference

**`<div data-ab-button />` parameters:**

`data-ab-token`: the token for the embed, retrieved from the generate embed modal

`data-ab-amounts/data-ab-amount`: comma separated amounts in dollars for the button(s)

`data-ab-id`: unique string that can be used to uniquely identify origin embeds in events

`data-ab-locale`: current locale for the embed, overriding configured locale. \`en\` and \`es\` are supported.

`data-ab-preview`: true/false, preview mode for the embed, will disable contributions from going to ActBlue servers for development purposes

`data-ab-recurring`: true/false, will require contributions to be recurring or one-off, leave off to allow the donor to decide

`data-ab-style`: inline css string that will be applied to buttons

`data-ab-stylesheet-href`: url to stylesheet that will be injected into the iframe, all inline styles will be disabled

`data-ab-verb`: string to be included before the amount, such as ‘Donate’ or ‘Give’

`data-ab-donor-email`: prepopulate the donor’s email

`data-ab-donor-firstname`: prepopulate the donor’s firstname

`data-ab-donor-lastname`: prepopulate the donor’s lastname

`data-ab-donor-phone:`prepopulate the donor’s phone number

`data-ab-donor-zip`: prepopulate the donor’s zip code

**`<div data-ab-form />` parameters:**

`data-ab-token`: the token for the embed, retrieved from the generate embed modal

`data-ab-amount`: pre-selected amount in cents for the embed, can be combined with data-ab-amounts and data-ab-other-amount=”false” to enforce an embed which only accepts a specific amount

`data-ab-amounts`: comma separated list of suggested amounts in cents

`data-ab-other-amount`: true/false, false will disable donors from entering a custom amount

`data-ab-id`: unique string that can be used to uniquely identify origin embeds in events

`data-ab-locale`: current locale for the embed, overriding configured locale. \`en\` and \`es\` are supported.

`data-ab-preview`: true/false, preview mode for the embed, will disable contributions from going to ActBlue servers for development purposes

`data-ab-height`: pixel amount (ex: “600px”) or “auto” to allow the embed to resize itself to it’s contents. Omitting will have the embed grow to the height of it’s containing div.

`data-ab-stylesheet-href`: url to stylesheet that will be injected in the frame

`data-ab-donor-email`: prepopulate the donor’s email

`data-ab-donor-firstname`: prepopulate the donor’s firstname

`data-ab-donor-lastname`: prepopulate the donor’s lastname

`data-ab-donor-phone`: prepopulate the donor’s phone number

`data-ab-donor-zip`: prepopulate the donor’s zip code

`window.actblue`:

`actblue.requestContribution`: ({

      `amount`: number, // preselected amount in cents

      `amounts`: number\[\], // array of amounts in cents to suggest to the donor

      `donor: { firstname: string, lastname: string, email: string, phone: string, zip: string }`, // information about the donor to prepopulate

      `embedId`: string, // unique string that can be used to uniquely identify origin embeds in events

      `locale`: ‘en’ | ‘es’, //locale to present the embed form in

      `onClose`: (contribution: Contribution) =\> {}, // function to be called when the modal from this contribution is closed

      `onComplete`: (contribution: Contribution) =\> {}, // function to be called when the donor reaches the thanks screen, after all upsells

      `onContribute`: (contribution: Contribution) =\> {}, // function to be called at the moment the donor submits a contribution (before upsells), useful for conversion tracking, etc

      `onError`: (message: string) =\> {}, // function to be called on any fatal system errors, like the embed token not being found on ActBlue servers

      `onLanded`: () =\> {}, // function to be called when the donor ‘lands’ on the form, i.e. the modal has opened and the form is loaded and ready for interaction. 

      `preview`: boolean, // preview mode for the embed, will disable contributions from going to ActBlue servers for development purposes

      `refcodes`: {\[refcode: string\]: string}, // object containing a map of refcodes to their values, note that all refcodes must begin with the string ‘refcode’

      `styleSheetHref`, // url to stylesheet that will be injected in the frame

      `token`, // the token for the embed, retrieved from the generate embed modal

`}) => Promise<Contribution>` // promise is resolved once the user contributes, exact same time as ‘onContribute’. promise is rejected if the donor closes the modal without donating.

`actblue.addEventHandler(‘close’ | ‘complete’ | ‘contribute’ | ‘error’ | ‘landed’, (contribution: Contribution) => {})`

Add an event handler that will trigger on events from any ActBlue embed on the page:

`‘close’`: function to be called when the modal from this contribution is closed

`‘complete’`: to be called when the donor reaches the thanks screen, after all upsells

`‘contribute’`: to be called at the moment the donor submits a contribution (before upsells), useful for conversion tracking, etc

`‘error’`: to be called on any fatal system errors, like the embed token not being found on ActBlue servers

`‘landed’`: to be called when the donor ‘lands’ on the form, either when a modal is opened from an embeddable button or requestContribution when a user interacts

abConfigure(configu`ration)/actblue.configure(configuration)`:

`actblue.configure({`

 `amounts: number[];`// array of amounts in cents to suggest to the donor

  `donorData: {firstname: string, lastname: string, email: stri`ng, phone: string, zip: string}; // information about the donor to prepopulat

`preview: boolean`; // preview mode for the embed, will disable contributions from going to ActBlue servers for development purposes

  `refcodes: { [refcode: string]: string }`; // object containing a map of refcodes to their values, note that all refcodes must begin with the string ‘refcode

  `locale: ‘en’ | ‘es’`, //locale to present embeds in

`styleSheetHref: ‘string’`, // url to stylesheet that will be injected into an embeddable forms

  `onClose: (contribution: Contribution) => {}`, // function to be called when an ActBlue modal is closed

  `onComplete: (contribution: Contribution) => {}`, // function to be called when the donor reaches a thanks screen, after all upsells

  `onContribute: (contribution: Contribution) => {}`, // function to be called at the moment the donor submits a contribution (before upsells), useful for conversion tracking, etc

  `onError: (message: string) => {}`, // function to be called on any fatal system errors, like an embed token not being found on ActBlue servers

  `onLanded: () => {}`, // function to be called when the donor ‘lands’ on the form, i.e. the modal has opened and the form is loaded and ready for interaction. 

`});`

`actblue.remove()`:

Will reset any embed divs back to the backup content, and remove all ActBlue logic from your page.

`Contribution`:

`{`

 `name: string,` // form name

  `recurring: boolean,` // if the contribution will recur

  `embedId: string,` // unique string for the embed that generated this contribution

  `email: string,` // donor’s email address

  `order_number: string,` // ActBlue order number

 `amount:` `number,`// amount in cents

  `preview:` `boolean,`// if the contribution was made in preview mode, i.e. not actually sent to ActBlue’s servers

  `refcode: string,` // the ‘refcode’ refcode

 `refcodes: {[refcode: string]: string}`, // object containing all refcodes, note: all refcode strings will begin with the string ‘refcode’

  \]),

}

#### Note: configuration inheritance

As you can see, you can configure the same things in different places; where there are conflicts, the specificity will work like:

1. data-ab attributes
2. abConfigure() page configuration
3. url params (only refcodes can be configured with url params)
4. ActBlue form configuration

If you have any questions, please [contact our support team](https://help.actblue.com/hc/en-us/requests/new)using the email address you use to access your ActBlue account. 

- [Donors & Grassroots Fundraisers](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#main-content)

    - [Donor Guides](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#donor-guides)
    - [Contributions](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#contributions)
    - [ActBlue Express Accounts](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#actblue-express-accounts)
    - [Raising Money for Campaigns and Organizations](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#raising-money-for-campaigns-and-organizations)
    - [About ActBlue](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#about-actblue)
    - [Other](https://help.actblue.com/hc/en-us/donors-grassroots-fundraisers#other)
- [Core ActBlue](https://help.actblue.com/hc/en-us/core-actblue#main-content)

    - [Getting Started with Your Core Dashboard](https://help.actblue.com/hc/en-us/core-actblue#getting-started-with-your-core-dashboard)
    - [Managing & Granting Access to Your Core Dashboard](https://help.actblue.com/hc/en-us/core-actblue#managing-granting-access-to-your-core-dashboard)
    - [Creating & Managing Core Contribution Forms](https://help.actblue.com/hc/en-us/core-actblue#creating-managing-core-contribution-forms)
    - [Managing Grassroots Fundraising for Core Donors](https://help.actblue.com/hc/en-us/core-actblue#managing-grassroots-fundraising-for-core-donors)
    - [Working with Core Contribution Forms](https://help.actblue.com/hc/en-us/core-actblue#working-with-core-contribution-forms)
    - [Core Contribution Form Features](https://help.actblue.com/hc/en-us/core-actblue#core-contribution-form-features)
    - [Selling Tickets & Merchandise with Core](https://help.actblue.com/hc/en-us/core-actblue#selling-tickets-merchandise-with-core)
    - [Refunding & Managing Core Contributions](https://help.actblue.com/hc/en-us/core-actblue#refunding-managing-core-contributions)
    - [Reporting & Accessing Your Core Fundraising Data](https://help.actblue.com/hc/en-us/core-actblue#reporting-accessing-your-core-fundraising-data)
    - [Signing In & Using 2FA in Core](https://help.actblue.com/hc/en-us/core-actblue#signing-in-using-2fa-in-core)
    - [Managing Your Merchant Account in Core](https://help.actblue.com/hc/en-us/core-actblue#managing-your-merchant-account-in-core)
    - [Activating & Managing Express Lane in Core](https://help.actblue.com/hc/en-us/core-actblue#activating-managing-express-lane-in-core)
    - [Fundraising Strategy in Core](https://help.actblue.com/hc/en-us/core-actblue#fundraising-strategy-in-core)
    - [Integrations & Analytics in Core](https://help.actblue.com/hc/en-us/core-actblue#integrations-analytics-in-core)
    - [Using Call Time in Core](https://help.actblue.com/hc/en-us/core-actblue#using-call-time-in-core)
    - [Other Core FAQ](https://help.actblue.com/hc/en-us/core-actblue#other-core-faq)
- [Raise by ActBlue](https://help.actblue.com/hc/en-us/raise-by-actblue#main-content)

    - [Getting Started with Your Raise Dashboard](https://help.actblue.com/hc/en-us/raise-by-actblue#getting-started-with-your-raise-dashboard)
    - [Managing & Granting Access to Your Raise Dashboard](https://help.actblue.com/hc/en-us/raise-by-actblue#managing-granting-access-to-your-raise-dashboard)
    - [Creating & Managing Raise Fundraising Pages](https://help.actblue.com/hc/en-us/raise-by-actblue#creating-managing-raise-fundraising-pages)
    - [Reporting & Accessing Your Raise Fundraising Data](https://help.actblue.com/hc/en-us/raise-by-actblue#reporting-accessing-your-raise-fundraising-data)
    - [Managing Your Merchant Account in Raise](https://help.actblue.com/hc/en-us/raise-by-actblue#managing-your-merchant-account-in-raise)
    - [Managing Your Conduit Account In Raise](https://help.actblue.com/hc/en-us/raise-by-actblue#managing-your-conduit-account-in-raise)
    - [Raise FAQs](https://help.actblue.com/hc/en-us/raise-by-actblue#raise-faqs)
- [ActBlue Field Tools (formerly Impactive by ActBlue)](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#main-content)

    - [Getting Started](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#getting-started)
    - [Contacts](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#contacts)
    - [Users](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#users)
    - [Data and Integrations](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#data-and-integrations)
    - [Training Volunteers](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#training-volunteers)
    - [Texting (Peer-to-Peer, Broadcast, and Automated)](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#texting-peer-to-peer-broadcast-and-automated)
    - [Phone Banking](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#phone-banking)
    - [Friends and Family Messaging (Relational)](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#friends-and-family-messaging-relational)
    - [Canvassing](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#canvassing)
    - [Voter Registration](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#voter-registration)
    - [Forms](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#forms)
    - [Other Actions (Social Sharing, Open Webpage)](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#other-actions-social-sharing-open-webpage)
    - [Best Practices & Ideas](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#best-practices-ideas)
    - [Billing & Account Management FAQs](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#billing-account-management-faqs)
    - [Frequently Asked Questions](https://help.actblue.com/hc/en-us/actblue-field-tools-formerly-impactive-by-actblue#frequently-asked-questions)
- [ActBlue Website Builder (formerly Hey Victor)](https://help.actblue.com/hc/en-us/actblue-website-builder-formerly-hey-victor)
- [Other FAQs](https://help.actblue.com/hc/en-us/other-faqs#main-content)

    - [Applying for a New Account FAQs](https://help.actblue.com/hc/en-us/other-faqs#applying-for-a-new-account-faqs)
    - [Sign In & 2FA FAQs](https://help.actblue.com/hc/en-us/other-faqs#sign-in-2fa-faqs)
    - [Post-Election FAQs](https://help.actblue.com/hc/en-us/other-faqs#post-election-faqs)
    - [ActBlue FAQs](https://help.actblue.com/hc/en-us/other-faqs#actblue-faqs)

[![1-AB-TaglineLockup-Horizontal-Brand-5.20.25-02](https://help.actblue.com/hs-fs/hubfs/ActBlue%20Logos/1-AB-TaglineLockup-Horizontal-Brand-5.20.25-02.png?width=410&height=40&name=1-AB-TaglineLockup-Horizontal-Brand-5.20.25-02.png "1-AB-TaglineLockup-Horizontal-Brand-5.20.25-02")](https://secure.actblue.com/)

<https://www.facebook.com/ActBlue> <https://twitter.com/actblue> <https://www.instagram.com/actblueorg> <https://www.linkedin.com/company/actblue/>

Copyright © 2025, ActBlue