> ## Documentation Index
> Fetch the complete documentation index at: https://docs.walletkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# External connectors

> Onboard users using their existing wallets via MetaMask, Coinbase, or WalletConnect

<Frame>
  <img width="300" noZoom src="https://mintcdn.com/walletkit-docs/7aZXvKfTnGcrV8aq/images/connect_external_connectors.png?fit=max&auto=format&n=7aZXvKfTnGcrV8aq&q=85&s=39c43edf9668fb98d3e30a94b26655e4" data-path="images/connect_external_connectors.png" />
</Frame>

Add customizable options to allow users to connect via other providers in the WalletKit Link modal. This is great for users who have existing wallets and don't wish to use email or social logins.

<Tabs>
  <Tab title="React">
    `WalletKitLinkProvider` accepts an `externalConnectors` prop that can be used to inject buttons with customizable behavior.

    ```typescript theme={null}
    const externalConnectors = [
      {
        id: 'metaMask',
        name: 'MetaMask',
        logo: ({className}: { className: string }) => <MetaMaskLogo className={className}/>,
        onClick: async () => {
          await window.ethereum.request({
            method: "eth_requestAccounts",
          });
        },
      }
    ]

    export function App() {
      return (
        <WalletKitLinkProvider link={..} externalConnectors={externalConnectors}>
        ...
        </WalletKitLinkProvider>;
      )
    }
    ```
  </Tab>

  <Tab title="wagmi">
    wagmi comes with an existing set of [connectors](https://wagmi.sh/react/api/connectors) that can be easily added to the WalletKit Link modal.

    <Steps>
      <Step title="Add connectors to wagmi">
        Add all the connectors you wish to support to your wagmi config.

        ```typescript theme={null}
        export const wagmiConfig = createConfig({
          chains: [..],
          transports: {..},
          connectors: [
            coinbaseWallet({
              appName: 'My Wagmi App',
            }),
            walletConnect({
              projectId: '<My Wallet Connect ID>',
            }),
            walletKitLink({
              projectId: '<My WalletKit Project ID>',
            }),
          ]
        });
        ```
      </Step>

      <Step title="Configure WalletKitLinkWagmiProvider">
        `WalletKitWagmiProvider` accepts an `externalConnectorIds` prop that can be used to filter and order which connectors should be displayed in the WalletKit Link modal.

        For example, to support MetaMask, Coinbase, and Wallet Connect (in that order), use the following:

        ```typescript theme={null}
        export function App() {
          return (
            <WagmiProvider config={wagmiConfig}>
              <QueryClientProvider client={queryClient}>
                <WalletKitLinkWagmiProvider
                  externalConnectorIds={[
                    "io.metamask",
                    "coinbaseWalletSDK",
                    "walletConnect",
                  ]}
                >
                  ...
                </WalletKitLinkWagmiProvider>
              </QueryClientProvider>
            </WagmiProvider>
          );
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>