Choose a floating button, inline form or pop-up. The steps below show how to place your form on WordPress and other websites.
Create your DonatoTomato account and a campaign. Connect Stripe to receive gifts. Bank gifts require activation for your organization; contact us if you want to offer them.
Prefer the donation form rendered directly inside a specific page (Donate page, campaign landing page)? Use the DonatoTomato block in the WordPress editor, no embed code to copy.
Using our WordPress plugin
Don't have the plugin yet? Install it from wordpress.org.
The block embeds one specific campaign. To offer a list of your funds on a page, use the [donatotomato choose="yes"] shortcode instead — see Let donors choose the fund.
Using a page builder (Elementor, Divi, Beaver Builder)?
Page builders replace the block editor, so the DonatoTomato blocks aren't available inside them. If you have our plugin, use its shortcode builder instead: open Settings → DonatoTomato → Shortcode Builder, pick your campaign by name, and copy the generated shortcode. Paste it into a Code module (Divi) or a Shortcode widget (Elementor) — no campaign IDs to hunt down.
The builder also has a "let donors choose the destination" checkbox, with an optional group box, so a single shortcode can offer a list of your funds — see Let donors choose the fund below.
No plugin? Drop your campaign's embed code (below) into the builder's HTML / Code widget instead.
Get your embed code
Your code will look like this (with your org's real URL):
<div style="max-width: 480px; width: 100%;">
<iframe
src="https://app.donatotomato.com/widget/your-org/campaign-id"
width="100%"
height="600"
frameborder="0"
style="border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); display: block;"
title="Donate"
allow="payment"
></iframe>
<script>(function(){var s=document.currentScript||document.scripts[document.scripts.length-1];var w=s&&s.parentElement;var f=w&&w.querySelector('iframe');if(!f)return;var o=new URL(f.src,location.href).origin;window.addEventListener('message',function(e){if(e.origin!==o)return;if(!e.data||e.data.type!=='dt-resize'||e.source!==f.contentWindow)return;var h=parseInt(e.data.height,10);if(!h||isNaN(h))return;if(h>5000)h=5000;f.style.height=(h+24)+'px';});})();</script>
</div>Each campaign has its own unique embed code. If you run multiple campaigns, embed each one separately.
Not on WordPress? Paste your campaign's embed code (see above) into any platform that supports custom HTML.
<main> tag or inside a content <div>.Want full control over button placement, say, in your site's nav, inside a hero section, or attached to a custom-styled CTA? Use this snippet to wire any element on your page to open the donation pop-up. Works on any site.
On WordPress, the floating button above is the easier path, but this is how you'd add a Donate item to a custom menu, or trigger the form from your own button design.
Live demo
↑ This is the same script + button HTML shown below. Click to see the pop-up open against this page.
1. Add the script tag once, in your site's <head>
<script async src="https://app.donatotomato.com/embed.js"
data-dt-tenant="your-org-slug"></script>2. Add a trigger anywhere on your site
Two equivalent options; pick whichever fits your CMS:
<!-- Option A: button with data attribute --> <button data-dt-donate="campaign-id-here">Donate</button> <!-- Option B: link with ?dt-donate (works for CMS menu items) --> <a href="?dt-donate=campaign-id-here">Donate</a>
Tip: leave the campaign off (data-dt-donate with no value) and the button opens your fund list instead.
Where to find your campaign ID: in your DonatoTomato dashboard, open the campaign and copy the ID from the URL; it's the long string after /campaigns/.
Raising money for several things at once — one campaign per fund, program, or project? You don't need a separate embed for each. Leave the campaign out of your embed and the form opens on a list of your active campaigns, so the donor picks where their gift goes, then completes the normal donation flow.
When that list gets long, give each campaign a Group label in your dashboard (something like Missionaries or Programs) and point a page at just that group. One page can offer your global workers, another your programs — and adding a campaign to a group later updates every page offering that group automatically, with nothing to edit. A group with a single campaign skips the list and goes straight to the form.
Inline embed (any platform)
Use your organization's widget URL, with an optional ?group=:
<!-- All active campaigns --> <iframe src="https://app.donatotomato.com/widget/your-org-slug" ...></iframe> <!-- Only the campaigns in one group --> <iframe src="https://app.donatotomato.com/widget/your-org-slug?group=Missionaries" ...></iframe>
Pop-up button
With the script tag from the pop-up section above, leave the campaign off the trigger and optionally name a group:
<button data-dt-donate data-dt-group="Missionaries">Support our missionaries</button>
WordPress
[donatotomato choose="yes" group="Missionaries"] [donatotomato_button choose="yes" group="Programs" label="Support a program"]
Or skip the typing: the plugin's Shortcode Builder has a "let donors choose the destination" checkbox and offers your existing group names from a list (plugin 1.4.11+).
Good to know: group names match forgivingly (capitalization and extra spaces don't matter), and the easiest way to get any of these snippets pre-filled is your campaign's Add to your website panel — it has the same "let donors choose" option and group selector. A group shortens a long list; it doesn't hide campaigns — every active campaign is still reachable from an embed with no group.
Widget shows "Campaign not found"
Your campaign may be in Draft status. Log in to your dashboard, open the campaign, and change the status to Active.
My group shows "Nothing in this list right now"
The group name in your embed must match a Group label set on at least one Active campaign. Matching forgives capitalization and extra spaces, but not different words — and draft or paused campaigns never appear in the list. Check the campaign's Group field in your dashboard.
Widget is cut off or too small
The widget needs at least 480px wide and 600px tall. If your layout is narrower than that, the widget will scroll internally; that's expected on mobile. In Wix, resize the HTML box to be larger.
Payment doesn't go through
Make sure your organization's Stripe account is connected in Settings → Stripe Connect. Donations can't be processed without an active Stripe connection.
I don't see the widget at all
Some website security policies block embedded content. If you manage your own server, check that your Content Security Policy (CSP) allows iframes from app.donatotomato.com.
Floating button doesn't appear on a page
Check Settings → DonatoTomato → Floating Donate Button. The button auto-hides on pages that already contain the inline donation widget, and on any page you've added to the Hide on these pages list.