---
updatedAt: 2025-01-10T10:03:14.000Z
agentTools:
  projectIndex: https://docs.thegivingblock.com/llms.txt
---

# 🏠 Embedded donation form

You can easily embed The Giving Block donation form directly into your own donation tool, rather than building a native API integration. This option provides the same benefits as a native integration (including webhook notifications) while saving build time.

# Get authenticated

Authenticate your application (see [Authentication](https://docs.thegivingblock.com/reference/authentication))

Once authenticated, store access and refresh tokens.

# Get code snippet to embed donation form

There are 2 options how you can get it:

* Use [GetOrganizationById](https://docs.thegivingblock.com/reference/get_v1-organization-id) endpoint. In the response, you will find the field **widgetCode** which contains options:

  * **script** - The script will embed the donation form directly into your own tool.

  <Image align="center" width="50% " src="https://files.readme.io/dc87269-image.png" />

  * **popup** - this option will insert a button within your donation tool - clicking on it will open the donation form as a pop-up

  <Image align="center" width="300px" src="https://files.readme.io/8c888e2e42dfafbc04ce1b09b340290289afe48dfd5bf596f15995d79b767a1b-image.png" />

  <br />

<Image align="center" width="300px" src="https://files.readme.io/803d132f1575deae34074d6d707490001c104a864372ec8f57d4c77623e44200-image.png" />

* Use [GetWidgetSnippet](https://docs.thegivingblock.com/reference/post_v1-organization-id-widget-snippet) endpoint.

  * Use **script** in the endpoint response in order to display the embedded widget. The first screen shows the old design pf donation form UI(uiVersion=1). The second screen shows the latest UI (uiVersion=2).

  <Image align="center" width="3px" src="https://files.readme.io/b707d41d955c71321491a090f22093cc26ff1daf31403ddfdab1e89c231597ef-image.png" />

  <Image align="center" width="300px" src="https://files.readme.io/94dbc87381f4cca5bfc46a7f2097477b4ce6b678f9c99a18fd9ca084d4b93c83-image.png" />

  <br />

  * Example how what the trigger button looks like. depending on the passed uiVersion, a **popup** will contain either an old or a new UI:

  <Image align="center" width="300px" src="https://files.readme.io/e78bc31aa0e8cdb9118c7b6f337d93edd391d802ee2328983208b076d1387854-image.png" />

  <Image align="center" width="300px" src="https://files.readme.io/803d132f1575deae34074d6d707490001c104a864372ec8f57d4c77623e44200-image.png" />

  This way is useful if you need to customize button text or style of the form.\
  Please note, if you want to embed more than 1 donation form on the same page, then you need to provide a unique **scriptId** and **button.id** (in case you use popup option)

# Embed code snippet

Add Donation Form code snippet which was obtained on previous step into your donation tool.

> 📘 Please contact <integrations@thegivingblock.com> to get options for onboarding non-profit organisation into our system and enabling card, crypto, stock and DAF donations

# Webhook notifications

A webhook notification will be sent once donation is completed. Please see [Webhook notifications](https://docs.thegivingblock.com/docs/todo-1) documentation part for more details.

Once you received webhook notification you can use UUID provided in webhook and use [GetTransactionByUuid](https://docs.thegivingblock.com/reference/get_v1-transaction-uuid) endpoint to get transaction details, including donor information.