Chimp Custom Widget

Chimp Custom Widget Button

Below you’ll fine the code with commented instructions for using the custom widget. Setting up the custom button is a technical process. It’s recommended that a web developer or designer complete these steps.

Two key things to note:

1) jQuery must be loaded on the page

2) the section that says “XXXXXXXXXXXXCHARITY_CODEXXXXXXXXXXX” must be replaced with the key found in the charity or group’s original widget code.

First, include jQuery on the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  

This script is the standard script tag. It simply has two additional custom attributes these are ‘data-hide-button’ and ‘data-script-id’. ‘data-hide-button’ must always be ‘true’. ‘data-script-id’ can be any custom identifier, and it’s value is used later in the ‘postMessage’ call.

<script type="text/javascript" src="http://chimp.net/widget/js/loader.js?XXXXXXXXXXXXCHARITY_CODEXXXXXXXXXXX" id="chimp-button-script" data-hide-button="true" data-script-id="main"> </script>  

Here we have our custom button. It can really be whatever we want, as long as it can respond to a javascript event of some sort.

<h1>Custom Widget: Your Button Here</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>

Here is the custom javascript that opens the chimp iframe. We use jquery to capture the click event however this is not required. Everything inside the function which responds to the click is pure vanilla js. The only aspect of this which should be changed is the call to ‘getElementById’. The value of this needs to match ‘chimp-form-[identifier]’ where the identifier is the value of the ‘data-script-id’ we defined above.

<script type="text/javascript"> $(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-main"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); }); </script>