link-implement-frontend-connectlisted
Install: claude install-skill merge-api/merge-unified-skills
# Implement Frontend: Connect Button
Adds a single button that opens the Merge Link modal, exchanges the resulting token, and displays connected integrations with relink and delete actions. Step 4a of Merge Link.
## Prerequisites
- `link-implement-backend` complete (all four API endpoints available)
- **React**: `npm install @mergeapi/react-merge-link`
- **Vanilla JS**: `<script src="https://cdn.merge.dev/initialize.js"></script>` in `<head>`
## Before Proceeding
Confirm or gather the following before writing any code:
- **Category**: Which Merge category is this connect button for? (e.g. `hris`, `ats`, `crm`, `accounting`, `ticketing`, `filestorage`, `knowledgebase`)
- **Frontend SDK** *(React only)*: React SDK (`@mergeapi/react-merge-link`) or CDN+vanilla JS?
If invoked from `implementing-link`, both were answered in Step 1d — use that context. Otherwise, ask the user now.
## Implementation
### React SDK (`@mergeapi/react-merge-link`)
Use this path for React applications.
```jsx
import { useState, useEffect } from 'react';
import { useMergeLink } from '@mergeapi/react-merge-link';
function ConnectButton({ category, onConnected }) {
const [linkToken, setLinkToken] = useState(null);
const { open, isReady } = useMergeLink({
linkToken,
shouldSendTokenOnSuccessfulLink: true,
onSuccess: async (publicToken) => {
const res = await fetch('/api/merge/exchange-public-token', {
method: 'POST',
headers: { 'Content-Type': 'application/js