SimplyMeet.me

Customize your scheduling page: Difference between revisions

Created page with "<p> 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 cust..."
 
No edit summary
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
__FORCETOC__
<p>
<p>
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.&nbsp;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.&nbsp;
Scheduling pages allow your invitees to book the meetings with you.  
SimplyMeet.me offers two ways to customize their appearance:
* '''Branding''' – a user-friendly editor that lets you customize colors, images, branding, and other visual elements without writing any code.<br>
* '''Custom CSS''' (Professional plan only) – for advanced customization such as changing fonts, spacing, layouts, hiding elements, and overriding the default styling.
<br>
</p>
</p>
<h2>Personal vs. Organization Branding</h2>
<p>
<p>
This article covers all of the customization options scheduling page offers.
With Branding settings, you can customize:
</p>
* Colors
<h2>Appearance editor</h2>
* Avatar
* Company logo
* Banner image
* Welcome message
* SimplyMeet.me branding (paid plans)
SimplyMeet.me lets you customize Personal and Organization scheduling pages independently.
<p>
<p>
1. Go to the [https://app.harmonizely.com/appearance Appearance] page.
</p>
</p>
<p>
<p>
2. The user-friendly editor will open where you can change the colours of the personal scheduling page,&nbsp;no custom coding necessary.
<h3>Personal Scheduling Page Branding</h3>
 
</p>
</p>
Changes apply only to your Personal scheduling page.
<p>
<p>
[[File:Design visual editor.png|1200px|center]]
1. Go to the [https://secure.simplymeet.me/panel/appearance '''Branding'''] page.
</p>
</p>
<h2><br>
Personal-level vs. Organization-level CSS
</h2>
<p>
<p>
Organization-level CSS will be loaded when you open&nbsp;any&nbsp;teammates scheduling link in your organization or the organization scheduling page.
2. Select the '''Personal account''' tab.
</p>
</p>
<p>
<p>
<span style="font-weight: normal;">Personal-specific CSS gets loaded only on the personal scheduling page.</span>
3. Customize the colors, images, branding, and other available settings.  
</p>
</p>
<h3> Use custom CSS (Cascading Style Sheets)</h3>
<p>
<p>
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.)!
4. Click '''Save'''.
</p>
</p>
<h4> Personal scheduling page-specific custom CSS</h4>
<p>
<p>
1. Go to
[[File:SM Branding Personal page.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_Personal_page.png]]
<a href="https://app.harmonizely.com/profile/edit" target="_blank">Account Settings.</a>
</p>
</p>
<p>
<p>
2. Head to the&nbsp;<strong>Custom CSS</strong> section to get started.
<h3>Organization Scheduling Page Branding</h3>
</p>
</p>
Changes apply to your organization scheduling page.
<p>
<p>
[[File:Custom css box.png|center]]
1. Go to the [https://secure.simplymeet.me/panel/appearance '''Branding'''] page.
</p>
</p>
<p>
<p>
&nbsp;3.&nbsp;Just add your CSS using the&nbsp;
2. Select the '''Organization account''' tab.
<strong>Custom CSS</strong>&nbsp;field. This CSS will automatically apply to your personal scheduling page.
</p>
</p>
<h4>Organization scheduling page-specific custom CSS</h4>
<p>
<p>
1. Go to
3. Make the necessary changes.  
[https://app.harmonizely.com/organization/settings Organization settings.]
</p>
</p>
<p>
<p>
2. Head to the Custom CSS&nbsp;section to get started.
4. Click '''Save'''.
</p>
</p>
<p>
<p>
[[File:Custom css organization box.png|center]]
[[File:SM Branding Organization page.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_Organization_page.png]]
</p>
</p>
<h2><br>
Custom CSS (Professional plan only)
</h2>
<p>
<p>
&nbsp;3.&nbsp;Just add your CSS using the&nbsp;Custom CSS&nbsp;field. This CSS will automatically apply to your organization&nbsp;scheduling page.
Custom CSS allows you to customize almost every visual element of your booking page, including:
</p>
</p>
<h2>Personal-level vs. Organization-level&nbsp;JavaScript</h2>
* fonts
* spacing
* borders
* layouts
* buttons
* hidden elements
* colors
* advanced branding
<br>
<p>
<p>
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.
To add Custom CSS:
</p>
</p>
<!-- (To apply custom CSS to a widget use: ".widget-theme" in your css code) -->
<p>
<p>
Personal-specific&nbsp;JavaScript&nbsp;gets loaded only on the personal scheduling page.
1. Go to '''[https://secure.simplymeet.me/panel/appearance Branding]''' page.
</p>
</p>
<h3>Use custom JavaScript</h3>
<p>
<p>
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.
2. Select either '''Personal account''' or '''Organization account''' tab.
</p>
</p>
<h4>Personal scheduling page-specific custom JavaScript</h4>
<p>
<p>
1. Go to  
3. Scroll the page to <strong>Custom CSS</strong>.
[https://app.harmonizely.com/profile/edit Account Settings.]
</p>
</p>
<p>
<p>
2. Head to the&nbsp;Custom JavaScript&nbsp;section to get started.
4. Paste your CSS.
</p>
</p>
<p>
<p>
[[File:Custom javascript personal.png|center]]
4. Save.
</p>
</p>
<p>
<p>
&nbsp;3.&nbsp;Just add your JavaScript code using the&nbsp;Custom&nbsp;JavaScript
[[File:SM Branding CSS.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_CSS.png]]
<span style="font-weight: normal;">&nbsp;field. This&nbsp;</span>JavaScript<span style="font-weight: normal;">&nbsp;will automatically apply to your</span>&nbsp;<span style="font-weight: normal;">personal scheduling page.</span>
</p>
</p>
<h4>Organization&nbsp;scheduling page-specific custom JavaScript</h4>
<br>
<p>'''Personal CSS'''</p>
Personal CSS affects only your personal scheduling page.
<p>'''Organization CSS'''</p>
Organization CSS applies to organization booking pages and organization meeting types.
  '''Tip''': To style embedded widgets, use the .widget-theme selector in your CSS.
 
<h2><br>
Changing Fonts with Custom CSS
</h2>
One of the most common Custom CSS customizations is changing the font used on your scheduling page.
<p>
<p>
1. Go to
'''Option 1 — Google Fonts (Recommended)'''
[https://app.harmonizely.com/organization/settings Organization settings.]
</p>
</p>
We recommend using '''Google Fonts''', most fonts are free to use, including commercially.
Browse available fonts [https://fonts.google.com/ here].
<!--
<p>Example:</p>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
  * {
  font-family: 'Oswald', sans-serif !important;
  }
<p>Save the CSS and refresh your booking page.</p>
-->
<p>'''Option 2 — Your own hosted font'''</p>
If your company has its own licensed font, you can reference it from your own hosting.
<!--
<p>Example:</p>
  @font-face {
    font-family: 'MyCompanyFont';
    src: url('https://your-domain.com/fonts/MyCompanyFont.woff2') format('woff2');
  }
  * {
    font-family: 'MyCompanyFont', sans-serif !important;
  }
-->
<br>
<br>
<p>'''Important'''</p>
If you use fonts '''other than Google Fonts''':
<p>
<p>
2. Head to the  
* you are responsible for obtaining the appropriate font license;</p>
<strong>Custom JavaScript</strong>&nbsp;section to get started.
</p>
<p>
<p>
[File:Custom javascript organization.png|center]
* you must host the font files yourself;</p>
</p>
<p>
<p>
3.&nbsp;Just add your JavaScript code&nbsp;using the&nbsp;Custom&nbsp;JavaScript&nbsp;field. This&nbsp;JavaScript&nbsp;will automatically apply to your&nbsp;organization&nbsp;scheduling page.
* SimplyBook.me / SimplyMeet.me does not provide or host font files.</p>
</p>
<p>Support can assist with simple CSS syntax and applying Google Fonts, but cannot '''source, upload, or host''' non-Google font files.</p>
Retrieved from "https://help.simplymeet.me/index.php?title=Customize_your_scheduling_page"