Migrated Developer Docs (#5683)
- Migrated developer docs to Twenty website - Modified User Guide and Docs layout to include sections and subsections **Section Example:** <img width="549" alt="Screenshot 2024-05-30 at 15 44 42" src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8"> **Subsection Example:** <img width="557" alt="Screenshot 2024-05-30 at 15 44 55" src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a"> - Created different components (Tabs, Tables, Editors etc.) for the mdx files **Tabs & Editor** <img width="665" alt="Screenshot 2024-05-30 at 15 47 39" src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531"> **Tables** <img width="698" alt="Screenshot 2024-05-30 at 15 57 39" src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a"> <img width="661" alt="Screenshot 2024-05-30 at 16 03 32" src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff"> - Created a crawler for Twenty Developers (now that it will be on the twenty website). Once this PR is merged and the website is re-deployed, we need to start crawling and make sure the index name is ‘twenty-developer’ - Added a dropdown menu in the header to access User Guide and Developers + added Developers to footer https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1 - Made new layout responsive Please fill in the information for each mdx file so that it can appear on its card, as well as in the ‘In this article’ section. Example with ‘Getting Started’ in the User Guide: <img width="786" alt="Screenshot 2024-05-30 at 16 29 39" src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea"> Example with info and sectionInfo filled in for 'Getting Started': <img width="620" alt="Screenshot 2024-05-30 at 16 33 57" src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11"> Please keep in mind that the images that are being used for Developers are the same as those found in User Guide and may not match the article. --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
@ -0,0 +1,87 @@
|
||||
---
|
||||
title: API and Webhooks
|
||||
info: Learn how to manage API keys and Webhooks in Twenty.
|
||||
icon: IconApi
|
||||
image: /images/user-guide/api/api.png
|
||||
sectionInfo: Learn how to connect Twenty to your other tools.
|
||||
---
|
||||
|
||||
## API Keys
|
||||
|
||||
API keys allow automated access to your CRM data, synchronize data with other systems, and create custom integrations or solutions.
|
||||
|
||||
For example, you can use them to retrieve details of a specific `Person` or `Company` record, such as their name or address.
|
||||
|
||||
### Generate an API key
|
||||
|
||||
1. Go to Settings in the sidebar on the left.
|
||||
2. Under Workspace, go to Developers. Here, you'll see a list of active keys that you or your team have created.
|
||||
3. To generate a new key, click on `+ Create key` at the top right.
|
||||
4. Give your API key a name, an expiration date, and a logo.
|
||||
5. Hit save to see your API key.
|
||||
6. Since the key is only visible once, make sure you store it somewhere safe.
|
||||
|
||||
<ArticleWarning>
|
||||
Since your API key gives access to sensitive information, you shouldn't share it with services you don't fully trust. If leaked, someone can use it maliciously. If your API key's security is compromised, immediately disable it and generate a new one.
|
||||
</ArticleWarning>
|
||||
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px' }}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/928786722?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
|
||||
### Regenerating an API key
|
||||
|
||||
To regenerate an API key, click on the key you want to regenerate. You'll then be able to see a button to regenerate the API key.
|
||||
|
||||
## Webhooks
|
||||
|
||||
Webhooks allow for immediate updates to your specified URL about changes or events related to your customer data.
|
||||
|
||||
For instance, a webhook can alert your system in real-time when someone creates a new person record or updates an existing note.
|
||||
|
||||
### Creating Webhooks
|
||||
|
||||
1. From Settings -> Developers, click `+` Create webhook.
|
||||
2. Enter your URL.
|
||||
3. Click Save.
|
||||
|
||||
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/928786708?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
### Deleting Webhooks
|
||||
|
||||
1. In Developers, find your webhook.
|
||||
2. Click on your webhook and press **Delete** to remove it. A confirmation popup will appear to confirm.
|
||||
|
||||
<ArticleEditContent articleTitle="api-webhooks.mdx"></ArticleEditContent>
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Emails
|
||||
info: Understand the concept of email synchronization in Twenty, including how to read synced emails, connect new mailboxes, and set sharing levels.
|
||||
icon: IconChecklist
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
sectionInfo: Learn how to connect Twenty to your other tools.
|
||||
---
|
||||
|
||||
## Email Synchronization
|
||||
|
||||
The system links emails from known contacts directly to their CRM records, keeping all communication up to date. It's important to avoid syncing emails from impersonal addresses such as team@ and support@, or from personal email providers like Gmail or Outlook, to ensure privacy and relevance.
|
||||
|
||||
### Reading an Email
|
||||
|
||||
Go to a specific `Person` or `Company` record page, then select the `Emails` tab to view synced emails instantly. Click on an email to open it.
|
||||
|
||||
<img src="/images/user-guide/emails/show-inbox.png" style={{width:'100%'}}/>
|
||||
|
||||
You can customize how you share and manage your emails through the settings.
|
||||
|
||||
## Mailbox Settings
|
||||
|
||||
### Connecting a New Mailbox
|
||||
|
||||
To connect a Gmail mailbox, go to `Settings` > `Accounts`, then click the `Add account` button. You can add several mailboxes to your account.
|
||||
|
||||
After connecting a mailbox, visit the `Emails` tab and select the desired mailbox to customize its settings.
|
||||
|
||||
The initial import may take some time, and it will be followed by automatic updates every ten minutes.
|
||||
|
||||
<img src="/images/user-guide/emails/connect-account.png" style={{width:'100%'}}/>
|
||||
|
||||
### Sharing Levels
|
||||
|
||||
From here, you can choose different levels of sharing for outbound and inbound emails:
|
||||
|
||||
- **Metadata Only**: Share only the basic information of the email (sender, recipient, date, and time).
|
||||
- **Subject and Metadata**: Share the subject line of the email along with the metadata.
|
||||
- **All Email Content**: Share the entire content of the email, including attachments.
|
||||
|
||||
<img src="/images/user-guide/emails/privacy-settings.png" style={{width:'100%'}}/>
|
||||
|
||||
### Contacts Auto-Creation
|
||||
|
||||
Contact auto-creation is a handy built-in feature. This default feature automatically adds email contacts not already in your CRM, boosting your contact list without any extra effort on your part. To manage this feature, go to `Settings` > `Email`. You can toggle it on or off. Remember, turning it off means that all new email contacts must be manually entered into the CRM.
|
||||
|
||||
<img src="/images/user-guide/emails/auto-creation.png" style={{width:'100%'}}/>
|
||||
|
||||
### Upcoming Features
|
||||
|
||||
Soon, you will have the capability to send emails, view attachments, and request access to email content that you're not allowed to read.
|
||||
|
||||
<ArticleEditContent articleTitle="emails.mdx"></ArticleEditContent>
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Integrations
|
||||
info: Learn how to connect Twenty to your other tools.
|
||||
icon: IconBrandZapier
|
||||
image: /images/user-guide/integrations/plug.png
|
||||
sectionInfo: Learn how to connect Twenty to your other tools.
|
||||
---
|
||||
|
||||
## About
|
||||
|
||||
Integration with Zapier and Windmill is available for automating your workflows.
|
||||
|
||||
## Zapier
|
||||
|
||||
Sync Twenty with 3000+ apps using <ArticleLink href="https://zapier.com/apps/twenty/integrations">Zapier</ArticleLink>, and automate your work. Here's how you can connect Twenty to Zapier:
|
||||
|
||||
1. Go to Zapier and log in.
|
||||
2. Click on `+ Create Zap` in the left sidebar.
|
||||
3. Choose the application you want to set as the trigger. A trigger refers to an event that starts the automation.
|
||||
4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. <ArticleLink href="https://zapier.com/how-it-works">Learn more about triggers and actions in Zapier.</ArticleLink>
|
||||
5. Once you choose the Twenty account that you want to use for your automation, you'll have to allow Zapier to access it by adding an API key. You can learn [how to generate your API key here.](/user-guide/api-webhooks)
|
||||
|
||||
6. Enter your API key and click on 'Yes, Continue to Twenty.'
|
||||
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/927913866?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
You can now continue creating your automation!
|
||||
|
||||
<ArticleEditContent articleTitle="integrations.mdx"></ArticleEditContent>
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Notes
|
||||
info: Explore how to efficiently manage notes within record pages in Twenty, including procedures for creating, formatting, commenting, saving, and deleting notes.
|
||||
icon: IconNote
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
sectionInfo: Learn how to connect Twenty to your other tools.
|
||||
---
|
||||
|
||||
Manage your record-linked notes efficiently using the powerful **Notes** feature. This guide walks through how to create, format, comment, and delete notes seamlessly within record pages.
|
||||
|
||||
## Creating Notes
|
||||
|
||||
Creating notes in the system is intuitive and dynamic. You can either:
|
||||
|
||||
- Use the search function by pressing `cmd/ctrl + k`, then select 'Create note' from the list of quick actions.
|
||||
- Go to a `Record page` and select `+` at the top right of the page, or go to the Notes tab and press the `New Note` button.
|
||||
|
||||
<img src="/images/user-guide/notes/add-note.png"style={{width:'100%'}}/>
|
||||
|
||||
|
||||
### Adding Content
|
||||
|
||||
Start typing directly or press '/' to add elements like headings, files, or images instantly.
|
||||
|
||||
### Format Content
|
||||
|
||||
You can format your notes right from the editor. Use markdown syntax, press the `/` key or click on the `+` icon on the editor to see the different block options, such as headings, tables, and lists. You can also attach images to your note.
|
||||
|
||||
Highlight the text to see more formatting options like bold, italics, and alignment options.
|
||||
|
||||
You can also change the background color and text color of each block to highlight important things in your note. To do so, hover over the block you want to format and click on the `⋮⋮` icon besides the `+` icon. Click on <b>Colors</b> to open up all color options for both the text and the background.
|
||||
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/927896302?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
## Viewing Notes
|
||||
|
||||
The system displays all your notes linked to a specific record under the Notes section on the corresponding `Record page`.
|
||||
|
||||
## Commenting
|
||||
**Comments**: Work together effectively with your team members by adding comments on notes for updates, feedback, or discussions.
|
||||
|
||||
## Saving And Deleting
|
||||
|
||||
All edits and additions to the note are automatically saved.
|
||||
|
||||
To delete a note:
|
||||
|
||||
1. Open the note you wish to remove by clicking on it from within the `Record page`.
|
||||
2. Click the trashcan icon located in the top right corner of the screen.
|
||||
|
||||
Please be aware that deleting a note is permanent and can't be undone.
|
||||
|
||||
<ArticleEditContent articleTitle="notes.mdx"></ArticleEditContent>
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
title: Tasks
|
||||
info: Understand how to effectively manage tasks in Twenty, including tasks creation, viewing, editing, marking as complete, and deletion.
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
sectionInfo: Learn how to connect Twenty to your other tools.
|
||||
---
|
||||
|
||||
Manage all tasks within your workspace using the **Tasks** feature. This guide will show you how to create and manage tasks, switch between upcoming and completed tasks, edit task details, and much more.
|
||||
|
||||
## Creating Tasks
|
||||
|
||||
Creating tasks in Twenty is seamless. You can either:
|
||||
|
||||
- Go to the `Tasks`tab and press the `+` button at the top right of the page.
|
||||
- Use the search function by pressing `cmd/ctrl + k`, then select 'Create task' from the list of quick actions.
|
||||
- Go to a `Record page` and press `+`at the top right of the page, or go to the Task tab and press the `Add Task`button.
|
||||
|
||||
<div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/928786754?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
### Adding Task Content
|
||||
|
||||
Once you've created a task you can enrich it with rich content, such as Titles, Bullet points or even images. To do so, press "/" and enter the desired command.
|
||||
|
||||
## Viewing Tasks
|
||||
|
||||
The **Tasks** page displays all your tasks across your workspace. Here you can:
|
||||
|
||||
- Filter tasks assigned to a specific user by clicking the button with your name at the top right of the screen.
|
||||
- Toggle between upcoming (`To do`) and completed (`Done`) tasks to see what needs attention and what you have accomplished.
|
||||
|
||||
You can also see tasks for a given Record on its `Record page`.
|
||||
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/927908280?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
## Editing Tasks
|
||||
|
||||
To edit a task, you should click on its card. This will open a side panel offering the following features:
|
||||
|
||||
- **Assignee and Due date**: Update the assignee or edit the due date.
|
||||
- **Comments**: Work together with your team members by adding comments on tasks to give updates or feedback.
|
||||
- **Automations**: Thanks to the API and Webhooks, you can also automate task creation triggered by specific activities in your workspace.
|
||||
|
||||
## Marking Tasks as Complete
|
||||
|
||||
To mark a task as complete:
|
||||
|
||||
1. Locate the task on your `Tasks` page or within a `Record page`.
|
||||
2. Click on the circle at the left of the task card - it will change to signify completion.
|
||||
3. The task status will automatically update to `Done`.
|
||||
|
||||
This procedure will help keep an updated record of your accomplishments.
|
||||
|
||||
<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/927910083?autoplay=1&loop=1&autopause=0&background=1&app_id=58479"
|
||||
frameBorder="0"
|
||||
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
|
||||
style={{
|
||||
position:'absolute',
|
||||
top:0,
|
||||
left:0,
|
||||
width:'100%',
|
||||
height:'100%',
|
||||
borderRadius: '16px',
|
||||
border:'2px solid black'
|
||||
}}
|
||||
title="Export data"
|
||||
></iframe>
|
||||
</div>
|
||||
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||
|
||||
## Delete a task
|
||||
|
||||
To permanently remove a task:
|
||||
|
||||
1. Open the task you want to delete by clicking on its card, either from the `Tasks` page or within a `Record page`.
|
||||
2. Click the trash icon located at the top right corner of the task details panel.
|
||||
|
||||
Please note, deleting a task is permanent and can't be undone. Consider marking tasks as `Done` if there is a chance you will need to refer to them again.
|
||||
|
||||
<ArticleEditContent articleTitle="tasks.mdx"></ArticleEditContent>
|
||||
Reference in New Issue
Block a user