Вграждане в собствен сайт
Поставете формата за записване на сайта си — inline, бутон или плаващ — с един кратък код.
Ако вече имаш собствен сайт, не е нужно да пращаш клиентите на друг адрес. Вграждането слага формата за записване вътре в твоя сайт — с два реда код, които копираш готови. Клиентът записва час, без да напуска страницата ти.
Тази статия минава през целия процес: къде е студиото за вграждане, какво прави всяка настройка, как изглежда самият код, къде точно се поставя и какво вграждането не прави.
Нямаш сайт? Тогава това не ти трябва. Просто споделяй линка към страницата си за записване — виж Споделяне в социалните мрежи. Точно това пише и самото приложение: «Нямате уебсайт? Не ви трябва това — просто споделяйте връзката към страницата за записване.»
1. Къде е студиото за вграждане
- В лявата икон-лента отвори продукта с таблата и избери таблото.
- В колоната на таблото натисни хъба Настройка.
- В групата Витрина избери реда Публичен сайт.
- Под заглавието има две капсули: Настройки на сайта и Вграждане. Натисни Вграждане.
Екранът е разделен на две. Вляво са настройките и кодът, вдясно — макет на браузър с адрес «вашият-сайт.bg», в който виждаш точно как ще изглежда джаджата. Прегледът е истинската джаджа, не картинка — можеш да я разгледаш.
Отгоре има и обяснителна кутия: Имате собствен уебсайт? «Вграждането добавя формата за записване към вашия сайт (WordPress, Wix, собствен сайт и др.). Копирайте кода по-долу и го поставете там, където искате да се появи.»
2. Настройките, една по една
«Как да се покаже» — трите режима
| Режим | Какво прави |
|---|---|
| Вграден | Формата стои директно в страницата, на мястото на кода |
| Бутон | Бутон, който отваря записването в изскачащ прозорец |
| Плаващ | Постоянно копче в долния десен ъгъл на всяка страница |
Подробно сравнение с препоръки кой кога да избереш — в Режими на вграждане.
Полетата, които се появяват според режима
| Режим | Видими полета |
|---|---|
| Вграден | Височина (px) |
| Бутон и Плаващ | Текст на бутона, Цвят, Как се отваря |
- Височина (px) — от 360 до 1200, стъпка 20. По подразбиране 680.
- Текст на бутона — по подразбиране «Запази час». Ако го оставиш празно, се показва само иконата с календар.
- Цвят — цветът на бутона. По подразбиране тъмносиньо (
#111827). - Как се отваря — Прозорец (изскача в средата) или Панел отдясно (плъзга се отстрани). На телефон и двете стават на цял екран.
3. Кодът
Под настройките има блок Код за вмъкване с готовия фрагмент и бутон Копирай кода. Кодът се променя жив, докато въртиш настройките.
Най-простият вариант (режим Вграден, всичко по подразбиране) изглежда така:
<div data-mountify-booking data-board="moyat-salon"></div>
<script src="https://book.mountify.eu/embed.js" async></script>Ако си сменил височината:
<div data-mountify-booking data-board="moyat-salon" data-height="900"></div>
<script src="https://book.mountify.eu/embed.js" async></script>Режим Бутон с текст и цвят:
<div data-mountify-booking data-board="moyat-salon" data-mode="popup" data-label="Запази час" data-color="#c2410c"></div>
<script src="https://book.mountify.eu/embed.js" async></script>Режим Плаващ, който се отваря като панел отдясно:
<div data-mountify-booking data-board="moyat-salon" data-mode="bubble" data-panel="sidesheet" data-label="Запази час"></div>
<script src="https://book.mountify.eu/embed.js" async></script>Какво е кое
| Част | Роля |
|---|---|
<div data-mountify-booking …> | Мястото, на което ще се появи джаджата |
data-board="…" | Адресът на твоята страница — последната част от линка |
<script src="…/embed.js" async> | Скриптът, който превръща <div>-а в джаджа |
data-board идва от полето Адрес (последната част от връзката) в таба Настройки на сайта. Адресът приема само малки латински букви, цифри и тире — затова в кода няма кирилица. Ако смениш адреса, старият код спира да работи и трябва да копираш новия.
Скриптът се слага веднъж на страница, дори ако имаш няколко бутона. Втори
<script>таг просто не прави нищо.
4. Къде се поставя кодът
Общото правило: в HTML-а на страницата, точно там, където искаш да се появи.
| Режим | Къде |
|---|---|
| Вграден | В блока на страницата, където искаш формата — напр. на страница «Запиши се» |
| Бутон | На мястото на бутона — в горната секция, до цените, в края на страницата |
| Плаващ | Няма значение къде — копчето и без това се позиционира само в ъгъла. Най-удобно е да е в общ шаблон, за да е на всички страници |
Стъпка по стъпка за най-честите платформи:
Ако сайтът ти се поддържа от друг човек — просто му изпрати копирания код и му кажи на коя страница да го сложи. Приложението го казва по същия начин: «Поставете кода в HTML на вашия сайт, където искате да се появи — или го изпратете на човека, който поддържа сайта ви.»
5. Условия, за да работи вграждането
Вграждането показва същото записване, което е и на публичната ти страница. Значи важат същите условия:
| Условие | Къде се проверява |
|---|---|
| Ключът Онлайн записване трябва да е включен | Настройка → Публичен сайт, най-горе |
| Трябва да има поне една услуга, която може да се запази | Каталог → Услуги |
| Трябва да има работно време | Настройка → Работно време |
| Абонаментът трябва да е активен | Настройки на работното пространство → Абонамент |
Ако нещо от това липсва, вграденото записване няма да зареди. Диагностика — в Ако нещо не се показва.
6. Допълнителни възможности (за човек, който пипа код)
Тези неща не са в интерфейса, но скриптът ги поддържа. Добавят се ръчно в <div>-а:
| Атрибут | Какво прави |
|---|---|
data-service="<id на услуга>" | Отваря записването с предварително избрана услуга |
data-lang="bg" или data-lang="en" | Налага езика на джаджата |
data-radius="16px" | Заобляне на ъглите при режим «Вграден» |
data-position="left" | Слага плаващото копче в левия ъгъл вместо в десния |
Може и да превърнеш свой собствен бутон в отварящ:
<button data-mountify-trigger="moyat-salon">Запази час</button>
<script src="https://book.mountify.eu/embed.js" async></script>И да отвориш записването от собствен JavaScript:
window.mountifyBooking.open("moyat-salon");
window.mountifyBooking.close();7. Какво вграждането НЕ прави
- Не носи стиловете на твоя сайт. Джаджата се показва в изолирана рамка (iframe) — шрифтовете и цветовете на сайта ти не влизат вътре, а нейните не излизат навън. Изгледът се управлява от редактора на страницата за записване.
- Не се преоразмерява сама по височина. При режим «Вграден» височината е тази, която си задал. Ако формата е по-висока, вътре се появява собствена лента за превъртане. Затова 680 px е разумна начална стойност.
- Не е отделна страница. Промените в редактора важат едновременно за публичната страница и за вграждането — не се настройват поотделно.
- Не работи на собствен домейн. Записването живее на адрес
book.mountify.eu/<твоят-адрес>; собствени домейни няма. - Не изисква поддръжка. Щом кодът е сложен веднъж, нови услуги и промени в часовете се появяват автоматично.
Какво следва
- Режими на вграждане — кой режим кога и как изглежда за клиента.
- Вграждане в WordPress — стъпка по стъпка.
- Вграждане в Wix или Squarespace — с блок за код.
- Ако нещо не се показва — бързи проверки.