Connection Card Pro Help & Documentation




Last Updated: Nov 17, 2025 10:14 AM

Embed Forms, Donations, Registrations and Simple Signups in your Website!

On November 17, 2025, as part of v4.0.0, Connection Card Pro released our new embedded modal and unified the experience for embedding Custom Forms, Donation Widgets, Event Registrations and (new) Simple Signups into your website for an improved user experience! 

Some basic HTML knowledge is required for this tutorial.

Using this simple guide, you'll be able to embed forms into your website in no time! 

Locating Embed Codes

  1. Go to the applicable page for the element you wish to embed. 
    • Custom Form (Forms > View Forms) 
    • Event Registration (Events > View Events) 
    • Donation Links / Donation Forms (Giving > Giving Settings > Unique Giving Links) 
    • Simple Signups (Forms > Simple Signups) 
  2. Locate the form/donation/event you wish to embed and click on Share. 
    Share
  3. Click on "More Options". 



  4. On the "Modal Embed" tab, you will see two text fields that you can copy. 
    1. Copy the first one and paste it into your website at the bottom of the <body> tag on your website. Do not alter this code at all. 

    2. Then, create one or more links (using <a> tags) on your website, linking to a Connection Card Pro supported resource (such as event registration, custom form, Simple Signup or donation form), you may style this link however you'd like, the only important part is that the link includes ?use-ccp-modal=true as part of its resource address. This is what triggers our modal to activate when clicked. 

  5. That's it! It's really that easy! 

Once you've completed these steps, you can also try out some of our more advanced but experimental features of this component below: 

Completed Event Callback

This is currently only available for custom forms and is still experimental. 

You can use the onCompleted callback to trigger something on your website if and when the user completes the custom form. This will only be called if the user actually submits the custom form. (Opening and closing the custom form will not trigger this callback). 

To use it, set the value of CCPModalControllerAPI.onCompleted to a function accepting one parameter. See the example below: 

<script type="text/javascript" src="https://connectioncardpro.com/js/ccpmodal.js"></script>
<script type="text/javascript">
    CCPModalControllerAPI.onCompleted = function(id){    
        // some code here    
    };
</script>
If you still have questions or require additional help, please contact our support team by clicking on the Help button > Contact Support.
Did you find this helpful?