Embed your form on your site
Paste a short snippet on your charity website to embed a Together donation form. Cards, Google Pay, Link, BECS, and PayTo work for every donor; Apple Pay needs a Raise-tier custom domain to render inside the embed.
Embedding lets donors give without leaving your site. The snippet is the same shape across every CMS - what changes is where you paste it. Plan for five minutes the first time.
Before you start
You need:
- EDITOR or ADMIN role on your org.
- At least one ACTIVE donation form at Engage -> Forms. If you do not have one yet, follow Ship your first donation form first.
- Access to your CMS (WordPress, Webflow, Squarespace, NationBuilder, or any host that lets you paste raw HTML).
Steps
-
Go to Engage -> Forms and open the form you want to embed.
The Engage forms list. -
Click the Embed tab on the form detail page. The snippet is generated for you - a single placeholder
<div>plus a small<script>tag.<div id="together-donate-XXXXXXXX"></div> <script src="https://yourorg.alltogether.giving/api/embed.js?v=..." data-token="XXXXXXXX" async ></script> -
Pick the tab that matches your CMS (Generic HTML, WordPress, Webflow, Squarespace, NationBuilder). The snippet is identical; only the paste instructions differ.
-
Click Copy and paste into your page. The Live preview on the same screen shows exactly what donors will see.
Where to paste it, by CMS
WordPress
Edit the page or post.
- Block editor (Gutenberg): add a Custom HTML block and paste the snippet into it. Update.
- Classic editor: switch to the Text tab (top right) and paste at the position where you want the form. Update.
The form renders inline at the position you pasted; no plugin needed.
Webflow
Edit the page in the Designer.
- From the Add Element panel, drag an Embed element into the section where you want the form.
- Open the Embed and paste the snippet. Click Save & Close.
- Publish the site (top right). The Embed element shows a placeholder in the Designer; the real form only renders on the published page.
Squarespace
Edit the page.
- Click the + to add a block, choose Code.
- Set the language to HTML, untick Display Source, and paste the snippet.
- Save.
NationBuilder
Edit the page in the admin.
- Body: insert an HTML block at the position you want the form and paste the snippet.
- Settings: paste into the page's Custom HTML area if you want the form to appear in a slot the body editor cannot reach.
Save and publish.
Other CMS / static site
Anywhere that accepts raw HTML works. Paste the snippet inside your page's content area, between <body> tags. The placeholder <div> is required; the <script> tag does the rest.
How the form blends in
The embedded form is built to look like part of your page, not a bolted-on widget:
- No widget border. Embedded, the form drops the card outline and background it has on a standalone Together donate page, so it sits directly in your page's own section.
- Your font. The form picks up the font of the page it's embedded in, so its text matches the rest of your site.
- Your brand colour. If you've set a primary colour at Settings -> Branding, the donate button and amount buttons use it.
What works in the embedded form
| Payment method | Available | Notes |
|---|---|---|
| Cards | yes | Visa, Mastercard, Amex. |
| Google Pay | yes | Renders for donors on supported Android / Chrome. |
| Link | yes | Stripe's autofill wallet. |
| BECS direct debit | yes | Australian bank-account donations. |
| PayTo | yes | Real-time bank debit for Australian donors. |
| Apple Pay | see below | Needs a Raise-tier custom domain to render inside the embed. |
Apple Pay note: Apple Pay only shows up for donors using Safari on a Mac or iPhone. Inside an embedded form there's a second catch: Safari hides the Apple Pay button when the form comes from a different web address than the page it's embedded in. The default snippet loads the form from Together's address, so Apple Pay doesn't render when donors are on your site. Donors who visit your Together donation page directly still see it. The fix is the Raise-tier custom domain — see Apple Pay everywhere with your own domain below.
Apple Pay everywhere with your own domain (Raise)
On the Raise tier you can serve the embedded form from a subdomain you own, like give.yourcharity.org. Once that's set up, Apple Pay works inside the embed - donors on Safari see the Apple Pay button right on your page.
There are two parts to the setup, and the form only goes live for Apple Pay once both are done:
- Point a subdomain at Together - one DNS record.
- Add a small file to your website - so Apple knows the form belongs to you.
The Settings -> Engage -> Custom Domains page walks you through both as a numbered checklist and ticks each step off as it verifies. The domain you set up here applies to every embedded form in your account, so this is a one-time setup. Plan about ten minutes.
1. Add your domains in Together
- Go to Settings -> Engage -> Custom Domains.
- Under Use your own domain, you'll enter two things:
- The embed address - a new subdomain you'd like the form to load from, e.g.
give.yourcharity.org. - Your website address - the address of the site where you'll show the form, e.g.
yourcharity.org(orwww.yourcharity.orgif that's how visitors reach your site). Together fills this in for you based on the embed address - correct it if it's not quite right.
- The embed address - a new subdomain you'd like the form to load from, e.g.
- Click Add domain. The status starts as Setup in progress and a two-step checklist appears.
2. Point your subdomain at Together
The checklist's first step shows the DNS record to add. At your DNS provider (Cloudflare, Route 53, Namecheap, your hosting provider, etc.) add a single CNAME record:
| Field | Value |
|---|---|
| Type | CNAME |
| Name | the subdomain (e.g. give) |
| Value | embed.alltogether.giving |
| TTL | Default (300-3600s) |
Saving is instant; the change usually takes effect within five minutes, though some providers can take up to 48 hours. Step 1 ticks green automatically once it's done.
3. Add the Apple Pay file to your website
Apple needs proof that the donation form belongs to you. You do that by placing one small file on your website.
-
In the checklist's second step, click Download the file. It saves a file named
apple-developer-merchantid-domain-association(no file extension - that's normal, leave the name exactly as it is). -
Upload that file to your website so it opens at this exact address:
https://yourcharity.org/.well-known/apple-developer-merchantid-domain-association.well-knownis a folder at the top level of your site. If it isn't there already, create it. The file goes inside it, with its name unchanged. -
How you upload it depends on your site:
- Have a hosting file manager or FTP access? (cPanel, Plesk, or your host's dashboard.) Open the folder for your website, create a
.well-knownfolder at the root if it's missing, and upload the file into it. - On WordPress? Use a file-manager plugin, or ask whoever manages your hosting to drop the file in for you.
- Not sure? Forward the file and the address above to your web person or your hosting provider's support - it's a routine request and takes them a minute.
- Have a hosting file manager or FTP access? (cPanel, Plesk, or your host's dashboard.) Open the folder for your website, create a
Once the file is in place, Together detects it automatically. Step 2 ticks green - or click Check now if you don't want to wait for the next check. If it still doesn't tick after a minute or two, see the troubleshooting note below.
When it's done
Once both steps are ticked, the status flips to Active. The snippet in the Embed tab updates to load the form from your subdomain - copy the new snippet and paste it into your site.
Snippets you've already pasted keep working, but only the new one shows Apple Pay inside the embed.
What if my site builder won't let me upload a file?
Some hosted site builders (certain Squarespace, Wix, or Weebly plans) don't let you place a file at a specific address. If you can't get the file to open at the .well-known address above, Apple Pay can't be turned on inside the embed on that site. Cards, Google Pay, Link, BECS, and PayTo still work for every donor, and Safari donors who visit your Together donation page directly still get Apple Pay. If you're stuck, contact support and we'll help you find a workaround.
What happens if I remove the domain later?
Removing the domain unhooks it from Together and the form stops loading on give.yourcharity.org. The original Together-address snippet keeps working - re-paste it if you need a quick fallback. You can safely delete the Apple Pay file from your website afterwards.
Things to keep in mind
- The embed address is a subdomain in this release - the form loads from
give.yourcharity.org, not fromyourcharity.orgitself. - The website address can be your main domain. That's the point of this step -
yourcharity.orgorwww.yourcharity.org, wherever you actually show the form. - One set-up per organisation is the typical case. You can add more if you run multiple sites; each needs its own CNAME and its own copy of the file.
- HTTPS is automatic for the subdomain. A security certificate is issued once the subdomain verifies; you don't upload anything for that part.
- The domain is locked to your organisation while it's Active. To move it to a different Together org (e.g. an agency switching client accounts), contact support.
Restricting who can embed your form (optional)
The default is "any site can embed." That is the right setting for most charities - it's the same security posture as your donate page already being public. If you want to lock embedding to specific domains, the form's Embed tab has an Allowed domains field:
- One hostname per line. Wildcards allowed (e.g.
*.example.org). - Hostnames only - no
https://, no paths. - Save. The form's iframe will be blocked when loaded from any other host (modern browsers honour CSP
frame-ancestors).
Use this when you want to prevent another site from embedding your form (a competitor or a defunct partner). Leave it empty if you are sharing the snippet on multiple sites you control - simpler to maintain.
Troubleshooting
- The form does not appear at all. Two usual causes:
- The CMS's HTML editor stripped the
<script>tag (some rich-text editors do this aggressively). Paste into the raw HTML / code block, not the rich-text editor, so both the<div>and the<script>survive. - Your site has a custom Content Security Policy that blocks third-party iframes. Open your browser console: a message like "Refused to frame ... because it violates the following Content Security Policy directive" means your CMS's CSP needs to allow
frame-src https://yourorg.alltogether.giving. CSP is set by your own site, not by Together.
- The CMS's HTML editor stripped the
- The form loads but is cropped or stuck at a fixed height. The embed resizes itself to match its content as donors fill in fields. If it stays one height:
- Check your site's CSS is not constraining the iframe (e.g. a wrapping container with
overflow: hiddenand a fixed height). - A browser extension that blocks cross-origin
postMessage(rare, but happens with some hardening extensions) can prevent the resize. Try in a clean browser profile.
- Check your site's CSS is not constraining the iframe (e.g. a wrapping container with
- Apple Pay does not appear for a donor on Chrome. Expected. Apple Pay only ever renders in Safari on macOS or iOS, on any tier - that's an Apple constraint.
- Apple Pay still doesn't show after I set up my own domain. Open Settings -> Engage -> Custom Domains: both checklist steps need to be ticked green and the status must read Active. If step 2 won't tick, paste the file address (
https://yourcharity.org/.well-known/apple-developer-merchantid-domain-association) into your browser - it should download or display the file. A "not found" error means the file isn't at the right address yet; re-check the folder name (.well-known, with the leading dot) and that the file name has no extension. - Renaming the form broke my snippet. It should not - the snippet uses a stable token, not the form's slug. If the snippet stopped working after a rename, contact support.
What to do next
- Set up tracking codes for the embed at Set up tracking codes, so you can attribute embed donations to specific campaigns.
- Brand the embed to match your site at Brand your donate pages.
- Want Apple Pay on Safari donors who land on your own domain? Follow Apple Pay everywhere with your own domain above (Raise tier).