Learn about our newest features and enhancements!
Embedding Quick Action Donation Forms with HTML

Introduction

There are two attributes you need to add to the body tag of your website to load Quick Action Forms. To see a form embedded using HTML, visit this site (the form configuration is set to auto-show).

  1. ce-api-key

    Enter the CE API key that you have configured in your CharityEngine instance.


    Example:

    <body ce-api-key="MyKey">


    Note:
    You must also add your website domain name(s) to the list of authorized applications in order for the API key to work. To learn more about installing the CharityEngine Web API, click here.

  2. ce-form-id

    Enter the id of the form that has the settings you want to use on the web page.

    Example:

    <body ce-form-id="123">


Quick Action Form Auto Show Option

You can also optionally add the ce-form-auto-show class to your body tag as follows to have your Quick Action form appear automatically when the page loads.

<body class="ce-form-auto-show">


Quick Action Buttons

Once you have added the appropriate body tags, you can all the  ce-donate-button class to any of the buttons on your website to invoke the form.
Below is an example of a quick action donate button.

<div class="ce-donate-button">Donate Now</div>


Troubleshooting:

The most common error that can occur is configuring the HTML incorrectly or not having a valid API key configured. In order to ensure that your API Key is working, you can install the following JavaScript on your web page.  The code will display a pop-up message that will tell you if your website is configured properly.

<script type="text/javascript">



    CE_API.AddListener('Authenticated', function () { alert('authentication successful'); });


    CE_API.AddListener('AuthorizationDenied', function () { alert('authentication failed'); });



</script>


To learn how to install the embeddable form using JavaScript, click here.

Powered by Powered By CharityEngine