Rezervační tlačítko na vašem webu
Zadejte dvě hodnoty, vyberte režim a zkopírujte hotový kód. Rezervace se pak otevírá přímo na vašem webu — na počítači jako modální okno, na mobilu jako vysouvací panel.
Název je část adresy před .reservine.me — pro https://moje-firma.reservine.me zadejte moje-firma. Celou adresu vložte jen u nestandardní domény.
Najdete v administraci v Nastavení → Rezervační tlačítko. S jednou pobočkou pole nechte prázdné.
Kód pro váš web — píše se sám podle vašich hodnot
<script defer src="https://cdn.reservine.io/sdk/v1.js"></script> <reservine-button aswrapper="true" partner="moje-firma"> <span class="trida-vaseho-tlacitka">Text vašeho tlačítka</span></reservine-button>- Skript vložte do stránky jen jednou — obslouží všechna tlačítka.
- Ukázkový <span> nahraďte svým stávajícím tlačítkem: text, CSS třídy i responzivní chování zůstávají vaše.
- Vložený prvek musí být neinteraktivní (span, div) — přístupné tlačítko dodává Reservine, takže dovnitř nikdy nevkládejte <a> ani <button>.
- U nahrazovaného odkazu odstraňte původní navigaci (href, target, rel) — rezervace se otevře přímo na stránce jako modál, na mobilu jako vysouvací panel.
- V čistém HTML pište atributy malými písmeny; logické atributy vynechte, když mají být vypnuté — zapnutí zapisujte výslovně jako aswrapper="true".
Web vám spravuje AI agent nebo vývojář?
Zkopírujte hotové anglické zadání s vašimi hodnotami — stačí vložit do Codexu, Claude Code, Cursoru nebo poslat správci webu.
Kompletní přehled API
Vlastnosti společné pro oba režimy
| JS / framework prop | HTML atribut | Typ | Výchozí | Chování |
|---|---|---|---|---|
| partner | partner | string | "" | Název vašeho Reservine (část adresy před .reservine.me) — sestaví https://{partner}.reservine.me. Má přednost před reservationUrl, pokud zadáte obojí. |
| reservationUrl | reservationurl | string | "" | Celá adresa rezervační stránky. Použijte, jen pokud tlačítko nemíří na standardní *.reservine.me adresu. |
| branch | branch | number | null | null | ID pobočky — do adresy přidá /branch/{id}, takže se otevře rovnou správná pobočka. |
| service | service | number | null | null | Předvybere službu (parametr v adrese rezervace). |
| employee | employee | number | null | null | Předvybere zaměstnance (parametr v adrese rezervace). |
| reservineTheme | reservinetheme | string | "" | Identifikátor barevného tématu Reservine předaný do rezervační stránky. |
| showGallery | showgallery | boolean | null | null | Vynutí zobrazení či skrytí galerie. Bez atributu platí nastavení vaší rezervační stránky. |
| disableUseOfAdjustedFontSize | disableuseofadjustedfontsize | boolean | false | Vypne automatické přizpůsobení velikosti písma podle stránky, do které je tlačítko vložené. |
| asWrapper | aswrapper | boolean | false | Režim obalu: místo vygenerovaného tlačítka se zobrazí váš vlastní vložený prvek a Reservine dodá jen chování (modál / mobilní panel). |
Vzhled vygenerovaného tlačítka
Platí jen bez režimu obalu — vzhled vygenerovaného tlačítka.
| JS / framework prop | HTML atribut | Typ | Výchozí | Chování |
|---|---|---|---|---|
| text | text | string | "" | Viditelný text vygenerovaného tlačítka. |
| appearance | appearance | "primary" | "text" | "outline" | "primary" | Vzhled vygenerovaného tlačítka. |
| size | size | "small" | "medium" | "large" | "medium" | Výška, odsazení a velikost písma tlačítka. |
| width | width | "auto" | "full" | "auto" | Šířka podle obsahu, nebo přes celý rodičovský prvek. |
| color | color | hex barva | "#ffffff" | Základní barva tlačítka (tří- nebo šestimístný hex); barva textu a hover odstín se dopočítají. |
| borderRadius | borderradius | string | "6px" | Zaoblení rohů v px; jednotku px SDK doplní, pokud chybí. |
Režim obalu (aswrapper) — chování a omezení
- Element zobrazí vložený obsah; text, třídy, hover i responzivitu vlastní váš web.
- Vlastnosti vzhledu (text, appearance, size, width, color, borderRadius) se v režimu obalu nepoužívají — vložený prvek stylujte vlastním CSS.
- Vkládejte neinteraktivní prvek (span) — přístupné tlačítko dodává Reservine, vnořené <a> či <button> by vytvořilo tlačítko v tlačítku.
Metody a události
| API | Druh | Chování |
|---|---|---|
| element.open() | metoda | Otevře rezervační modál / mobilní panel. |
| element.close() | metoda | Zavře rezervační modál / mobilní panel. |
| element.opened | vlastnost | Aktuální stav otevření (boolean). V prohlížeči preferujte metody open()/close(); open() je na elementu rezervované pro metodu. |
| událost „reservine-open-change" | událost | CustomEvent<{ open: boolean }> — vystřelí při každém otevření i zavření; stav čtěte z event.detail.open. Framework adaptéry navíc nabízejí řízený prop open a nativní openChange callback. |
Zápis v HTML vs. v JavaScriptu
V čistém HTML jsou názvy atributů malými písmeny (aswrapper, reservationurl, borderradius) a logické atributy se při vypnutí úplně vynechávají; zapnutí zapisujte výslovně jako aswrapper="true". V JavaScriptu a framework adaptérech se tytéž vlastnosti píší camelCase (asWrapper, reservationUrl, borderRadius). Když zadáte partner i reservationUrl, vyhrává partner.
Časté dotazy
Funguje tlačítko i na WordPressu / Webflow / Wixu?
Ano. Stačí možnost vložit vlastní HTML. Na WordPressu použijte například blok Vlastní HTML.
Můžu mít na webu víc tlačítek?
Ano — skript v hlavičce stačí jednou, prvků <reservine-button> můžete vložit libovolně; každé může mířit na jinou pobočku nebo předvybírat jinou službu.
Otevře se rezervace v novém okně?
Ne. Rezervace se otevírá přímo na vaší stránce — na počítači jako modální okno, na mobilu jako vysouvací panel. Návštěvník z vašeho webu neodchází.
Nejde vám něco? Pomůžeme osobně.
S nastavením a konfigurací vám rádi pomůžeme — napište nám a projdeme to spolu krok za krokem.
Kontaktovat podporu