---
title: "Widgets"
description: "The ready-made blocks you can embed in your product, the key or token each one opens with, and how to install them for React, React Native or any web page."
canonical: https://www.charitips.com/docs/widgets
---

# Widgets

> The ready-made blocks you can embed in your product, the key or token each one opens with, and how to install them for React, React Native or any web page.

Widgets are ready-made blocks of the Charitips interface that you embed in your product: choosing a charity, giving with a card, following a campaign, filling billing details. They load in a frame from Charitips and talk to the API for you. They are one way to integrate among others: use them whole, next to your own screens, or build everything yourself with the [API](https://www.charitips.com/docs/api-reference/llms.txt).

> **In short**
>
> - Install `@charitips/embed-react`, `@charitips/embed-react-native` or `@charitips/embed`, or load the script on any page.
> - Point them at `https://embed.sandbox.charitips.com` on the sandbox and `https://embed.charitips.com` on live.
> - The charity selection widget opens with the campaign's `publicKey`, which can be public. Admin and donor widgets need a token your server creates, valid one day.
> - Your API credentials never reach the browser: when a widget needs a donation created, it calls your server, which calls Charitips.

## The widgets

| Widget                                                                      | What it does                                                                         | Opens with                                                                                                          |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| [Charity selection](https://www.charitips.com/docs/widgets/charity_selection.md)                        | shows the campaign's charities and lets the person choose one                        | the campaign's `publicKey`                                                                                          |
| [Donor](https://www.charitips.com/docs/widgets/donor.md)                                                | the person gives with their own card, once or every month (B2C)                      | the `publicKey`, or a donor token from [Create a donor widget token](https://www.charitips.com/docs/api-reference/create-donor-widget-token.md) |
| [Admin](https://www.charitips.com/docs/widgets/admin.md)                                                | campaign metrics, fiscal receipts and the selection, for your customers or your team | an admin token from [Create an admin widget token](https://www.charitips.com/docs/api-reference/create-admin-widget-token.md)                   |
| [Billing](https://www.charitips.com/docs/guides/account-hierarchy-billing.md#or-embed-the-billing-form) | a business customer fills its billing details and payment method                     | the secret of a shareable billing link                                                                              |

Find a campaign's `publicKey` in the create response or in its information tab in the dashboard.

## Install

**React**

```bash
npm install @charitips/embed-react
```

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

export function App({ children }) {
  return (
    // https://embed.charitips.com on live
    <CharitipsProvider baseUrl="https://embed.sandbox.charitips.com">
      {children}
    </CharitipsProvider>
  );
}
```

**React Native**

```bash
npm install @charitips/embed-react-native
```

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

export function App({ children }) {
  return (
    // https://embed.charitips.com on live
    <CharitipsProvider baseUrl="https://embed.sandbox.charitips.com">
      {children}
    </CharitipsProvider>
  );
}
```

React Native has the charity selection widget only.

**JavaScript**

```bash
npm install @charitips/embed
```

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

Each `create…Widget` function takes the `baseUrl` and the `container` element to render in.

**HTML**

```html
<script src="https://unpkg.com/@charitips/embed"></script>
```

The script exposes the same functions on `window.charitips`, for example `window.charitips.createWidget`.

The libraries come with their TypeScript types.

## Options every widget shares

- `size`: `fillContainer` fills the parent element; `fitContent` grows with the content, for a widget inside a scrolling page. Admin and donor widgets default to `fitContent`, the others to `fillContainer`.
- `locale`: `fr` (default) or `en`, on every widget but billing.
- `id`: a name of your own, to tell apart several widgets on one page.

## Related

[Authentication](https://www.charitips.com/docs/get-started/authentication.md#tokens-for-the-widgets), [Charities and selections](https://www.charitips.com/docs/concepts/charities.md), [Your users give their own money](https://www.charitips.com/docs/use-cases/b2c.md).