---
title: "Admin widgets"
description: "Show live campaign metrics, fiscal receipts and the charities selection of an account inside your product or your back office, without opening the dashboard."
canonical: https://www.charitips.com/docs/widgets/admin
---

# Admin widgets

> Show live campaign metrics, fiscal receipts and the charities selection of an account inside your product or your back office, without opening the dashboard.

The admin widgets bring screens of the Charitips dashboard into your product: a campaign's live figures, the figures of all campaigns, the fiscal receipts, and the charities a campaign offers. Your customers stay in your product, and you build none of these screens. They also fit your own back office, for your team to follow your customers' campaigns.

> **In short**
>
> - Your server creates a token with [Create an admin widget token](https://www.charitips.com/docs/api-reference/create-admin-widget-token.md) for the `accountId` whose data the widget shows, yours or a child account's. It is valid one day.
> - One function or component per screen, chosen by `type`: `campaign-metrics`, `global-metrics`, `fiscal-receipts`, `charities-selection`.
> - `campaign-metrics` and `charities-selection` also take a `campaignId`.

## Create the token

```bash
curl -X POST https://api.sandbox.charitips.com/v1/authentication/widget \
  -H "Authorization: Bearer $CHARITIPS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "accountId": "<accountId>"
  }'
```

The token opens the data of that account only. With account hierarchy, pass the child's `accountId` to show a customer its own data; an `accountId` that is neither yours nor one of your children's answers `400`. Create a new token before the day is over when a screen stays open longer.

## Show a widget

**React**

```tsx
import { AdminCampaignMetricsWidget } from '@charitips/embed-react';

export function CampaignScreen({ token, campaignId }: { token: string; campaignId: string }) {
  return <AdminCampaignMetricsWidget token={token} campaignId={campaignId} />;
}
```

**JavaScript**

```javascript
import { createAdminWidget } from '@charitips/embed';

createAdminWidget({
  baseUrl: 'https://embed.sandbox.charitips.com', // https://embed.charitips.com on live
  container: document.querySelector('#campaign'),
  token: '<admin widget token>',
  type: 'campaign-metrics',
  campaignId: '<campaignId>',
});
```

| `type`                | React component                 | What it shows                                                      |
| --------------------- | ------------------------------- | ------------------------------------------------------------------ |
| `campaign-metrics`    | `AdminCampaignMetricsWidget`    | the live figures of one campaign, with `campaignId`                |
| `global-metrics`      | `AdminGlobalMetricsWidget`      | the figures of all the account's campaigns                         |
| `fiscal-receipts`     | `AdminFiscalReceiptsWidget`     | the account's fiscal receipts, ready to download                   |
| `charities-selection` | `AdminCharitiesSelectionWidget` | the charities a campaign offers, to change them, with `campaignId` |

They also take the shared options: see [Options every widget shares](https://www.charitips.com/docs/widgets.md#options-every-widget-shares).

## Campaign metrics

_Interactive component `<AdminWidget />`: open the page in a browser to use it._

## All campaigns

_Interactive component `<AdminWidget />`: open the page in a browser to use it._

## Fiscal receipts

_Interactive component `<AdminWidget />`: open the page in a browser to use it._

## Charities of a campaign

_Interactive component `<AdminWidget />`: open the page in a browser to use it._

## Related

[Account hierarchy](https://www.charitips.com/docs/concepts/account-hierarchy.md#widgets), [Billing and fiscal receipts](https://www.charitips.com/docs/concepts/billing-and-receipts.md), [Widgets](https://www.charitips.com/docs/widgets.md).