Skip to content

How to embedding an donation form into an website.

In the most cases the donation-form will be embedded as an iframe.

Goal

At the end of this guide, you will have a donation-form running on a website.

Prerequisites

This guide assumes that you have basic html and js skills. Get an donation_form_id by create an donation_form.

1) Create onmessage

For handling javascript events, we define at first an window.onmessage block:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script type="text/javascript">
    window.onmessage = function(e) {
        if (e.data == 'navigate') {
            var top = document.getElementById('donation-form').offsetTop;
            window.scrollTo(0, top);
        }
        if (e.data.event == 'gtm-trigger') {
            dataLayer?.push(e.data.data)
        }
    };
</script>
The navigate event is used for scroll to the top of the iframe. The gtm-trigger is used for handling GoogleTagManager events.

2) Resize Iframe

To ensure that the iframe always fits correctly into the page, we need second script block. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
    //stores the iframe elemement. 
    var iframeElement = null

    //used after the iframe is loaded.
    const messageThatIframeIsLoaded = () => { 
        //assign the donation form element to iframeElement  
        iframeElement = document.getElementById('donation-form')
        if (iframeElement) {        
            //trigger the message event in the iframe.
            iframeElement.contentWindow?.postMessage({ type: 'iframe-loaded' }, '*')        
        }
    }
    //used for handle iframe resize.
    const handleIframeMessage = (event) => {        
        if (event.data.type === 'iframe-height') {        
            console.log('iframe event', event.origin, event.data.data)  
            //resize iframeElement      
            iframeElement.style.height = event.data.data.height +"px"
        }        
    }
    //add event listener for handling the function call via message event.  
    window.addEventListener('message', handleIframeMessage, false)        
</script>
The iframeElement variable is for reference the iframe element. At load the messageThatIframeIsLoaded function will assign the element to this variable and post an iframe-loaded message to the iframe. This will trigger an iframe-height event that contains the current size of the iframe element. For handling this kind of events, we define the handleIframeMessage function. In case of an iframe-height event, the function will set the height of the iframe to the value of the event data. Finally an event listener for message is defined for handling the iframe-height event.

3) Iframe

Finally, the iframe. The donation_form_id must be adjusted so that the correct campagne can be assigned. The messageThatIframeIsLoaded function is defined in the onload interface of the iframe, so the iframe is set directly to the correct size during initial loading. 

1
<iframe id="donation-form" onload="messageThatIframeIsLoaded()" src="https://donation-form.vivaconagua.org/#/?donation_form_id=<donation_form_id>" style="width: 99%; border: none; height: 1765px;"></iframe>
Last update: 2022-10-04