Difference between revisions of "Customize your scheduling page"
| Line 7: | Line 7: | ||
<h2>Appearance editor</h2> | <h2>Appearance editor</h2> | ||
<p> | <p> | ||
| − | 1. Go to the [https://app. | + | 1. Go to the [https://app.simplymeet.me/appearance Appearance] page. |
</p> | </p> | ||
<p> | <p> | ||
| Line 13: | Line 13: | ||
</p> | </p> | ||
<p> | <p> | ||
| − | [[File: | + | [[File:Simplymeet appearance settings.png|1200px|center]] |
</p> | </p> | ||
<h2><br> | <h2><br> | ||
| Line 31: | Line 31: | ||
<p> | <p> | ||
1. Go to | 1. Go to | ||
| − | [https://app. | + | [https://app.simplymeet.me/profile/edit Account Settings.] |
</p> | </p> | ||
<p> | <p> | ||
| Line 37: | Line 37: | ||
</p> | </p> | ||
<p> | <p> | ||
| − | [[File: | + | [[File:Simplymeet account css path.png|1200px|center]] |
</p> | </p> | ||
<p> | <p> | ||
| Line 45: | Line 45: | ||
<h4>Organization scheduling page-specific custom CSS</h4> | <h4>Organization scheduling page-specific custom CSS</h4> | ||
<p> | <p> | ||
| − | 1. Go to | + | 1. Go to [https://app.simplymeet.me/organization/settings Organization settings.] |
| − | |||
</p> | </p> | ||
<p> | <p> | ||
| Line 52: | Line 51: | ||
</p> | </p> | ||
<p> | <p> | ||
| − | [[File: | + | [[File:Simplymeet organization css path.png|1200px|center]] |
</p> | </p> | ||
<p> | <p> | ||
| Line 70: | Line 69: | ||
<h4>Personal scheduling page-specific custom JavaScript</h4> | <h4>Personal scheduling page-specific custom JavaScript</h4> | ||
<p> | <p> | ||
| − | 1. Go to | + | 1. Go to [https://app.simplymeet.me/profile/edit Account Settings.] |
| − | |||
</p> | </p> | ||
<p> | <p> | ||
| Line 77: | Line 75: | ||
</p> | </p> | ||
<p> | <p> | ||
| − | [[File: | + | [[File:Simplymeet account js path.png|1200px|center]] |
</p> | </p> | ||
<p> | <p> | ||
| Line 86: | Line 84: | ||
<p> | <p> | ||
1. Go to | 1. Go to | ||
| − | [https://app. | + | [https://app.simplymeet.me/organization/settings Organization settings.] |
</p> | </p> | ||
<p> | <p> | ||
| Line 93: | Line 91: | ||
</p> | </p> | ||
<p> | <p> | ||
| − | [[File: | + | [[File:Simplymeet organization js path.png|1200px|center]] |
</p> | </p> | ||
<p> | <p> | ||
3. Just add your JavaScript code using the Custom JavaScript field. This JavaScript will automatically apply to your organization scheduling page. | 3. Just add your JavaScript code using the Custom JavaScript field. This JavaScript will automatically apply to your organization scheduling page. | ||
</p> | </p> | ||
Revision as of 14:39, 25 October 2021
Scheduling pages allow your invitees to book the meetings with you. Out of the box, organization and personal scheduling pages have a sleek and clean look with some customization built right into Appearance settings that can be customized without changing the code and our default CSS. If you want to customize your scheduling page further and match your brand seamlessly, put your team's CSS skills to work and create your own stylesheet or Javascript code.
This article covers all of the customization options scheduling page offers.
Appearance editor
1. Go to the Appearance page.
2. The user-friendly editor will open where you can change the colours of the personal scheduling page, no custom coding necessary.
Personal-level vs. Organization-level CSS
Organization-level CSS will be loaded when you open any teammates scheduling link in your organization or the organization scheduling page.
Personal-specific CSS gets loaded only on the personal scheduling page.
Use custom CSS (Cascading Style Sheets)
Add your own CSS by directly adding the stylesheets in the settings. You can customize just about everything on your scheduling pages with do-it-yourself custom CSS (e.g. change the font format, size, override defaults colours etc.)!
Personal scheduling page-specific custom CSS
1. Go to Account Settings.
2. Head to the Custom CSS section to get started.
3. Just add your CSS using the Custom CSS field. This CSS will automatically apply to your personal scheduling page.
Organization scheduling page-specific custom CSS
1. Go to Organization settings.
2. Head to the Custom CSS section to get started.
3. Just add your CSS using the Custom CSS field. This CSS will automatically apply to your organization scheduling page.
Personal-level vs. Organization-level JavaScript
Organization-level JavaScript will be loaded when you open any teammates scheduling link from your organizations overview page or the organization scheduling page but not on the individual personal scheduling pages.
Personal-specific JavaScript gets loaded only on the personal scheduling page.
Use custom JavaScript
You can add custom Javascript code at both the personal and organization scheduling page level. This can be any custom JavaScript code like Hubspot tracking code or something else.
Personal scheduling page-specific custom JavaScript
1. Go to Account Settings.
2. Head to the Custom JavaScript section to get started.
3. Just add your JavaScript code using the Custom JavaScript field. This JavaScript will automatically apply to your personal scheduling page.
Organization scheduling page-specific custom JavaScript
1. Go to Organization settings.
2. Head to the Custom JavaScript section to get started.
3. Just add your JavaScript code using the Custom JavaScript field. This JavaScript will automatically apply to your organization scheduling page.
