Configuration

Admin users can already customize the application domain-specific data (e.g., deal stages, note statuses, etc.) via the Settings page. However, developers can go further and define the defaults for these data by configuring the <CRM> component in src/App.tsx.

Other customizations require changes to the source code.

The <CRM> component

The entry point of the frontend application is the src/App.tsx file. By default, this file simply renders the <CRM> component, which is the root component of Atomic CRM.

import { CRM } from "@/components/atomic-crm/root/CRM";

const App = () => <CRM />;

export default App;

<CRM> accepts various props to customize the application domain and look and feel, so the App.tsx file is the best place to configure your CRM.

For instance, the following code snippet shows how to customize the CRM application domain-specific data.

import { CRM } from "@/components/atomic-crm/root/CRM";

const App = () => (
    <CRM
        companySectors={[
            { value: 'technology', label: 'Technology' },
            { value: 'finance', label: 'Finance' },
        ]}
        dealCategories={[
            { value: 'copywriting', label: 'Copywriting' },
            { value: 'design', label: 'Design' },
        ]}
        dealPipelineStatuses={['won']}
        dealStages={[
            { value: 'opportunity', label: 'Opportunity' },
            { value: 'proposal-sent', label: 'Proposal Sent' },
            { value: 'won', label: 'Won' },
            { value: 'lost', label: 'Lost' },
        ]}
        noteStatuses={[
            { value: 'cold', label: 'Cold', color: '#7dbde8' },
            { value: 'warm', label: 'Warm', color: '#e8cb7d' },
            { value: 'hot', label: 'Hot', color: '#e88b7d' },
        ]}
        taskTypes={[
            { value: 'call', label: 'Call' },
            { value: 'email', label: 'Email' },
            { value: 'meeting', label: 'Meeting' },
        ]}
    />
);

export default App;

<CRM> accepts the following props:

Props	Description	Type
companySectors	The list of company sectors used in the application.	LabeledValue[]
darkTheme	The theme to use when the application is in dark mode.	RaThemeOptions
dealCategories	The categories of deals used in the application.	LabeledValue[]
dealPipelineStatuses	The statuses of deals in the pipeline used in the application	string[]
dealStages	The stages of deals used in the application.	DealStage[]
lightTheme	The theme to use when the application is in light mode.	RaThemeOptions
logo	The logo used in the CRM application.	string
noteStatuses	The statuses of notes used in the application.	NoteStatus[]
taskTypes	The types of tasks used in the application.	LabeledValue[]
title	The title of the CRM application.	string

Disabling Telemetry

In production, atomic-crm applications send an anonymous request on mount to a telemetry server operated by Marmelab. You can see this request by looking at the Network tab of your browser DevTools:

https://atomic-crm-telemetry.marmelab.com/atomic-crm-telemetry

The only data sent to the telemetry server is the admin domain (e.g. “example.com”) - no personal data is ever sent, and no cookie is included in the response. The atomic-crm team uses these domains to track the usage of the framework.

You can opt out of telemetry by simply adding disableTelemetry to the <CRM> component:

import { CRM } from "@/components/atomic-crm/root/CRM";

const App = () => <CRM disableTelemetry />;

export default App;