Přeskočit na hlavní obsah

Embed widget

Nejjednodussi zpusob, jak pridat rezervacni system na vas web.

Rychly start​

Zkopirujte tento kod a vlozte ho do HTML vaseho webu:

<iframe
  src="https://zarezervujto.cz/vas-projekt-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>

Nahradte vas-projekt-slug slugem vaseho projektu.

Varianty vlozeni​

Jednoduchy iframe​

Zakladni varianta s pevnou vyskou:

<iframe
  src="https://zarezervujto.cz/vas-projekt-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>

Responzivni iframe​

Pro lepsi zobrazeni na mobilnich zarizenich:

<div style="position: relative; width: 100%; padding-bottom: 120%; min-height: 600px;">
  <iframe
    src="https://zarezervujto.cz/vas-projekt-slug"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
    title="Rezervacni system"
  ></iframe>
</div>

S vlastnim stylovanim​

<div class="reservation-widget">
  <iframe
    src="https://zarezervujto.cz/vas-projekt-slug"
    title="Rezervacni system"
  ></iframe>
</div>

<style>
.reservation-widget {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.reservation-widget iframe {
  width: 100%;
  height: 700px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .reservation-widget iframe {
    height: 600px;
  }
}
</style>

Primy odkaz​

Muzete take pouzit primy odkaz na rezervacni stranku:

https://zarezervujto.cz/vas-projekt-slug

Tlacitko s odkazem​

<a
  href="https://zarezervujto.cz/vas-projekt-slug"
  target="_blank"
  class="btn-reservation"
>
  Rezervovat
</a>

<style>
.btn-reservation {
  display: inline-block;
  padding: 12px 24px;
  background-color: #5945FE;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

.btn-reservation:hover {
  background-color: #4935DE;
}
</style>

Ziskani embed kodu​

  1. Prihlaste se do aplikace
  2. Prejdete do Nastaveni projektu → API & Integrace
  3. V sekci Vlozeni na web najdete pripravene kody

Nastaveni vzhledu​

Widget automaticky prebira nastaveni vzhledu z vaseho projektu:

  • Barvy - primarni, sekundarni, akcentova
  • Logo - zobrazuje se v hlavicce
  • Font - pouziva se nastaveny font

Tyto hodnoty muzete zmenit v Nastaveni projektu → Vzhled.

FAQ​

Muzu zmenit vysku widgetu?​

Ano, upravte atribut height v iframe tagu. Doporucujeme minimalne 600px.

Widget se nezobrazuje spravne​

Zkontrolujte:

  1. Spravnost slugu projektu
  2. Ze projekt je aktivni
  3. Ze nemame blokovanou domenu v nastaveni CORS

Jak pridam widget do WordPressu?​

Pouzijte blok Vlastni HTML a vlozte embed kod. Nebo pouzijte nas WordPress plugin.

Je widget responzivni?​

Ano, widget se automaticky prizpusobuje sirce kontejneru. Pro mobilni zarizeni doporucujeme pouzit responzivni variantu.