Jak správně vložit tlačítko pro online objednávání na Vaše stránk tak, aby designem co nejlépe zapadlo? Text níže vám pomůže si nastylovat tlačítko dle vašich představ. Nebojte, není to nic složitého.
1 Adresa Vaší rezervační stránky
Jako první krok je nutné zjistit, jaké máte unikátní jméno pro aplikaci v systému XDENT. To najdete po přihlášení do XDENTu v Nastavení -> Rezervace a v okně pod záložkou se jménem "Pravidla online rezervací" najděte položku "Adresa Vaší rezervační stránky" kde bude adresa například toto: test.xdent.cz. Právě ono slovo "test" je to, co budeme dále v postupu potřebovat.
2 Vložení kódu pro online rezervace
Nyní bude potřeba vložit nás kód do vašich stránek, který provede vložení tlačítka a umožní online objednávky. Vložení provedeme tak, že vložíme do hlavičky stránky mezi tagy <head> </head> následující řádek:
<script type="text/javascript" src="https://www.xdent.cz/js/booking.js"></script>
Pokud máme, tak můžeme na krok tři, kde vložíme tlačítko na své místo a vyplníme správné údaje.
3 Vložení tlačítka na správné místo
Nyní je čas vložit kód, který zajistí vložení potřebných zdrojů pro zobrazení tlačítka. Je potřeba si také uvědomit, že dokud nebude na stránku vložený styl (následující krok), tak bude tlačítko vypadat nehezky. Ale není se potřeba bát, protože v následujícím kroku si tlačítko obarvíme ke své vlastní spokojenosti. Nyní ale ke vložení samotného kódu na správné místo.
V kódu stránky, kde má být umístěno tlačítko, je potřeba vložit následující kód:
<script type="text/javascript">CreateBookNowOwnButton('NÁZEV_KLINIKY', 'Own', 'NAZEV_TLAČÍTKA');</script>
A nyní je potřeba nahradit v kódu výše text "NÁZEV_KLINIKY" za text z prvního kroku (v příkladu tedy slovo "test")
Dále je potřeba nahradit i "NAZEV_TLAČÍTKA" za text, který bude jako název tlačítka. Pokud má mít tlačítko popisek například "REZERVACE", tak smažte text "NAZEV_TLAČÍTKA" a vložte místo toho "REZERVACE".
Výsledek (zatím bez stylu)
4 Úprava designu tlačítka pomocí CSS (Cascading Style Sheets)
Jako poslední je potřeba si upravit styl tlačítka pomocí kaskádových stylů (CSS). Kód níže je tedy potřeba brát jen jako příklad, protože obsah mezi závorkami bude pravděpodobně úplně jiný.
#btnXdentBookNowOwn {
align-self: center;
background: rgb(56, 56, 55);
padding: 0.3rem 1rem;
margin: 0 1rem;
transition: all .6s ease;
color: rgb(211, 211, 211);
font-size: 1.4rem;
letter-spacing: 5px;
outline: none;
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
font-family: 'Dancing Script', cursive;
}
#btnXdentBookNowOwn:hover {
box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}
Výsledek (se stylem)
Základ pro design tlačítka je tedy #btnXdentBookNowOwn {} a #btnXdentBookNowOwn:hover {}, který je potřeba vložit do souboru CSS pro vaše stránky. Následně mezi závorky začít psát styl samotného tlačítka.
