fixes (#16990)
This commit is contained in:
Syed Ali Shahbaz authored and 
GitHub committed
1 parent
c4cdba1015
commit
7928933852
7 files changed
+57
-135
No files matched your search
@@ -1,25 +0,0 @@
|
||||
---
|
||||
title: "Adding your first app"
|
||||
---
|
||||
|
||||
Head over to the **apps** page, where you'll find our app store. We suggest firstly adding a calendar integration, then optionally a video conferencing platform, and then try out the other apps.
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/watch?v=V6mwvgcAxi0"
|
||||
title="Adding your first app"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
|
||||
Find the app you'd like to install, and either click **Install** in the top right of that app's card to add it right away, or click on the app's card to view more details.
|
||||
|
||||
In the details page you can read more about each app, then click **Install** in the top right of the page to add it to your account.
|
||||
|
||||
<img src="./images/i1599x929-tUttNKwBum0Z_p1vwkt.png"
|
||||
legend="The app details page for Google calendar"
|
||||
/>
|
||||
|
||||
If the app requires authentication, for instance to connect your Google Account, a dialog will be opened prompting you to authenticate. Once complete, the app will be successfully installed.
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
title: "Integration with HubSpot"
|
||||
---
|
||||
|
||||
To use Cal.com with HubSpot, you only need two things:
|
||||
|
||||
<Steps>
|
||||
<Step title="Pre-requisite">
|
||||
You need to have an account on both platforms
|
||||
</Step>
|
||||
<Step title="Install Hubspot App">
|
||||
You'll need to go to the [HubSpot app page](https://app.cal.com/apps/hubspot) and click the "Install" button ⬇
|
||||
|
||||
<img src="./images/i1599x807-x2DRUUT-DkbF_yljih9.png" />
|
||||
|
||||
|
||||
</Step>
|
||||
<Step title="Choose hubspot account">
|
||||
After clicking the "Install" button, you will need to select the HubSpot account you want to use Cal.com with⬇
|
||||
|
||||
<img src="./images/i1600x1287-XKGU-PMvAkrB_zq004d.png" />
|
||||
</Step>
|
||||
<Step title="Connect app">
|
||||
Then, you will need to give the listed permissions to Cal.com clicking the button "Connect app" in order to manage certain aspects of your account, in order to provide you with the functionality you are looking for. By the way, we are making our app official with HubSpot, so you will not be seeing the warning very soon ⬇
|
||||
|
||||
<img src="./images/i1600x1253-8BQ3KGqrqGTp_xrhqzd.png" />
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
---
|
||||
Done! You will be redirected to Cal.com Installed Apps showing your newly installed app ready for you to take advantage of ⬇
|
||||
|
||||
<img src="./images/i1600x813-fFKsveiL2GuM_wk8cv1.png" />
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
title: "How to use OAuth to authorize apps"
|
||||
---
|
||||
|
||||
As an example, you can view our OAuth flow in action on Zapier. Try to connect your cal.com account [here](https://zapier.com/apps/calcom/integrations).
|
||||
To enable OAuth in one of your apps, you will need a Client ID, Client Secret, Authorization URL, Access Token Request URL, and Refresh Token Request URL.
|
||||
|
||||
<img src="./images/oauth-zapier.png" />
|
||||
|
||||
### OAuth Client Credentials
|
||||
Only the cal.com team can create new OAuth clients. Please contact us at [support@cal.com](mailto:support@cal.com) with the following details: client name, redirect URI (provided by the app), app logo, and a link to the app.
|
||||
|
||||
The Cal.com team will register the app and provide you with the Client ID and Client Secret. Keep these credentials confidential and secure.
|
||||
|
||||
### Authorization URL
|
||||
To initiate the OAuth flow, direct users to the following authorization URL:
|
||||
- `https://app.cal.com/auth/oauth2/authorize`
|
||||
- URL Parameters:
|
||||
- *client_id*
|
||||
- *state*: A securely generated random string to mitigate CSRF attacks
|
||||
- *redirect_uri*: This is where users will be redirected after authorization
|
||||
- *scope*: Specify the required scopes. Current scopes include READ_BOOKING and READ_PROFILE. Additional scopes can be added as needed.
|
||||
|
||||
After users click *Allow*, they will be redirected to the redirect_uri with the code (authorization code) and state as URL parameters.
|
||||
|
||||
### Access Token Request
|
||||
Endpoint: `POST https://app.cal.com/api/auth/oauth/token`
|
||||
|
||||
Request Body:
|
||||
- *code*: The authorization code received in the redirect URI
|
||||
- *client_id*
|
||||
- *client_secret*
|
||||
- *grant_type*: "authorization_code"
|
||||
- *redirect_uri*
|
||||
|
||||
Response:
|
||||
```json
|
||||
{
|
||||
access_token: “exampleAccessToken”
|
||||
refresh_token: “exampleRefreshToken”
|
||||
}
|
||||
```
|
||||
|
||||
### Refresh Token Request
|
||||
Endpoint: `POST https://app.cal.com/api/auth/oauth/refreshToken`
|
||||
|
||||
Request Body:
|
||||
- *grant_type*: "refresh_token"
|
||||
- *client_id*
|
||||
- *client_secret*
|
||||
|
||||
Response:
|
||||
```json
|
||||
{
|
||||
access_token: “exampleAccessToken”
|
||||
}
|
||||
```
|
||||
|
||||
### Testing OAuth Credentials
|
||||
To verify the correct setup and functionality of OAuth credentials you can use the following endpoint:
|
||||
`GET https://app.cal.com/api/auth/oauth/me`
|
||||
|
||||
Headers:
|
||||
- Authorization: Bearer *exampleAccessToken*
|
||||
|
||||
|
||||
### Authorize requests with Bearer token
|
||||
Ensure that Cal.com endpoints accessed by the app support authentication via Bearer Token.
|
||||
If this is not the case, it will be necessary to update the code accordingly.
|
||||
Here is an example of an endpoint that supports both apiKey and Bearer token authentication: [/listBookings endpoint](https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/api/subscriptions/listBookings.ts)
|
||||
File renamed without changes.
+4
-6
@@ -63,7 +63,7 @@
|
||||
{
|
||||
"group": "Open Source Contribution",
|
||||
"pages": [
|
||||
"developing/open-source-contribution/index",
|
||||
"developing/open-source-contribution/introduction",
|
||||
"developing/open-source-contribution/code-styling",
|
||||
"developing/open-source-contribution/pull-requests",
|
||||
"developing/open-source-contribution/contributors-guide"
|
||||
@@ -81,12 +81,9 @@
|
||||
"group": "App Store and Integration",
|
||||
"icon": "grid",
|
||||
"pages": [
|
||||
"developing/guides/appstore-and-integration/adding-your-first-app",
|
||||
"developing/guides/appstore-and-integration/build-a-greeter-app",
|
||||
"developing/guides/appstore-and-integration/build-an-app",
|
||||
"developing/guides/appstore-and-integration/how-to-show-assigned-people-from-a-crm",
|
||||
"developing/guides/appstore-and-integration/integration-with-hubspot",
|
||||
"developing/guides/appstore-and-integration/oauth"
|
||||
"developing/guides/appstore-and-integration/how-to-show-assigned-people-from-a-crm"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -163,7 +160,8 @@
|
||||
"icon": "tag",
|
||||
"pages": [
|
||||
"/self-hosting/guides/white-labeling/introduction",
|
||||
"/self-hosting/guides/white-labeling/custom-css"
|
||||
"/self-hosting/guides/white-labeling/custom-css",
|
||||
"/self-hosting/guides/white-labeling/color-tokens"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: "Instance-wide theming using color tokens"
|
||||
---
|
||||
|
||||
Cal.com offers instance-wide theming capabilities with minimum friction. Administrators and developers have the flexibility to tailor the look and feel of the app to align with their brand identity or specific aesthetic preferences with very easy and minor changes.
|
||||
|
||||
We use color tokens, which are the primitive color values in our design system, represented by context names. Their values can easily be set inside the `apps/web/styles/globals.css` file, an example of which is shown below:
|
||||
|
||||
```css
|
||||
**apps/web/styles/globals.css**
|
||||
|
||||
/* background */
|
||||
:root {
|
||||
--cal-bg-emphasis: #e5e7eb;
|
||||
--cal-bg: white;
|
||||
--cal-bg-subtle: #f3f4f6;
|
||||
--cal-bg-muted: #f9fafb;
|
||||
--cal-bg-inverted: #111827;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
...
|
||||
}
|
||||
.dark {
|
||||
/* background */
|
||||
|
||||
--cal-bg-emphasis: #2b2b2b;
|
||||
--cal-bg: #101010;
|
||||
--cal-bg-subtle: #2b2b2b;
|
||||
--cal-bg-muted: #1c1c1c;
|
||||
--cal-bg-inverted: #f3f4f6;
|
||||
|
||||
/* background -> components*/
|
||||
--cal-bg-info: #dee9fc;
|
||||
--cal-bg-success: #e2fbe8;
|
||||
--cal-bg-attention: #fceed8;
|
||||
--cal-bg-error: #f9e3e2;
|
||||
--cal-bg-dark-error: #752522;
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
To modify the theme of an instance, the hexcodes can easily be replaced here to instantly and seamlessly. This ensures a consistent and harmonious visual experience across all sections of the application, reflecting your desired aesthetic with precision.
|
||||
|
||||
To have a better understanding of our design system, you can view our [design documentation here](https://design.cal.com/basics/colors). If it peaks your interest, you can view the [Figma file of our Design Tokens here](https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/Cal-DS---Components?type=design&node-id=25883-174646&mode=design).
|
||||
|
||||
By allowing themes to be applied across the entire instance, businesses can ensure that their brand identity remains consistent.
|
||||
Should there be any rebranding or minor tweaks to the corporate visual identity, instance-wide theming allows for easy and swift updates. With minimal changes, the new theme can be propagated across the entire platform, eliminating the need for manual adjustments on individual sections or components.
|
||||
@@ -20,7 +20,7 @@ If you're on the Ultimate or Platform plan of Cal.com, we have made it very easy
|
||||
to the file name of your logo and logo icon, or the paths with file name to your respective logo and logo icon images from `/web/public`.
|
||||
</Step>
|
||||
<Step title="Instance wide theming">
|
||||
The instance wide theme can be easily updated thanks to the color tokens we have in place. Simply modify the hex-codes within the `apps/web/styles/globals.css` file against the [color tokens](https://cal.com/docs/enterprise-features/instance-wide-theming), and the entire application can be consistently whitelabeled to your brand identity.
|
||||
The instance wide theme can be easily updated thanks to the color tokens we have in place. Simply modify the hex-codes within the `apps/web/styles/globals.css` file against the [color tokens](/self-hosting/guides/white-labeling/color-tokens), and the entire application can be consistently whitelabeled to your brand identity.
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
|
||||
Reference in new issue
Block a user