Custom Easy Button Widget for CDP

The DonateStock Easy Button widget allows donors to make stock donations in a modal window without leaving the nonprofit's website. Below you will find an example with a custom button implementation.

Copy the code below in its entirety to include this button on your giving page.

<div id="dsEasyButtonContainer"></div>                         
<script>
    (function (w,d,s,o,f,js,fjs) {
        w[o]=w[o]||function (){(w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s),fjs =d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=true;fjs.parentNode.insertBefore(js,fjs);
    }(window, document, 'script', 'dsEasyButton', 'https://donatestock.com/EasyButton.js'));
 
    dsEasyButton('init', {
        element: document.getElementById('dsEasyButtonContainer'),    // Required; this is the id of the html element where the button will be rendered
        ein: '455257937',                             // Required
        preloadNonprofit: true,  
        nativeWindow: true,  // true opens a new window like paypal, false opens the donation form in a modal window
        debug: false,
        style: {
            dark: true,   // false will show the white button
        },
        renderButton: (open, nonprofit) => {
            let w = document.createElement('div');
            let c = document.createElement('div');
            let a = document.createElement('a');
            let b = document.createElement('button');
            b.style.margin = 'unset';
            b.style.padding = 'unset';
            b.style.border = 'none';
            b.style.background = 'none';
            b.style.pointerEvents = 'cursor';
            b.style.color = '#a03f2b';
            b.style.cursor = 'pointer';
            b.title = 'Donate to ' + nonprofit.name;
            b.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="370" height="77" fill="none"><g clip-path="url(#dsEasyButton1)"><rect y=".056" width="370" height="76" rx="5" fill="currentColor"/><g clip-path="url(#dsEasyButton2)" fill="#FEFEFE"><path d="M46.47 64.044c-13.01 0-23.733-9.12-25.209-20.792h4.565c1.476 9.257 10.196 16.237 20.792 16.237 10.46 0 19.179-7.106 20.792-16.237h4.565c-1.897 11.672-12.62 20.792-25.504 20.792ZM69.013 38.96a5.367 5.367 0 1 0 0-10.733 5.367 5.367 0 0 0 0 10.734ZM20.46 12.254h4.618c1.581 0 2.804.4 3.69 1.202 1.096.98 1.645 2.362 1.645 4.112 0 1.824-.517 3.226-1.54 4.217-.854.833-2.13 1.255-3.816 1.255H20.46V12.254Zm2.825 2.33v6.147h1.55c.886 0 1.54-.222 1.961-.675.506-.548.749-1.35.749-2.383 0-1.18-.348-2.035-1.044-2.562-.474-.348-1.096-.527-1.866-.527h-1.35ZM35.41 23.261c-1.318 0-2.361-.432-3.131-1.296-.675-.75-1.012-1.698-1.012-2.837 0-1.307.432-2.35 1.297-3.12.759-.665 1.697-.992 2.836-.992 1.328 0 2.372.433 3.152 1.287.665.738.992 1.676.992 2.815 0 1.318-.433 2.362-1.297 3.131-.749.675-1.698 1.012-2.837 1.012Zm-.02-6.378c-.486 0-.855.2-1.118.59-.264.39-.39.949-.39 1.655 0 1.508.516 2.267 1.539 2.267s1.54-.759 1.54-2.277c-.011-1.487-.528-2.235-1.572-2.235ZM43.181 15.227v1.044c.622-.833 1.476-1.255 2.562-1.255 1.044 0 1.814.348 2.288 1.044.316.464.464 1.181.464 2.14v4.85h-2.562v-4.428c0-.411-.042-.717-.116-.917-.158-.39-.517-.59-1.076-.59-.6 0-1.022.231-1.265.695-.126.243-.2.601-.2 1.076v4.175h-2.562v-7.834h2.467ZM57.657 23.05h-2.604a2.672 2.672 0 0 1-.137-.738c-.485.633-1.34.95-2.562.95-.917 0-1.613-.243-2.109-.728-.432-.422-.643-.98-.643-1.677 0-.959.422-1.623 1.265-2.024.359-.158 1.107-.348 2.235-.559l1.782-.327v-.463c-.02-.57-.422-.865-1.191-.865-.422 0-.728.074-.928.221-.2.148-.327.401-.38.78h-2.424c.094-1.74 1.349-2.604 3.774-2.604 1.286 0 2.256.232 2.9.696.305.232.506.485.622.78.105.285.168.717.168 1.308 0 .105 0 .411-.01.938v.169l-.01 1.297v.706c0 .116 0 .317-.011.57v.326c-.053.56.052.97.263 1.244Zm-2.762-3.574-1.181.253c-.612.137-1.023.285-1.223.422-.2.137-.306.348-.306.633 0 .611.348.917 1.044.917.58 0 1.033-.21 1.36-.622.18-.222.274-.57.285-1.055l.02-.548ZM63.71 15.227v1.687h-1.856v3.226c0 .728.326 1.087.98 1.087.38 0 .685-.074.907-.222l.453 1.835c-.495.21-1.212.316-2.15.316-1.171 0-1.94-.253-2.341-.749a1.623 1.623 0 0 1-.327-.727c-.053-.264-.074-.696-.074-1.297v-3.469h-1.307v-1.687h1.307v-1.655l2.552-1.35v3.005h1.855ZM72.344 20.657c-.116.464-.348.886-.695 1.286-.77.886-1.846 1.329-3.216 1.329-1.234 0-2.236-.337-3.005-1.023-.854-.759-1.287-1.771-1.287-3.026 0-1.318.443-2.372 1.329-3.163.76-.685 1.719-1.023 2.847-1.023 1.38 0 2.435.454 3.184 1.36.654.791.98 1.835.98 3.121v.243h-5.82c.022.559.19 1.002.496 1.318.316.316.738.474 1.265.474.654 0 1.15-.295 1.497-.875h2.425v-.02Zm-2.361-2.383c-.127-1.012-.665-1.518-1.614-1.518-.959 0-1.507.506-1.655 1.518h3.269ZM28.188 31.264h-1.297c-.031-1.402-.928-2.109-2.699-2.109-.727 0-1.307.169-1.75.485-.443.327-.664.76-.664 1.287 0 .4.137.716.4.959.264.232.728.443 1.381.612l2.563.664c1.623.432 2.446 1.339 2.446 2.71 0 .99-.401 1.802-1.192 2.424-.706.538-1.718.812-3.026.812-1.666 0-2.878-.506-3.637-1.508-.4-.537-.612-1.275-.633-2.182h1.286v.032c0 .78.264 1.391.812 1.813.538.432 1.287.643 2.257.643.885 0 1.539-.147 1.971-.432.517-.348.77-.843.77-1.476 0-.801-.654-1.37-1.972-1.708l-2.688-.685c-1.403-.359-2.11-1.192-2.11-2.489 0-1.022.391-1.824 1.16-2.383.675-.495 1.561-.738 2.668-.738 1.571 0 2.689.454 3.364 1.371.39.538.59 1.107.59 1.73v.168ZM33.238 31.2v.992h-1.581v5.155a.651.651 0 0 0 .675.654c.19 0 .485-.042.875-.137l.137 1.086c-.622.105-1.097.169-1.413.169-.991 0-1.497-.411-1.497-1.223v-5.704h-1.055V31.2h1.055v-1.582l1.223-.559v2.14h1.581ZM37.52 31.043c1.17 0 2.055.41 2.667 1.223.537.706.812 1.655.812 2.867 0 1.35-.349 2.373-1.055 3.08-.6.61-1.413.916-2.446.916-1.18 0-2.088-.4-2.71-1.191-.537-.696-.811-1.624-.811-2.805 0-1.37.358-2.414 1.075-3.152.6-.633 1.434-.939 2.467-.939Zm0 1.128c-.707 0-1.256.263-1.656.79-.4.528-.601 1.245-.601 2.162 0 .96.221 1.687.675 2.182.39.443.917.665 1.57.665.696 0 1.234-.253 1.624-.749.39-.506.58-1.202.58-2.098 0-.98-.221-1.74-.664-2.267-.39-.453-.896-.685-1.529-.685ZM48.674 33.794h-1.233c-.148-1.086-.76-1.623-1.835-1.623-.675 0-1.202.263-1.582.8-.38.539-.569 1.277-.569 2.215s.221 1.645.675 2.14c.38.433.896.644 1.54.644 1.032 0 1.655-.56 1.855-1.687h1.255c-.085.97-.433 1.697-1.044 2.182-.538.432-1.234.643-2.098.643-1.14 0-2.025-.4-2.657-1.202-.538-.696-.812-1.602-.812-2.73 0-1.35.358-2.404 1.075-3.163.612-.654 1.403-.981 2.383-.981 1.128 0 1.972.38 2.53 1.128.275.4.454.949.517 1.634ZM51.3 28.164v6.337l3.29-3.29h1.602l-2.7 2.668 3.164 5.082h-1.519l-2.625-4.207-1.212 1.17v3.026h-1.224V28.164H51.3Z"/></g><path d="M113.312 44.056V30.661h1.653l4.959 9.253 4.94-9.253h1.615v13.395h-1.767v-9.823l-4.199 7.771h-1.197l-4.218-7.733v9.785h-1.786Zm19.082.171c-.646 0-1.222-.127-1.729-.38a3.215 3.215 0 0 1-1.216-1.026 2.553 2.553 0 0 1-.437-1.463c0-.684.171-1.222.513-1.615.355-.393.931-.678 1.729-.855.811-.177 1.9-.266 3.268-.266h.646v-.494c0-.722-.152-1.241-.456-1.558-.304-.317-.804-.475-1.501-.475-.532 0-1.064.082-1.596.247a6.613 6.613 0 0 0-1.634.741l-.589-1.349c.481-.342 1.083-.614 1.805-.817a7.658 7.658 0 0 1 2.071-.304c1.267 0 2.204.304 2.812.912.608.595.912 1.533.912 2.812v5.72h-1.805v-1.54c-.228.532-.583.95-1.064 1.254-.481.304-1.058.456-1.729.456Zm.38-1.368c.684 0 1.254-.24 1.71-.722.456-.481.684-1.09.684-1.824V39.8h-.627c-.925 0-1.653.044-2.185.133-.519.089-.893.24-1.121.456-.215.203-.323.488-.323.855 0 .481.165.874.494 1.178.329.291.785.437 1.368.437Zm6.861 1.197V30.661h1.919v8.17h.038l4.028-4.047h2.375l-4.446 4.465 4.788 4.807h-2.394l-4.351-4.237h-.038v4.237h-1.919Zm13.944.171c-1.52 0-2.717-.424-3.591-1.273-.874-.861-1.311-2.033-1.311-3.515 0-.95.19-1.786.57-2.508a4.294 4.294 0 0 1 1.615-1.71c.684-.405 1.469-.608 2.356-.608 1.279 0 2.286.412 3.021 1.235.735.81 1.102 1.932 1.102 3.363v.646h-6.802c.139 1.925 1.159 2.888 3.059 2.888a5.01 5.01 0 0 0 1.558-.247 4.319 4.319 0 0 0 1.463-.817l.57 1.33c-.418.38-.956.678-1.615.893a6.388 6.388 0 0 1-1.995.323Zm-.285-8.265c-.798 0-1.431.247-1.9.741-.469.494-.754 1.153-.855 1.976h5.187c-.038-.861-.266-1.526-.684-1.995-.418-.481-1.001-.722-1.748-.722Zm14.094 8.265c-.646 0-1.222-.127-1.729-.38a3.223 3.223 0 0 1-1.216-1.026 2.553 2.553 0 0 1-.437-1.463c0-.684.171-1.222.513-1.615.355-.393.931-.678 1.729-.855.811-.177 1.9-.266 3.268-.266h.646v-.494c0-.722-.152-1.241-.456-1.558-.304-.317-.804-.475-1.501-.475-.532 0-1.064.082-1.596.247a6.63 6.63 0 0 0-1.634.741l-.589-1.349c.482-.342 1.083-.614 1.805-.817a7.664 7.664 0 0 1 2.071-.304c1.267 0 2.204.304 2.812.912.608.595.912 1.533.912 2.812v5.72h-1.805v-1.54c-.228.532-.582.95-1.064 1.254-.481.304-1.057.456-1.729.456Zm.38-1.368c.684 0 1.254-.24 1.71-.722.456-.481.684-1.09.684-1.824V39.8h-.627c-.924 0-1.653.044-2.185.133-.519.089-.893.24-1.121.456-.215.203-.323.488-.323.855 0 .481.165.874.494 1.178.33.291.786.437 1.368.437Zm15.101 1.368a7.65 7.65 0 0 1-2.128-.285c-.658-.203-1.209-.481-1.653-.836l.551-1.292c.469.33.982.583 1.539.76a5.73 5.73 0 0 0 1.71.266c.672 0 1.178-.12 1.52-.36.342-.242.513-.565.513-.97 0-.33-.114-.583-.342-.76-.228-.19-.57-.336-1.026-.437l-1.805-.36c-1.596-.33-2.394-1.154-2.394-2.47 0-.875.349-1.572 1.045-2.09.697-.52 1.609-.78 2.736-.78.646 0 1.261.095 1.843.285.596.19 1.09.475 1.482.855l-.551 1.292a4.092 4.092 0 0 0-1.311-.76 4.308 4.308 0 0 0-1.463-.266c-.658 0-1.159.127-1.501.38-.342.24-.513.57-.513.988 0 .633.418 1.039 1.254 1.216l1.805.361c.824.165 1.444.443 1.862.836.431.393.646.925.646 1.596 0 .887-.348 1.583-1.045 2.09-.696.494-1.621.741-2.774.741Zm9.814 0c-1.165 0-2.033-.298-2.603-.893-.57-.595-.855-1.457-.855-2.584v-4.484h-1.805v-1.482h1.805v-2.793h1.919v2.793h2.869v1.482h-2.869v4.332c0 .671.139 1.178.418 1.52.291.342.76.513 1.406.513.203 0 .399-.019.589-.057.19-.05.38-.108.57-.17l.304 1.443c-.19.114-.456.203-.798.266a4.221 4.221 0 0 1-.95.114Zm6.923 0c-.938 0-1.748-.196-2.432-.589a4.095 4.095 0 0 1-1.596-1.653c-.368-.722-.551-1.577-.551-2.565s.183-1.837.551-2.546c.38-.722.912-1.28 1.596-1.672.684-.393 1.494-.589 2.432-.589.912 0 1.71.196 2.394.59.684.392 1.216.95 1.596 1.671.38.71.57 1.558.57 2.546 0 .988-.19 1.843-.57 2.565-.38.71-.912 1.26-1.596 1.653s-1.482.59-2.394.59Zm0-1.482c.785 0 1.418-.285 1.9-.855.481-.57.722-1.393.722-2.47 0-1.077-.241-1.894-.722-2.45-.482-.57-1.115-.856-1.9-.856-.798 0-1.438.285-1.919.855-.482.557-.722 1.374-.722 2.451s.24 1.9.722 2.47c.481.57 1.121.855 1.919.855Zm10.8 1.482c-.95 0-1.774-.196-2.47-.589a4.192 4.192 0 0 1-1.596-1.69c-.38-.736-.57-1.597-.57-2.585 0-1.47.418-2.628 1.254-3.477.836-.849 1.963-1.273 3.382-1.273a5.13 5.13 0 0 1 1.729.304c.57.203 1.038.481 1.406.836l-.608 1.35a3.378 3.378 0 0 0-1.178-.723 3.264 3.264 0 0 0-1.197-.247c-.9 0-1.596.285-2.09.855-.482.557-.722 1.355-.722 2.394 0 1.039.24 1.856.722 2.451.494.583 1.19.874 2.09.874a3.501 3.501 0 0 0 2.375-.969l.608 1.368c-.368.342-.843.614-1.425.817-.57.203-1.14.304-1.71.304Zm4.784-.17V30.66h1.919v8.17h.038l4.028-4.047h2.375l-4.446 4.465 4.788 4.807h-2.394l-4.351-4.237h-.038v4.237h-1.919Zm18.322.17c-.811 0-1.526-.19-2.147-.57-.608-.393-1.083-.95-1.425-1.672-.342-.722-.513-1.577-.513-2.565s.171-1.837.513-2.546c.342-.722.817-1.28 1.425-1.672.608-.393 1.324-.589 2.147-.589.697 0 1.317.152 1.862.456.545.304.95.716 1.216 1.235v-5.643h1.919v13.395h-1.881v-1.615a2.94 2.94 0 0 1-1.235 1.311c-.545.317-1.172.475-1.881.475Zm.494-1.482c.785 0 1.419-.285 1.9-.855.481-.57.722-1.393.722-2.47 0-1.077-.241-1.894-.722-2.45-.481-.57-1.115-.856-1.9-.856-.798 0-1.438.285-1.919.855-.481.557-.722 1.374-.722 2.451s.241 1.9.722 2.47c.481.57 1.121.855 1.919.855Zm11.225 1.482c-.937 0-1.748-.196-2.432-.589a4.095 4.095 0 0 1-1.596-1.653c-.367-.722-.551-1.577-.551-2.565s.184-1.837.551-2.546c.38-.722.912-1.28 1.596-1.672.684-.393 1.495-.589 2.432-.589.912 0 1.71.196 2.394.59.684.392 1.216.95 1.596 1.671.38.71.57 1.558.57 2.546 0 .988-.19 1.843-.57 2.565-.38.71-.912 1.26-1.596 1.653s-1.482.59-2.394.59Zm0-1.482c.786 0 1.419-.285 1.9-.855.482-.57.722-1.393.722-2.47 0-1.077-.24-1.894-.722-2.45-.481-.57-1.114-.856-1.9-.856-.798 0-1.437.285-1.919.855-.481.557-.722 1.374-.722 2.451s.241 1.9.722 2.47c.482.57 1.121.855 1.919.855Zm6.716 1.311v-9.272h1.862v1.54a3.197 3.197 0 0 1 1.292-1.274 3.957 3.957 0 0 1 1.862-.437c2.191 0 3.287 1.241 3.287 3.724v5.72h-1.919V38.45c0-.798-.159-1.38-.475-1.748-.304-.367-.786-.55-1.444-.55-.773 0-1.394.246-1.862.74-.456.481-.684 1.121-.684 1.92v5.243h-1.919Zm13.911.171c-.646 0-1.222-.127-1.729-.38a3.215 3.215 0 0 1-1.216-1.026 2.553 2.553 0 0 1-.437-1.463c0-.684.171-1.222.513-1.615.355-.393.931-.678 1.729-.855.811-.177 1.9-.266 3.268-.266h.646v-.494c0-.722-.152-1.241-.456-1.558-.304-.317-.804-.475-1.501-.475-.532 0-1.064.082-1.596.247a6.613 6.613 0 0 0-1.634.741l-.589-1.349c.481-.342 1.083-.614 1.805-.817a7.658 7.658 0 0 1 2.071-.304c1.267 0 2.204.304 2.812.912.608.595.912 1.533.912 2.812v5.72h-1.805v-1.54c-.228.532-.583.95-1.064 1.254-.481.304-1.058.456-1.729.456Zm.38-1.368c.684 0 1.254-.24 1.71-.722.456-.481.684-1.09.684-1.824V39.8h-.627c-.925 0-1.653.044-2.185.133-.519.089-.893.24-1.121.456-.215.203-.323.488-.323.855 0 .481.165.874.494 1.178.329.291.785.437 1.368.437Zm10.813 1.368c-1.165 0-2.033-.298-2.603-.893-.57-.595-.855-1.457-.855-2.584v-4.484h-1.805v-1.482h1.805v-2.793h1.919v2.793h2.869v1.482h-2.869v4.332c0 .671.139 1.178.418 1.52.291.342.76.513 1.406.513.203 0 .399-.019.589-.057.19-.05.38-.108.57-.17l.304 1.443c-.19.114-.456.203-.798.266a4.221 4.221 0 0 1-.95.114Zm2.816-11.59v-1.995h2.242v1.995h-2.242Zm.171 11.42v-9.273h1.919v9.272h-1.919Zm8.649.17c-.938 0-1.748-.196-2.432-.589a4.095 4.095 0 0 1-1.596-1.653c-.368-.722-.551-1.577-.551-2.565s.183-1.837.551-2.546c.38-.722.912-1.28 1.596-1.672.684-.393 1.494-.589 2.432-.589.912 0 1.71.196 2.394.59.684.392 1.216.95 1.596 1.671.38.71.57 1.558.57 2.546 0 .988-.19 1.843-.57 2.565-.38.71-.912 1.26-1.596 1.653s-1.482.59-2.394.59Zm0-1.482c.785 0 1.418-.285 1.9-.855.481-.57.722-1.393.722-2.47 0-1.077-.241-1.894-.722-2.45-.482-.57-1.115-.856-1.9-.856-.798 0-1.438.285-1.919.855-.482.557-.722 1.374-.722 2.451s.24 1.9.722 2.47c.481.57 1.121.855 1.919.855Zm6.715 1.311v-9.272h1.862v1.54a3.197 3.197 0 0 1 1.292-1.274 3.957 3.957 0 0 1 1.862-.437c2.191 0 3.287 1.241 3.287 3.724v5.72h-1.919V38.45c0-.798-.159-1.38-.475-1.748-.304-.367-.786-.55-1.444-.55-.773 0-1.394.246-1.862.74-.456.481-.684 1.121-.684 1.92v5.243h-1.919Z" fill="#fff"/><g opacity=".8" stroke="#FEFEFE"><path d="M351.587 39.07c0 8.551-6.958 15.486-15.544 15.486S320.5 47.621 320.5 39.071c0-8.551 6.957-15.486 15.543-15.486 8.586 0 15.544 6.935 15.544 15.486Z"/><path d="m333.373 44.399 5.348-5.328-5.348-5.33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><path stroke="#FEFEFE" stroke-dasharray="2 2" d="M92.5 12.056v52"/></g><defs><clipPath id="dsEasyButton1"><path fill="#fff" d="M0 0h370v76.129H0z"/></clipPath><clipPath id="dsEasyButton2"><path fill="#fff" transform="translate(19.785 11.99)" d="M0 0h54.615v52.085H0z"/></clipPath></defs></svg>';

c.style.fontSize = '12px';
            c.style.color = '#a03f2b';
            c.innerText = 'powered by ';

a.href = 'https://donatestock.com';
            a.target = '_blank';
            a.title = 'Stock gifting powered by DonateStock';
            a.innerText = 'donatestock.com';
            a.style.color = '#a03f2b';
            a.style.textDecoration = 'underline';
            c.appendChild(a);

w.appendChild(b);
            w.appendChild(c);

b.addEventListener('click', (e) => {
                e.preventDefault();
                open();
            });
            b.addEventListener('mouseover', () => {
                b.style.color = '#f5562b';
            });
            b.addEventListener('mouseout', () => {
                b.style.color = '#a03f2b';
            });
            return w;
        },
    });
</script>