# Configure o Connect Widget do Pluggy em seu aplicativo

O **Connect Widget** é a solução frontend plug & play da Pluggy que permite aos usuários conectar suas contas financeiras em um fluxo passo a passo, para que você só precise se preocupar em interagir com seus dados em vez de se preocupar com fluxos de login complicados.

> Confira nossa documentação do Pluggy Connect Widget [docs](/docs/pluggy-connect-introduction) para mais informações!

## Criar um endpoint ConnectToken

Primeiro, você precisará configurar um endpoint em seu backend que será responsável por obter e fornecer um `Connect Token`. Este token será usado para conceder autorização ao PluggyConnect para acessar a API da Pluggy em nome de sua Aplicação.

Esse processo deve ser feito em seu backend, uma vez que o [Create ConnectToken](/reference/connect-token-create) (`POST /connect_token`) requer autenticação na API da Pluggy (obtendo uma chave de API válida, usando o `CLIENT_ID` e `CLIENT_SECRET` de sua Aplicação).

### Início rápido com Vercel

Se você usar **Vercel**, fornecemos uma solução de um clique que você pode usar imediatamente, implantando este endpoint diretamente do nosso [exemplo em nossos Quickstarts](https://github.com/pluggyai/quickstart/tree/master/examples/vercel-node-connect-token) repositório.

Você só precisará configurar as variáveis de ambiente `PLUGGY_CLIENT_ID` e `PLUGGY_CLIENT_SECRET`.

Pronto! Agora, você pode buscar seu Connect Token em `https://YOUR-APP-NAME.vercel.app/api/token`.

**Dica:** você também pode especificar **opções** do endpoint Connect Token, como especificar **clientUserId**, chamando este endpoint com `POST` em vez de `GET`, assim:

```tsx
// substitua YOUR-APP-NAME pela sua URL implantada
fetch('https://YOUR-APP-NAME.vercel.app/api/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    options: { clientUserId: 'user-123@mail.com' }
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  // o console irá registrar:
  // {"accessToken":"eyJhbGciOiJSUzI1NiIsInR5c... "}
  .catch(error => console.error(error));
```

## Configurar e Lançar PluggyConnect

Com seu endpoint Connect Token implantado, você está pronto para integrar o PluggyConnect em sua aplicação do lado do cliente.

### Revise nossos exemplos de Início Rápido

Temos um conjunto de exemplos [Frontend documentados e totalmente funcionais](https://github.com/pluggyai/quickstart/tree/master/frontend) que você pode clonar e começar a usar imediatamente e lançar nossa interface Pluggy Connect. Você só precisa substituir a URL do endpoint ConnectToken pela sua.

Você encontrará exemplos com frameworks e plataformas populares, como:

- React
- NextJS
- HTML+JS simples
- Flutter
- ReactNative
- iOS

### Opções e Configurações

Para personalizar melhor sua experiência, confira as diferentes configurações disponíveis em [nossa documentação](/docs/environments-and-configurations).

Você encontrará opções para filtrar tipos de conectores, definir o idioma do widget e se inscrever nos diferentes callbacks de eventos que seriam acionados com base em diferentes ações e eventos do usuário.