Skip to main content

Main Component

The main component is the easiest and fastest way to integrate brokerize functionality into your application. It's a single, comprehensive component that encapsulates all brokerize features in one container, requiring minimal setup and configuration.

Why Choose the Main Component?​

The main component is recommended for most use cases because it:

  • Simplifies integration - Just one component to add to your HTML/site
  • Provides complete functionality - All brokerize features work out of the box
  • Reduces development time - No need to manage multiple components
  • Handles complex interactions - Internal component communication is managed automatically
  • Supports full theming - Complete visual customization through theme configuration

The trade-off is less granular control over individual UI elements and their positioning, but for most applications, the main component provides sufficient flexibility through theming.

Using the Main Component​

1. Installation​

npm install @brokerize/elements @brokerize/client

2. Setup Brokerize Client​

First, create a brokerize client instance:

import { Brokerize } from '@brokerize/client';

const brokerizeClient = new Brokerize({
    basePath: 'https://api-preview.brokerize.com', // Use preview environment
    clientId: '<YOUR-API-CLIENT-ID>',
    fetch: globalThis.fetch.bind(globalThis),
    createAbortController: () => new AbortController(),
    createWebSocket: (url, protocol) => new WebSocket(url, protocol)
});

3. Create API Context​

const user = await brokerizeClient.createGuestUser();
const apiCtx = brokerizeClient.createAuthorizedContext(user);

4. Add Main Component to Your HTML​

<brokerize-main [apiCtx]="apiCtx" [theme]="theme"></brokerize-main>

That's it! The main component will render the complete brokerize interface with all functionality available.

5. Configure Theme (Optional)​

const theme = {
    layout: 'columns',
    logoStyle: 'light',
    tokens: {
        'zl-primary-color': '#3870db',
        'zl-primary-bg-color': 'white',
        'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
        'zl-outline-color': 'var(--zl-color-primary-light)',
        'zl-default-text-color': 'var(--zl-color-gray-darkest)',
        'zl-success-color': '#3db969',
        'zl-error-color': '#ff3e3e',
        // ... additional theme tokens
    }
};

More information, examples and a live demo available in the theming article

Custom Components Approach​

If you need more granular control over the user interface, you can use individual brokerize components separately. This approach requires more development work but offers maximum customization flexibility.

When to Use Custom Components​

  • Custom layouts - When you need specific positioning of UI elements
  • Selective functionality - When you only need certain brokerize features
  • Advanced integration - When integrating deeply with existing UI frameworks
  • Custom user flows - When you need to control the exact user journey

Recommendation​

Start with the main component for your initial integration. It provides a complete, working solution that you can deploy quickly. You can always migrate to custom components later if you discover specific customization needs that the main component cannot address through theming.

The main component covers the vast majority of use cases and significantly reduces development complexity while maintaining full functionality and extensive theming capabilities.