@clyr/embed

Drop-in SDK for embedding Clyr expense management into your platform. Provides a React component and a vanilla JS API.

Install

npm install @clyr/embed

To get an API key, contact us at clyr.io.

How it works

1. Your backend creates a session using your API key (never expose the API key to the browser)
2. Your frontend receives the session token and passes it to the SDK

Backend: create a session

const response = await fetch('https://YOUR_CLYR_API_HOST/api/auth/sessions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    companyId: 'your-company-id',
    userId: 'your-user-id',
  }),
});

const { sessionToken } = await response.json();
// Pass sessionToken to your frontend

Frontend: React

import { ClyrIframe } from '@clyr/embed';

function ExpenseManagement({ sessionToken }) {
  return (
    <ClyrIframe
      config={{ sessionToken }}
      callbacks={{
        onReady: () => console.log('Clyr loaded'),
        onError: (err) => console.error(err),
      }}
      width="100%"
      height="600px"
    />
  );
}

You can also import from the dedicated entry point:

import { ClyrIframe } from '@clyr/embed/react';

Frontend: Vanilla JS

<div id="clyr-embed" style="width: 100%; height: 600px;"></div>

<script type="module">
  import { createClyrEmbed } from '@clyr/embed/vanilla';

  const embed = createClyrEmbed(
    { sessionToken: 'SESSION_TOKEN_FROM_YOUR_BACKEND' },
    {
      onReady: () => console.log('Clyr loaded'),
      onError: (err) => console.error(err),
    }
  );

  embed.mount('#clyr-embed');
</script>

Configuration

IframeConfig

| Property | Type | Required | Description | | -------------- | ------------------------------------------ | -------- | ------------------------------ | | sessionToken | string | Yes | Session token from your backend | | theme | 'light' \| 'dark' | No | Color theme | | defaultTab | 'transactions' \| 'cards' \| 'settings' | No | Tab to show on load |

IframeCallbacks

| Callback | Signature | Description | | --------------------- | ---------------------------------- | ---------------------------------- | | onReady | () => void | Iframe finished loading | | onError | (error: string) => void | An error occurred | | onResize | (height: number) => void | Iframe content height changed | | onTransactionSelect | (transactionId: string) => void | User selected a transaction | | onCardSelect | (cardId: string) => void | User selected a card | | onOverlayOpen | () => void | A drawer/overlay opened | | onOverlayClose | () => void | A drawer/overlay closed |

Entry Points

| Import path | Contents | | -------------------- | ------------------------------------------------- | | @clyr/embed | Everything (React + vanilla + types) | | @clyr/embed/react | ClyrIframe component + types | | @clyr/embed/vanilla | ClyrEmbed, createClyrEmbed, ClyrIframeManager + types |

License

UNLICENSED