User guide layout (#5016)

- Modified CSS: font-size, colors, margins...

- Added an ArticleContent Component that will be used for the changelog
and user guide articles, which contains the styles for each titles,
paragraphs, images etc.

- Added link to User Guide in footer

- Added a UserGuideWarning Component: 

<img width="332" alt="Screenshot 2024-04-17 at 18 14 48"
src="https://github.com/twentyhq/twenty/assets/102751374/0f5c601b-a2c0-4c63-baeb-1990d65fc332">

- Added a UserGuideEditContent Component:

<img width="394" alt="Screenshot 2024-04-17 at 18 16 24"
src="https://github.com/twentyhq/twenty/assets/102751374/6c7c3bd4-c5bb-4d02-8f93-bd99bc30ce7b">

- Added a UserGuideLink Component (for usage in MDX to allow links to
open in new tab)

- Fixed table of content

- Made responsive

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Ady Beraud
2024-04-22 18:04:26 +03:00
committed by GitHub
parent 68662fa543
commit b9a7eb5a98
44 changed files with 730 additions and 272 deletions

View File

@ -5,23 +5,23 @@ icon: IconBrandZapier
image: /images/user-guide/placeholder-header.png
---
# About
## About
Integration with Zapier and Windmill is available for automating your workflows.
# Zapier
## Zapier
Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integrations), and automate your work. Here's how you can connect Twenty to 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. [Learn more about triggers and actions in Zapier.](https://zapier.com/how-it-works)
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'}}>
<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&amp;app_id=58479"
frameborder="0"
@ -40,4 +40,6 @@ Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integr
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
You can now continue creating your automation!
You can now continue creating your automation!
<ArticleEditContent articleTitle="integrations.mdx"></ArticleEditContent>