Instalační skript

Docs

Instalační skript

Kompletní návod na přidání ai4shops.com na váš web. Univerzální JavaScript snippet, který funguje všude.

Instalační skript ai4shops.com je lehký JavaScript snippet, který oživí vaše formuláře, vyskakovací okna a chatbota na vašem webu. 🚀

Základní skript

Takhle to vypadá:

<script
  src="https://ai4shops.com/embed.js"
  data-project-id="proj_vase_unikatni_id"
  data-api-key="vas_api_klic"
></script>

To je vše! Tento jeden skript načte vše pro váš projekt.

Kam to přidat

Nejlepší praxe: Před `</body>`

Umístěte skript těsně před ukončovací tag </body> ve vašem HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Můj web</title>
  </head>
  <body>
    <!-- Obsah vašeho webu -->
 
    <!-- ai4shops.com Skript -->
    <script
      src="https://ai4shops.com/embed.js"
      data-project-id="proj_abc123"
      data-api-key="sk_live_xyz789"
    ></script>
  </body>
</html>

Proč před </body>?

Obsah stránky se načte první (rychlejší vnímání)
Zajišťuje, že je DOM připraven
Lepší SEO
Oborový standard

Metody instalace

Metoda 1: Globální instalace projektu (doporučeno)

Nainstalujte jednou, funguje pro všechny formuláře/vyskakovací okna/chatboty v tom projektu:

<script
  src="https://ai4shops.com/embed.js"
  data-project-id="proj_abc123"
></script>

Načítá:

Všechny aktivní formuláře
Všechny aktivní vyskakovací okna (se správnými triggery)
Váš chatbot (pokud je nakonfigurován)

Nejlepší pro:

Většinu webů
Konzistentní zážitek
Snadnou správu

Načtěte pouze konkrétní widgety:

Jeden formulář:

<script src="https://ai4shops.com/embed.js" data-form-id="form_xyz789"></script>

Jeden modal:

<script
  src="https://ai4shops.com/embed.js"
  data-modal-id="modal_abc456"
></script>

Pouze chatbot:

<script
  src="https://ai4shops.com/embed.js"
  data-chatbot-id="chat_def123"
></script>

Nejlepší pro:

Vstupní stránky (jeden konkrétní formulář)
A/B testování
Selektivní nasazení

Možnosti konfigurace

Přizpůsobte chování pomocí datových atributů:

Možnosti zobrazení

<script
  src="https://ai4shops.com/embed.js"
  data-project-id="proj_abc123"
  data-theme="auto"
  data-position="bottom-right"
  data-language="cs"
></script>

Dostupné možnosti:

data-theme

light: Světlé barvy
dark: Tmavé barvy
auto: Odpovídá systémovému nastavení (výchozí)

data-position (pro chatbota)

bottom-right (výchozí)
bottom-left
top-right
top-left

data-language

en: Angličtina (výchozí)
cs: Čeština
de: Němčina
it: Italština
... (50+ jazyků)

Možnosti výkonu

<script
  src="https://ai4shops.com/embed.js"
  data-project-id="proj_abc123"
  data-lazy-load="true"
  data-preload="false"
></script>

data-lazy-load

true: Načíst, když widget bude viditelný
false: Načíst okamžitě (výchozí)

data-preload

true: Předčíst zdroje (rychlejší zobrazení widgetu)
false: Načíst na vyžádání (výchozí)

Instalace podle platformy

WordPress

Možnost 1: Plugin Header/Footer

Nainstalujte plugin "Insert Headers and Footers"
Vložte skript do sekce zápatí
Uložte

Možnost 2: Editor motivu

Vzhled → Editor motivu
Otevřete footer.php
Najděte tag </body>
Vložte skript nad něj
Aktualizujte soubor

Možnost 3: Widget Vlastní HTML

Vzhled → Widgety
Přidejte widget "Vlastní HTML" do zápatí
Vložte skript
Uložte

Shopify

Online obchod → Motivy
Klikněte na "..." → Upravit kód
Otevřete theme.liquid
Najděte </body> (obvykle poblíž spodní části)
Vložte skript nad něj
Uložte

Vlastní HTML

Přímá úprava vašich HTML souborů:

Otevřete HTML soubor v editoru
Najděte tag </body>
Vložte skript nad něj
Uložte a nahrajte

Ověření instalace

Přidejte skript

Nainstalujte pomocí jedné z výše uvedených metod.

Navštivte svůj web

Otevřete svůj web v prohlížeči (použijte režim inkognito pro čistý test).

Otevřete vývojářskou konzoli

Chrome/Edge: Stiskněte F12 nebo Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Firefox: Stiskněte F12 nebo Ctrl+Shift+K (Windows) / Cmd+Option+K (Mac)
Safari: Povolte vývojářské menu → Vývoj → Zobrazit JavaScriptovou konzoli

Zkontrolujte zprávy konzole

Hledejte:

✓ ai4shops.com v2.1.0 úspěšně načten
✓ Projekt: proj_abc123
✓ Widgety: 2 formuláře, 1 modal, 1 chatbot

Pokud vidíte chyby, viz Řešení problémů níže.

Otestujte widgety

Formuláře: Měly by se zobrazit na stránce
vyskakovací okna: Měly by se spustit podle nastavení
Chatbot: Bublina chatu by se měla objevit

Řešení problémů

Skript se nenačítá

Chyba: "Nepodařilo se načíst prostředek"

Možné příčiny:

Překlep v URL
Problém s internetovým připojením
Firewall/blokátor reklam
Problém serveru (zkontrolujte status.ai4shops.com)

Řešení:

Ověřte, že URL je přesně: https://ai4shops.com/embed.js
Zkontrolujte konzoli prohlížeče pro detaily
Zkuste jiný prohlížeč
Kontaktujte podporu, pokud přetrvává

Neplatný API klíč

Chyba: "Ověření selhalo: Neplatný API klíč"

Řešení:

Zkopírujte API klíč z dashboardu (Nastavení → API klíče)
Ujistěte se, že jste zkopírovali celý klíč
Regenerujte, pokud je kompromitován
Aktualizujte skript novým klíčem

Widgety se nezobrazují

Formuláře se neobjevují:

Zkontrolujte, zda je formulář nastaven jako "Aktivní" v dashboardu
Ověřte, že data-form-id je správné
Hledejte CSS konflikty (použijte inspektor prohlížeče)
Zkontrolujte, zda formulář nemá podmínky zobrazení

vyskakovací okna nespouštějí:

Zkontrolujte nastavení triggerů (exit intent, scroll, časové zpoždění)
Ověřte, že modal je "Publikován"
Možná je třeba počkat na podmínku triggeru
Vyzkoušejte trigger "Při načtení stránky"

Chatbot není viditelný:

Ujistěte se, že chatbot je "Publikován" v nastavení
Zkontrolujte pozici (může být mimo obrazovku)
Hledejte CSS z-index konflikty
Ověřte, že existují tréninková data

Bezpečnostní nejlepší postupy

Uchovávejte API klíče v bezpečí

DĚLEJTE:

✅ Používejte ve veřejném HTML webu (je to bezpečné - omezené doménou)
✅ Regenerujte, pokud je kompromitován
✅ Nastavte povolené domény

NEDĚLEJTE:

❌ Sdílejte ve veřejných repozitářích (použijte proměnné prostředí)
❌ Používejte stejný klíč napříč více projekty
❌ Zahrnujte ve veřejné dokumentaci

Omezení domén

Uzamkněte své widgety:

Nastavení → Bezpečnost → Povolené domény

Přidejte své domény:

https://example.cz
https://www.example.cz
https://obchod.example.cz

Widgety fungují pouze na uvedených doménách

Profesionální tip: Přidejte jak www, tak non-www verze vaší domény!

Pokročilé použití

Programová kontrola

Ovládejte widgety pomocí JavaScriptu:

Zobrazit/Skrýt chatbota:

// Skrýt chatbota
window.AI4Shops.chatbot.hide();
 
// Zobrazit chatbota
window.AI4Shops.chatbot.show();
 
// Přepnout
window.AI4Shops.chatbot.toggle();

Otevřít/Zavřít modal:

// Otevřít konkrétní modal
window.AI4Shops.modal.open("modal_abc123");
 
// Zavřít všechny vyskakovací okna
window.AI4Shops.modal.close();

Spustit formulář:

// Otevřít formulář v modalu
window.AI4Shops.form.openModal("form_xyz789");

Event listenery

Reagujte na události widgetů:

// Poslouchat odeslání formulářů
window.addEventListener("ai4shops:form:submitted", (event) => {
  console.log("Formulář odeslán:", event.detail);
  // Odeslat do analytik, zobrazit poděkování, atd.
});
 
// Poslouchat zprávy chatu
window.addEventListener("ai4shops:chat:message", (event) => {
  console.log("Zpráva chatu:", event.detail);
});
 
// Poslouchat zobrazení vyskakovacích oken
window.addEventListener("ai4shops:modal:viewed", (event) => {
  console.log("Modal zobrazen:", event.detail);
});

Vlastní stylování

Přepište výchozí styly:

/* Přizpůsobit tlačítko chatbota */
.ai4shops-chatbot-button {
  background-color: #ff6b6b !important;
  border-radius: 50% !important;
}
 
/* Přizpůsobit vstupy formuláře */
.ai4shops-form-input {
  border: 2px solid #4ecdc4 !important;
  border-radius: 8px !important;
}
 
/* Přizpůsobit modal */
.ai4shops-modal-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

Používejte !important pro přepsání výchozích stylů. Budoucí aktualizace mohou změnit názvy tříd.

Další kroky

Vytvořte svůj první formulář

Vytvořte formulář k vložení

Nastavte chatbota

Trénujte a nasaďte AI chat

Instalace je jednoduchá, ale výkonná! Nyní udělejte svůj web interaktivní! 🚀✨

Instalační skript

Základní skript

Kam to přidat

Nejlepší praxe: Před </body>

Metody instalace

Metoda 1: Globální instalace projektu (doporučeno)

Metoda 2: Specifický widget

Možnosti konfigurace

Možnosti zobrazení

Možnosti výkonu

Instalace podle platformy

WordPress

Shopify

Vlastní HTML

Ověření instalace

Přidejte skript

Navštivte svůj web

Otevřete vývojářskou konzoli

Zkontrolujte zprávy konzole

Otestujte widgety

Řešení problémů

Skript se nenačítá

Neplatný API klíč

Widgety se nezobrazují

Bezpečnostní nejlepší postupy

Uchovávejte API klíče v bezpečí

Omezení domén

Pokročilé použití

Programová kontrola

Event listenery

Vlastní stylování

Další kroky

Vytvořte svůj první formulář

Nastavte chatbota

Nejlepší praxe: Před `</body>`