No edit summary |
No edit summary |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 62: | Line 62: | ||
</h2> | </h2> | ||
<p> | <p> | ||
Custom CSS allows you to customize almost every visual element of your booking page, including: | |||
</p> | </p> | ||
* fonts | |||
* spacing | |||
* borders | |||
* layouts | |||
* buttons | |||
* hidden elements | |||
* colors | |||
* advanced branding | |||
<br> | |||
<p> | <p> | ||
To add Custom CSS: | |||
</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. | |||
</p> | </p> | ||
<p> | <p> | ||
2. Select either '''Personal account''' or '''Organization account''' tab. | |||
</p> | </p> | ||
<p> | <p> | ||
3. Scroll the page to <strong>Custom CSS</strong>. | |||
</p> | </p> | ||
<p> | <p> | ||
4. Paste your CSS. | |||
</p> | </p> | ||
<p> | <p> | ||
4. Save. | |||
</p> | </p> | ||
<p> | <p> | ||
[[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> | <h2><br> | ||
Changing Fonts with Custom CSS | Changing Fonts with Custom CSS | ||
| Line 96: | 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> | |||
Latest revision as of 18:38, 22 July 2026
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.
- Custom CSS (Professional plan only) – for advanced customization such as changing fonts, spacing, layouts, hiding elements, and overriding the default styling.
Personal vs. Organization Branding
With Branding settings, you can customize:
- Colors
- Avatar
- Company logo
- Banner image
- Welcome message
- SimplyMeet.me branding (paid plans)
SimplyMeet.me lets you customize Personal and Organization scheduling pages independently.
Personal Scheduling Page Branding
Changes apply only to your Personal scheduling page.
1. Go to the Branding page.
2. Select the Personal account tab.
3. Customize the colors, images, branding, and other available settings.
4. Click Save.
Organization Scheduling Page Branding
Changes apply to your organization scheduling page.
1. Go to the Branding page.
2. Select the Organization account tab.
3. Make the necessary changes.
4. Click Save.
Custom CSS (Professional plan only)
Custom CSS allows you to customize almost every visual element of your booking page, including:
- fonts
- spacing
- borders
- layouts
- buttons
- hidden elements
- colors
- advanced branding
To add Custom CSS:
1. Go to Branding page.
2. Select either Personal account or Organization account tab.
3. Scroll the page to Custom CSS.
4. Paste your CSS.
4. Save.
Personal CSS
Personal CSS affects only your personal scheduling page.
Organization CSS
Organization CSS applies to organization booking pages and organization meeting types.
Tip: To style embedded widgets, use the .widget-theme selector in your CSS.
Changing Fonts with Custom CSS
One of the most common Custom CSS customizations is changing the font used on your scheduling page.
Option 1 — Google Fonts (Recommended)
We recommend using Google Fonts, most fonts are free to use, including commercially. Browse available fonts here.
Option 2 — Your own hosted font
If your company has its own licensed font, you can reference it from your own hosting.
Important
If you use fonts other than Google Fonts:
- you are responsible for obtaining the appropriate font license;
- you must host the font files yourself;
- SimplyBook.me / SimplyMeet.me does not provide or host font files.
Support can assist with simple CSS syntax and applying Google Fonts, but cannot source, upload, or host non-Google font files.
