• Docs
• Ellipse Cloud návody
• Google analytics a Google Tag Manager
• Ako umiestniť Ellu chatbota na webovú stránku
• Ako umiestniť Ellu chatbota na webovú stránku

Ako umiestniť Ellu chatbota na webovú stránku

Ella Widget je malá plávajúca ikonka, ktorá sa zobrazí na vašej webovej stránke. Po kliknutí otvorí okno s Ella asistentom. Inštalácia je jednoduchá - stačí vložiť jeden riadok kódu do vášho webu.

Základná inštalácia

Krok 1: Získajte kód scriptu

Skopírujte nasledujúci kód:

<script src="https://VASA-DOMENA.ellipsecloud.com/load-ella.js"></script>

Nahraďte VASA-DOMENA názvom vášho hotela v systéme Ellipse. Napríklad ak je váš systém na adrese grandhotel.ellipsecloud.com, kód bude vyzerať takto:

<script src="https://demo.ellipsecloud.com/load-ella.js"></script>

Krok 2: Vložte kód na váš web

Kód vložte do HTML vašej stránky pred uzatvárací tag </body>. Máte niekoľko možností, kde to urobiť:

• WordPress - v administrácii prejdite do Vzhľad → Editor motívov → otvorte súbor footer.php a vložte kód pred </body>
• WordPress s pluginom - nainštalujte plugin "Insert Headers and Footers" (WPCode), v nastaveniach pluginu vložte kód do sekcie "Footer"
• Vlastný web (statický HTML) - otvorte hlavný HTML súbor vašej stránky a vložte kód pred </body>
• Google Tag Manager - vytvorte nový Tag typu "Custom HTML", vložte kód a nastavte spúšťač na "All Pages"
• Šablónový systém (Joomla, Drupal, Wix...) - hľadajte v nastaveniach sekciu na vkladanie vlastného kódu do pätičky stránky

Krok 3: Overte funkčnosť

Po uložení zmien otvorte váš web v prehliadači. Do 5 sekúnd by sa v pravom dolnom rohu mala objaviť ikonka Elly. Kliknutím na ňu sa otvorí okno s asistentom.

Voliteľné nastavenia

Widget môžete prispôsobiť pomocou data- atribútov priamo v kóde scriptu. Všetky nastavenia sú voliteľné - ak ich nezadáte, použijú sa predvolené hodnoty.

Zoznam dostupných nastavení

• data-width - šírka ikonky (predvolené: 60px)
• data-height - výška ikonky (predvolené: 60px)
• data-border-radius - zaoblenie rohov (predvolené: 50%, t.j. kruh)
• data-position-side - strana obrazovky: right alebo left (predvolené: right)
• data-position - vertikálna pozícia: bottom alebo top (predvolené: bottom)
• data-side-offset - odsadenie od bočného okraja (predvolené: 20px)
• data-offset - odsadenie od spodného/horného okraja (predvolené: 20px)
• data-delay - oneskorenie zobrazenia v milisekundách (predvolené: 5000, t.j. 5 sekúnd)
• data-mobile-width - šírka ikonky na mobile (predvolené: 50px)
• data-mobile-height - výška ikonky na mobile (predvolené: 50px)
• data-mobile-side-offset - odsadenie od bočného okraja na mobile (predvolené: 15px)
• data-mobile-offset - odsadenie od spodného/horného okraja na mobile (predvolené: 15px)

Príklady použitia

Widget v ľavom dolnom rohu:

<script src="https://VASA-DOMENA.ellipsecloud.com/load-ella.js"
  data-position-side="left">
</script>

Väčší widget so zobrazením po 2 sekundách:

<script src="https://VASA-DOMENA.ellipsecloud.com/load-ella.js"
  data-width="80px"
  data-height="80px"
  data-delay="2000">
</script>

Widget v pravom hornom rohu s vlastným odsadením:

<script src="https://VASA-DOMENA.ellipsecloud.com/load-ella.js"
  data-position="top"
  data-position-side="right"
  data-offset="30px"
  data-side-offset="30px">
</script>

Ako widget funguje

• Po načítaní stránky sa widget zobrazí s animáciou po uplynutí nastaveného oneskorenia (predvolene 5 sekúnd)
• Kliknutím na ikonku sa otvorí nové okno s Ella asistentom
• Widget má tlačidlo na zatvorenie (x) - po zatvorení sa ikonka skryje na 10 minút
• Na mobilných zariadeniach sa okno otvorí na celú obrazovku, na desktope ako centrované okno
• Ak sa nepodarí načítať obrázok ikonky, automaticky sa zobrazí náhradná ikonka s písmenom "E"

Riešenie problémov

Widget sa nezobrazuje

• Skontrolujte, či je adresa scriptu správna (otvorte URL scriptu priamo v prehliadači - mal by sa zobraziť JavaScript kód)
• Počkajte aspoň 5 sekúnd po načítaní stránky (alebo nastavte kratší delay)
• Otvorte konzolu prehliadača (F12 → Console) a skontrolujte, či tam nie sú chyby
• Ak ste widget zavrel, je skrytý na 10 minút. Vyčkajte alebo v konzole zadajte: EllaWidget.show()

Widget koliduje s inými prvkami na stránke

• Zmeňte pozíciu widgetu pomocou atribútov data-position-side a data-position
• Upravte odsadenie pomocou data-offset a data-side-offset

Užitočné príkazy pre konzolu prehliadača

• EllaWidget.show() - zobrazí widget (aj keď bol manuálne zatvorený)
• EllaWidget.hide() - skryje widget na 10 minút
• EllaWidget.isHidden() - zistí, či je widget momentálne skrytý

• Pokračovať Ako umiestniť Ellu chatbota na webovú stránku