SimplyMeet.me

Customize your scheduling page: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 19: Line 19:
<p>
<p>
</p>
</p>
<br>
<p>
<p>
'''Personal Scheduling Page Branding'''
<h3>Personal Scheduling Page Branding</h3>


</p>
</p>
Line 37: Line 36:
4. Click '''Save'''.
4. Click '''Save'''.
</p>
</p>
<br>
<p>
<p>
'''Organization Scheduling Page Branding'''
[[File:SM Branding Personal page.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_Personal_page.png]]
</p>
<p>
<h3>Organization Scheduling Page Branding</h3>
</p>
</p>
Changes apply to your organization scheduling page.  
Changes apply to your organization scheduling page.  
Line 54: Line 55:
4. Click '''Save'''.
4. Click '''Save'''.
</p>
</p>
 
<p>
[[File:SM Branding Organization page.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_Organization_page.png]]
</p>
<h2><br>
<h2><br>
  Custom CSS (Professional plan only)
  Custom CSS (Professional plan only)
</h2>
</h2>
<p>
<p>
Organization-level CSS will be loaded when you open teammates scheduling link in your organization or the organization scheduling page.
Custom CSS allows you to customize almost every visual element of your booking page, including:
</p>
* fonts
* spacing
* borders
* layouts
* buttons
* hidden elements
* colors
* advanced branding
<br>
<p>
To add Custom CSS:
</p>
</p>
<!-- (To apply custom CSS to a widget use: ".widget-theme" in your css code) -->
<p>
<p>
<span style="font-weight: normal;">Personal-specific CSS gets loaded only on the personal scheduling page.</span>
1. Go to '''[https://secure.simplymeet.me/panel/appearance Branding]''' page.
</p>
</p>
<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.)!
2. Select either '''Personal account''' or '''Organization account''' tab.
</p>
</p>
(To apply custom CSS to a widget use: ".widget-theme" in your css code)
<p>
<p>
1. Go to '''[https://secure.simplymeet.me/panel/appearance Branding]''' page.
3. Scroll the page to <strong>Custom CSS</strong>.
</p>
</p>
<p>
<p>
2. Select '''Personal account''' or '''Organization account''' tab depending on the scheduling page you wish to customize.
4. Paste your CSS.
</p>
</p>
<p>
<p>
3. Scroll the page to the <strong>Custom CSS</strong> section to get started.
4. Save.
</p>
</p>
<p>
<p>
[[File:Sm custom css path new.png|1200px|center|link=https://help.simplymeet.me/images/8/82/Sm_custom_css_path_new.png]]
[[File:SM Branding CSS.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_CSS.png]]
</p>
</p>
<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>
Just add your CSS using
'''Option 1 — Google Fonts (Recommended)'''
<strong>Custom CSS</strong> field. This CSS will automatically apply to your personal scheduling page.
</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>
* you are responsible for obtaining the appropriate font license;</p>
<p>
* you must host the font files yourself;</p>
<p>
* SimplyBook.me / SimplyMeet.me does not provide or host font files.</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"