Docs - Update getting started (#19976)
- Add product tour video - Add new graphic design assets --------- Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: Etienne <etiennejouan@users.noreply.github.com>
This commit is contained in:
Etienne
@@ -4,12 +4,16 @@ description: How Twenty uses AI to enhance your CRM experience.
|
||||
icon: "robot"
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Twenty integrates AI directly into your CRM — not as a gimmick, but as a tool that works within your data model and permission system.
|
||||
|
||||
## AI Chatbot
|
||||
|
||||
Ask questions about your data in natural language. The AI chatbot can query your CRM records, summarize information, and help you find what you're looking for without building complex filters.
|
||||
|
||||
<VimeoEmbed videoId="1185511734" title="AI chatbot" />
|
||||
|
||||
## AI Agents
|
||||
|
||||
AI agents go beyond chat — they can execute multi-step tasks autonomously:
|
||||
|
||||
@@ -4,6 +4,7 @@ icon: "cube"
|
||||
description: Extend Twenty with code — custom objects, server-side logic, UI components, and AI agents, all as TypeScript packages.
|
||||
---
|
||||
|
||||
|
||||
Most CRMs give you a config panel. Twenty gives you a platform. Apps are how developers extend Twenty beyond what the UI offers — defining data models, server-side logic, UI components, and AI capabilities as code, then deploying them to one or more workspaces.
|
||||
|
||||
## Why apps exist
|
||||
|
||||
@@ -4,7 +4,10 @@ description: Track performance and visualize your CRM data with custom dashboard
|
||||
icon: "chart-bar"
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Dashboards give you real-time visibility into your business metrics — pipeline health, team performance, revenue trends, and anything else you want to track.
|
||||
<VimeoEmbed videoId="1185511768" title="Dashboard" />
|
||||
|
||||
## Widgets
|
||||
|
||||
|
||||
@@ -4,6 +4,8 @@ description: Understand how Twenty structures your data with objects, fields, an
|
||||
icon: "database"
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Everything in Twenty is built around **objects** and **fields** — the building blocks of your data model.
|
||||
|
||||
## Objects
|
||||
@@ -41,3 +43,5 @@ Unlike traditional CRMs where you're limited to pre-defined fields on pre-define
|
||||
<Card title="Deep dive into the Data Model" icon="arrow-right" href="/user-guide/data-model/overview">
|
||||
Full reference on objects, fields, relations, and how to configure them.
|
||||
</Card>
|
||||
|
||||
<VimeoEmbed videoId="1185511827" title="Data model" />
|
||||
|
||||
@@ -4,6 +4,8 @@ description: How to navigate, browse, and view records in Twenty.
|
||||
icon: "table-columns"
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## The main layout
|
||||
|
||||
The center of the screen is where your records live — people, companies, opportunities, tasks, notes, dashboards, workflows, and any custom objects. You view, edit, and delete records here, and create new views.
|
||||
@@ -66,3 +68,6 @@ When you open a record, the detail page is built from configurable **tabs** and
|
||||
<Card title="Full Layout guide" icon="arrow-right" href="/user-guide/layout/overview">
|
||||
Navigation, views, record pages — detailed reference and how-tos.
|
||||
</Card>
|
||||
|
||||
<VimeoEmbed videoId="1185511790" title="Layout" />
|
||||
|
||||
|
||||
@@ -4,8 +4,13 @@ description: Automate your business processes with Twenty's visual workflow buil
|
||||
icon: "bolt"
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Workflows let you automate repetitive tasks and connect Twenty to external tools — without writing code (though you can if you want to).
|
||||
|
||||
<VimeoEmbed videoId="1185511711" title="Workflow" />
|
||||
|
||||
|
||||
## How workflows work
|
||||
|
||||
Every workflow has three parts:
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Why Twenty
|
||||
icon: "heart"
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
You've been choosing between software that's easy to start but impossible to change, and software that's flexible but takes months to set up. Twenty is the third option: **a production-ready CRM you can reshape as you go.**
|
||||
|
||||
@@ -12,17 +13,20 @@ You've been choosing between software that's easy to start but impossible to cha
|
||||
Twenty is a platform you can build on, not a product you configure.
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Built for Agents" icon="robot">
|
||||
<Card img="/images/user-guide/halftone/ai.png">
|
||||
<CardTitle>Built for Agents</CardTitle>
|
||||
Agents operate inside your data model with real permissions. Skills, Tools, MCP.
|
||||
</Card>
|
||||
<Card title="Secured Extensibility" icon="shield">
|
||||
<Card img="/images/user-guide/halftone/permissions.png">
|
||||
<CardTitle>Secured Extensibility</CardTitle>
|
||||
The flexibility of vibe-coded tools on secured foundations.
|
||||
</Card>
|
||||
<Card title="Modern Stack" icon="code">
|
||||
<Card img="/images/user-guide/halftone/dev-api.png">
|
||||
<CardTitle>Modern Stack</CardTitle>
|
||||
React, TypeScript. Your team already knows how to extend Twenty. No proprietary languages, no gatekeeping.
|
||||
</Card>
|
||||
|
||||
<Card title="No Lock-In" icon="lock-open">
|
||||
<Card img="/images/user-guide/halftone/dev-self-host.png">
|
||||
<CardTitle>No Lock-In</CardTitle>
|
||||
Open-source core, self-hostable, export your data anytime.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -4,84 +4,67 @@ description: A tour of everything Twenty can do — from custom data models to A
|
||||
icon: "star"
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
Twenty is a full-featured CRM platform. Here's what you can build with it.
|
||||
|
||||
## Custom Data Model
|
||||
<CardGroup cols={2}>
|
||||
<Card href="/user-guide/data-model/overview" img="/images/user-guide/halftone/data-model.png">
|
||||
<CardTitle>Custom Data Model</CardTitle>
|
||||
Define the exact data structure your business needs.
|
||||
<br />Create custom objects, add custom fields with 20+ field types, and build relationships between any objects.
|
||||
</Card>
|
||||
|
||||
Define the exact data structure your business needs. Create custom objects (beyond the standard Companies, People, and Opportunities), add custom fields with 20+ field types, and build relationships between any objects.
|
||||
<Card href="/user-guide/views-pipelines/overview" img="/images/user-guide/halftone/layout.png">
|
||||
<CardTitle>Views & Pipelines</CardTitle>
|
||||
Switch between table views, kanban boards, and calendar views.
|
||||
<br />Filter with AND/OR logic, sort by multiple fields, group records, and save custom views.
|
||||
</Card>
|
||||
|
||||
<Card title="Learn more about the Data Model" icon="database" href="/user-guide/data-model/overview">
|
||||
Objects, fields, relations — fully customizable to your business.
|
||||
</Card>
|
||||
<Card href="/user-guide/workflows/overview" img="/images/user-guide/halftone/workflows.png">
|
||||
<CardTitle>Workflows & Automation</CardTitle>
|
||||
Automate any business process without writing code.
|
||||
<br />Trigger workflows on record changes, schedules, manual actions, or incoming webhooks.
|
||||
</Card>
|
||||
|
||||
## Views & Pipelines
|
||||
<Card href="/user-guide/calendar-emails/overview" img="/images/user-guide/halftone/calendar-emails.png">
|
||||
<CardTitle>Calendar & Email Sync</CardTitle>
|
||||
Connect your Google Workspace or Microsoft 365 account.
|
||||
<br />Emails and calendar events automatically appear on the relevant CRM records.
|
||||
</Card>
|
||||
|
||||
See your data the way you want. Switch between table views, kanban boards, and calendar views. Filter with AND/OR logic, sort by multiple fields, group records, and save custom views for your team.
|
||||
<Card href="/user-guide/ai/overview" img="/images/user-guide/halftone/ai.png">
|
||||
<CardTitle>AI</CardTitle>
|
||||
AI agents that work autonomously within your CRM — answering questions, enriching records, and executing multi-step tasks within your permission model.
|
||||
</Card>
|
||||
|
||||
<Card title="Explore Views & Pipelines" icon="table" href="/user-guide/views-pipelines/overview">
|
||||
Table, kanban, calendar — all with powerful filtering and sorting.
|
||||
</Card>
|
||||
<Card href="/user-guide/dashboards/overview" img="/images/user-guide/halftone/dashboards.png">
|
||||
<CardTitle>Dashboards & Reporting</CardTitle>
|
||||
Build custom dashboards with real-time widgets.
|
||||
<br />Track pipeline metrics, team performance, and business KPIs with configurable charts and filters.
|
||||
</Card>
|
||||
|
||||
## Workflows & Automation
|
||||
<Card href="/user-guide/permissions-access/overview" img="/images/user-guide/halftone/permissions.png">
|
||||
<CardTitle>Permissions & Access Control</CardTitle>
|
||||
Role-based access control at every level — objects, fields, and individual records.
|
||||
<br />Configure SSO with SAML or OIDC. Audit logs track who did what.
|
||||
</Card>
|
||||
|
||||
Automate any business process without writing code. Trigger workflows on record changes, schedules, manual actions, or incoming webhooks. Chain together actions like creating records, sending emails, calling APIs, running custom JavaScript, and branching with conditions.
|
||||
<Card href="/developers/extend/api" img="/images/user-guide/halftone/dev-api.png">
|
||||
<CardTitle>API & Extensibility</CardTitle>
|
||||
A developer-first API that adapts to your custom data model.
|
||||
<br />Both GraphQL and REST endpoints, with auto-generated documentation per workspace.
|
||||
</Card>
|
||||
|
||||
<Card title="Build Workflows" icon="bolt" href="/user-guide/workflows/overview">
|
||||
Triggers, actions, branches, and integrations — all visual.
|
||||
</Card>
|
||||
<Card href="/user-guide/data-migration/overview" img="/images/user-guide/halftone/data-migration.png">
|
||||
<CardTitle>Data Import & Export</CardTitle>
|
||||
Import data from CSV files or via API.
|
||||
<br />Field mapping, duplicate detection, and error handling built in. Export your data anytime — no lock-in.
|
||||
</Card>
|
||||
|
||||
## Calendar & Email Sync
|
||||
|
||||
Connect your Google Workspace or Microsoft 365 account. Emails and calendar events automatically appear on the relevant CRM records. Send emails directly from Twenty and track all communication history.
|
||||
|
||||
<Card title="Set up Calendar & Emails" icon="envelope" href="/user-guide/calendar-emails/overview">
|
||||
Sync mailboxes, track activity, send from Twenty.
|
||||
</Card>
|
||||
|
||||
## AI
|
||||
|
||||
Twenty integrates AI agents that can work autonomously within your CRM — answering questions about your data, enriching records, and executing multi-step tasks. AI works within your permission model so it only accesses what it should.
|
||||
|
||||
<Card title="Explore AI" icon="robot" href="/user-guide/ai/overview">
|
||||
AI chatbot, autonomous agents, and smart workflows.
|
||||
</Card>
|
||||
|
||||
## Dashboards & Reporting
|
||||
|
||||
Build custom dashboards with real-time widgets. Track pipeline metrics, team performance, and business KPIs. Configure chart types, date ranges, and filters to get the exact view you need.
|
||||
|
||||
<Card title="Build Dashboards" icon="chart-bar" href="/user-guide/dashboards/overview">
|
||||
Widgets, charts, and real-time analytics.
|
||||
</Card>
|
||||
|
||||
## Permissions & Access Control
|
||||
|
||||
Role-based access control at every level — objects, fields, and individual records. Configure SSO with SAML or OIDC. Audit logs track who did what.
|
||||
|
||||
<Card title="Configure Permissions" icon="lock" href="/user-guide/permissions-access/overview">
|
||||
Roles, SSO, object/field/row-level security.
|
||||
</Card>
|
||||
|
||||
## API & Extensibility
|
||||
|
||||
A developer-first API that adapts to your custom data model. Both GraphQL and REST endpoints, with auto-generated documentation per workspace. Build custom apps, connect via webhooks, or use Zapier.
|
||||
|
||||
<Card title="Explore the API" icon="plug" href="/developers/extend/api">
|
||||
GraphQL, REST, webhooks, and custom apps.
|
||||
</Card>
|
||||
|
||||
## Data Import & Export
|
||||
|
||||
Import data from CSV files or via API. Field mapping, duplicate detection, and error handling built in. Export your data anytime — no lock-in.
|
||||
|
||||
<Card title="Migrate Your Data" icon="cloud-arrow-up" href="/user-guide/data-migration/overview">
|
||||
CSV import, API import, and migration from other CRMs.
|
||||
</Card>
|
||||
|
||||
## Self-Hosting
|
||||
|
||||
Run Twenty on your own infrastructure with a single Docker Compose command. Full control over your data, updates on your schedule, and no per-seat cloud fees.
|
||||
|
||||
<Card title="Self-Host Twenty" icon="server" href="/developers/self-host/self-host">
|
||||
Docker Compose, configuration, and upgrade guides.
|
||||
</Card>
|
||||
<Card href="/developers/self-host/self-host" img="/images/user-guide/halftone/dev-self-host.png">
|
||||
<CardTitle>Self-Hosting</CardTitle>
|
||||
Run Twenty on your own infrastructure with a single Docker Compose command.
|
||||
<br />Full control over your data, updates on your schedule.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -20,7 +20,9 @@ import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
<VimeoEmbed videoId="927066829" title="Creating a workspace" />
|
||||
<VimeoEmbed videoId="1185227242" title="Creating a workspace" />
|
||||
|
||||
|
||||
|
||||
|
||||
## Configure your workspace
|
||||
@@ -32,7 +34,7 @@ Once you're in, three steps to make Twenty yours:
|
||||
Go to **Settings → Accounts** and connect your Google or Microsoft account. Twenty will import your emails and calendar events, and auto-create contacts from interactions. Using another provider? You can add mailboxes via SMTP or calendars via CalDAV from the same page.
|
||||
|
||||
<Note>Start here — connecting a mailbox gives your team immediate value with real data before you customize anything else.</Note>
|
||||
|
||||
<VimeoEmbed videoId="1185416821" title="Connect your mailbox" />
|
||||
### 2. Shape your data model
|
||||
|
||||
Go to **Settings → Data Model** to create custom objects and fields. A few things to know:
|
||||
@@ -42,12 +44,14 @@ Go to **Settings → Data Model** to create custom objects and fields. A few thi
|
||||
- You can deactivate standard fields/objects you don't need, and hide fields from views without deleting them.
|
||||
|
||||
[Data Model reference →](/user-guide/data-model/overview)
|
||||
<VimeoEmbed videoId="1185416793" title="Shape your data model" />
|
||||
|
||||
### 3. Import your data
|
||||
|
||||
Use the Command Menu (`Cmd+K` / `Ctrl+K`) to import People, Companies, Opportunities, or any custom object via CSV. Download the sample file first to see the expected format. Limit files to 10k records and deduplicate emails/domains before importing.
|
||||
|
||||
[Data Migration guide →](/user-guide/data-migration/overview)
|
||||
<VimeoEmbed videoId="1185416775" title="Import your data" />
|
||||
|
||||
## Next steps
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const VimeoEmbed = ({ videoId, title = 'Video' }) => (
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px'}}>
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px', borderRadius: '16px', overflow:'hidden', border:'2px solid black'}}>
|
||||
<iframe
|
||||
src={`https://player.vimeo.com/video/${videoId}?autoplay=1&loop=1&autopause=0&background=1&app_id=58479`}
|
||||
frameBorder="0"
|
||||
@@ -10,8 +10,7 @@ export const VimeoEmbed = ({ videoId, title = 'Video' }) => (
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
transform:'scale(1.1)',
|
||||
}}
|
||||
title={title}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user