SimplyMeet.me

Customize your scheduling page: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 72: Line 72:
* colors
* colors
* advanced branding
* advanced branding
<br>
<p>
<p>
To add Custom CSS:
To add Custom CSS:
Line 80: Line 81:
</p>
</p>
<p>
<p>
2. Select '''Personal account''' or '''Organization account''' tab depending on the scheduling page you wish to customize.
2. Select either '''Personal account''' or '''Organization account''' tab.
</p>
</p>
<p>
<p>
3. Scroll the page to the <strong>Custom CSS</strong> section to get started.
3. Scroll the page to <strong>Custom CSS</strong>.
</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]]
4. Paste your CSS.
</p>
</p>
<p>
<p>
Just add your CSS using
4. Save.
<strong>Custom CSS</strong> field. This CSS will automatically apply to your personal scheduling page.
</p>
</p>
<p>
[[File:SM Branding CSS.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_CSS.png]]
</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>
<h2><br>
  Changing Fonts with Custom CSS
  Changing Fonts with Custom CSS
Line 101: Line 111:
We recommend using '''Google Fonts''', most fonts are free to use, including commercially.  
We recommend using '''Google Fonts''', most fonts are free to use, including commercially.  
Browse available fonts [https://fonts.google.com/ here].
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"