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ý