Donations, simplified: Introduction to Embeddable Forms for Quick Action

Help Center - Legacy User Interface

Click here to access the Help Center new user interface article

Prerequisites

Important:

• In order to begin using the CharityEngine embeddable quick action forms, your organization will need to install the CharityEngine Public API key and include the following code on your website:

<script src="https://webapi.charityengine.net/api.js" async="" defer="defer"></script>

• For more details please review installing the CharityEngine Public Api on your website.
• NOTE: You do not need to include the web API if you are using CharityEngine apps like our CMS, Peer-to-Peer fundraising, Advocacy Action pages or other fundraising and engagement apps.
• Please ensure you have an experienced developer to assist and troubleshoot your web site. CharityEngine will not be able to assist with web site development. While the steps will render a basic view, this is an intentional design to allow a developer to type, render for your organization's marketing guidelines. Code is available for rendering by your developer.

Basic Example - Demo:

To see a basic demonstration of available widget construct, please visit: CharityEngine Foundation

• Developers can leverage the widgets for deeper customization needs.
  
  

Instructions - Developer: API - Installing the CharityEngine Public Web API

Please install the CharityEngine Public Web API before proceeding with quick action form embedding activities.

See more with our Help Center Article: Developer: API - Installing the CharityEngine Public Web API

Instructions - Donation Quick Action Form

Once you have the Public API installed on your site, you are ready to start using the embedded donation form.  There are two ways to embed the form using HTML or Javascript.

Step 1: Navigate to the Online App > Embeddable Widgets > Search & Manage > Create New > Donation Form 

Step 2: From the General tab, update the widget Name

Step 3: From the Design tab, update:

1. Headline
2. Top Content
3. Top Image
4. Button Background Color
5. Button Text Color
6. If leveraging Javascript, expand Configure Javascript for additional option
   1. Toggle on to Show Top Content
   2. Adjust default frequency
   3. Toggle on to Allow Split Funds
   4. Select one or more funds
      Note: As changes are made from these options, the code under Embed Using HTML/Embed Using JavaScript will update.

Step 4: From the Emails tab, select appropriate acknowledgement and/or receipt templates as well as carbon copy needs for internal notifications

Step 5: From the Payment Gateway tab, select appropriate payment gateway to process transactions

Step 6: Click SAVE to secure your changes.

Step 7: Click Copy from either the "Embed Using HTML" or "Embed Using JavaScript" via the Design tab

Step 8: Add to your organization's web site

Important Note: If using HTML, please also: CE_API.SetApiKey("organziationskey"). This is the first line of the JavaScript script for reference as well.

Click here to read more about HTML configuration

Import Note: If using JavaScript, unlike the HTML method, using the CharityEngine JavaScript API only requires a few lines of JavaScript to load your Quick Action Form to your organization's web site. Then you can control the display and other configurations of the forms using our API.

Note: The CE API Key should be added to the header that wraps the script. While the <script> should be added to the body of the script. If using a platform such as WordPress, CharityEngine recommends adding as much scripting to the template area and the rendering components themselves.

Click here to read more about JavaScript configuration

Instructions - Sign Up Quick Action Form (for Communication/Opt In Lists)

Once you have the Public API installed on your site, you are ready to start using the embedded list opt-in form. (See Prerequisite above for more details)

Step 1: Navigate to the Online App > Embeddable Widgets > Create New > List Opt-In

Step 2: Select

1. Opt-In Lists: select one or more for donors to opt into
2. Selection Type: Auto or checkboxes
3. Default Initiative: Select an initiative 
4. Response Channel: Select a preferred response channel

Step 3: Select Copy under step 2 to copy the code presented in the box and paste to install this widget on your organization's website. 

Step 4: Users can now easily enter information for list opt in. 

Below is an example which includes a general sign up as well as the option for a multiple list sign up:

Legislator Look-up Feature

Once you have the Public API installed on your site, you are ready to start using the embedded legislator look-up. (See Prerequisite above for more details)

Add the following script to your site:

<div class="ce-legislatorLookUpWidget"></div>

Below is an example of a simple display:

FAQs & Additional Reading

Q. Is there any additional troubleshooting for API and web site issues?
A. If you are experiencing any unexpected behavior after following the directions above, first, verify the web API setup domain and the web api URL are aligned. In addition, ensure the domain matches entry into CharityEngine and the Form ID is correct in the API call. Finally, inspect your website code, ensure that you are returning a successful page load first and then an initialization - demonstrating connection with the API. If these are successful then the troubleshooting will likely be associated with the web domain/3rd party host. You may experience issues with security parameters with your 3rd party host. You can also visit our troubleshooting guide.

Q. I would like to have the widget 'pop-up' for my users. Can this be achieved?
A. Yes - this can be achieved with the HTML coding only. Leverage the HTML coding and ensure you have also included the key in your scripting: ce-api-key="OrganizationNameAPI"

Q. Can I include a widget in a button?
A. Yes - a developer can integrate into a button for user to click to initiate the form itself.

• Sustainers: How to Create and Manage Recurring Donors (Legacy)
• Web Forms: Using the WYSIWYG Editor for Forms and Emails
• Shopping Cart: How to Configure the Checkout Subtab
• Shopping Cart: How To Create a Shopping Cart to Sell a T-shirt
• Shopping Cart: Custom Fields and Variants for Products
• Shopping Cart: Configuring Product Inventory
• Shopping Cart: How To Create Products
• Web Forms: How to Design Your Web Form
• Web Forms: How to Manage Fields (Legacy)
• Why and How to Use "Donor Covers Processing Fee" as a Fundraising Tool for Online Donation Forms
• Advanced Web Forms: How to use CharityEngine Tokens to Customize Your Form templates
• Web Forms: Character Limit on Text Fields
• Web Forms: How to Manage Out-of-the-Box Donation Block
• Events: How to add Custom questions/Survey Questions to Event Forms
• Web Forms: How to Test Web Forms
• Web2CRM User Guide
• Web Forms: Creating and Mapping Custom Field on a Form
• Web Forms: How to Add an Email Opt-In List
• Web Forms: How to Change the URL Suffix
• Web Forms: How To Configure the Form Field Display
• Online: User Center Front End
• Online
• Web Forms: How to Add an E-Card to a Form
• Adding Global Javascript Code
• Promo Codes & Discounts
• Landing Page URL
• Pledge: How to Create and Manage Pledges - A Comprehensive Guide
• Web Forms: How To Customize Out of the Box Sections and Fields
• Web Froms: How to Create an Internal Form (for a Telethon, Radiothon, or Conference) (Legacy)
• Campaign - Surveys: How to Create a Poll & Survey Form and How to View the Results
• Web Forms: How to Create a List Sign Up Form (Contact Type Web Forms)
• Web Forms: Defining CharityEngine Web Form Types
• Online: User Center Configuration (Legacy)
• Creating an Event with Free Tickets
• Peer to Peer: Comprehensive Guide for Set Up, Configuration, and Reporting
• Online: Widgets - Embedding Donation, Sign-Up, and Legislature Look-up Forms (Legacy)
• Embedding Quick Action Donation Forms with HTML
• Embedding Quick Action Donation Forms with Javascript
• Web Forms: How to Assign Tags through Form Submission
• Web Forms: How to Hide Tickets on an Event Form
• How to Bypass Payment Information on a Free Event
• Developer: API - Public API Troubleshooting
• Events: How to Create a Survey for Your Event
• Allowing Organizations to Donate on Web Forms
• How to Add Multiple Funds to a Web Form (Legacy)
• Data Import: How to Import Soft Credits
• Browser Security Changes & Iframeing CharityEngine Donation Forms & Online Fundraising Apps
• Events: Creating a Standard Out of the Box Web Form (Legacy)
• Web Forms: How to add CAPTCHA to your form
• Contacts: Comprehensive Guide for Usage and Management of Tributes
• Online - Web Forms: Wallet Payment Options (Apple Pay and Google Pay)
• Web Forms: Guide on Replicating Forms
• Web Forms: How to Create an SMS Opt-In Form for SMS Campaigns
• Web Forms: Preventing Fraudulent Activities with Security Settings & Features
• Creating a New CMS Website
• In-Kind Gifts: How to Create and Manage In-Kind Gifts - A Comprehensive Guide
• Web Forms: Advanced Web Form Design Elements
• Web Forms: Creating a Donation Form (or other Web Form) - What’s Standard/Out of the Box?
• Transactions: Preparing & Sending Year End Statements
• Online: Online Constituent Portal Configuration
• Online: User Center Front End
• Events: Creating a Standard Out of the Box Web Form
• Developer: API - Installing the CharityEngine Public Web API
• Web Forms: Using Email Auto Responders with Forms
• Web Forms: How to Manage Fields
• Contacts: How to Create, Use and Manage Cases
• How to Configuring URL Redirects
• Web Froms: How to Create an Internal Form (for a Telethon, Radiothon, or Conference)
• How to Add Multiple Funds to a Web Form
• Adding "Double the Donation" to a Form
• Reordering Form Fields