Přeskočit na obsah
ChatbotIQ

Tutoriál: Sladěte widget se svou značkou

Chatbot, který vypadá, jako by na váš web patřil, vzbuzuje důvěru. V tomto tutoriálu sladíte widget ChatbotIQ se svou značkou, od barev a písem až po ikonu spouštěče a uvítací zprávu.

Potřebný čas: Přibližně 10 minut.

Co budete potřebovat: Primární barvu své značky (hex kód), logo nebo ikonu (volitelně) a nápad na uvítací zprávu.

Co se naučíte:

  • Jak nastavit barvy značky ve widgetu
  • Jak přizpůsobit tlačítko spouštěče
  • Jak nastavit záhlaví s vaším logem
  • Jak napsat povedenou uvítací zprávu a navrhované otázky
  • Jak si prohlédnout náhled na počítači i na mobilu

Krok 1: Otevřete Návrhář widgetu

Sekce “Krok 1: Otevřete Návrhář widgetu”
  1. Přejděte na Boti a u svého bota klikněte na “Design a nasazení”.
  2. Jste v Playgroundu. Levý panel ukazuje živý náhled widgetu na simulovaném pozadí webu.
  3. Pravý panel je Návrhář widgetu, kde probíhá veškeré přizpůsobení.

Každá změna se v náhledu projeví okamžitě. Nemusíte nic ukládat ani obnovovat.

Krok 2: Nastavte barvy své značky

Sekce “Krok 2: Nastavte barvy své značky”
  1. V Návrháři widgetu najděte sekci Barvy.
  2. Nastavte Primární barvu na barvu své značky (např. #4F46E5 pro indigo). Ovlivní tlačítko spouštěče i bubliny uživatelských zpráv.
  3. Podle potřeby dolaďte ostatní barvy:
    • Bublina bota: dobře funguje světlá verze barvy značky nebo světle šedá.
    • Pozadí: obvykle bílá nebo velmi světlý odstín.
    • Barva textu: nechte tmavou kvůli čitelnosti.

Tip: Pro spouštěč a uživatelské bubliny se držte primární barvy značky. Na pozadí chatu a text volte neutrální barvy (bílou, světle šedou, tmavě šedou). Zůstane to čisté a dobře čitelné.

Krok 3: Přizpůsobte tlačítko spouštěče

Sekce “Krok 3: Přizpůsobte tlačítko spouštěče”

Spouštěč je plovoucí tlačítko, které návštěvníci na webu vidí.

  1. Přejděte do sekce Spouštěč.
  2. Zvolte Styl spouštěče:
    • Pouze ikona: čisté a minimalistické (nejoblíbenější).
    • Ikona + text: ikona s popiskem, třeba “Napište nám”.
    • Pouze text: jen textový popisek.
  3. Zvolte Ikonu spouštěče: na výběr je bublina chatu, jiskra, sluchátka, robot a další. Nebo nahrajte vlastní.
  4. Vyberte Tvar spouštěče: kruh, zaoblený čtverec nebo squircle.
  5. Volitelně přidejte Efekt spouštěče (v sekci Chování): jemné pulzování nebo záře dokáže upoutat pozornost, aniž by rušilo.

Krok 4: Nastavte záhlaví

Sekce “Krok 4: Nastavte záhlaví”

Když se widget otevře, záhlaví je první věc, kterou návštěvník uvidí.

  1. Přejděte do sekce Záhlaví.
  2. Nastavte Nadpis, něco lákavého:
    • “Potřebujete pomoc?”
    • “Zeptejte se nás na cokoli”
    • “Napište nám, [Název společnosti]”
  3. Nastavte Podnadpis (volitelně):
    • “Obvykle odpovídáme okamžitě”
    • “Poháněno AI”
    • “K dispozici 24/7”
  4. Zvolte Ikonu avatara, nahrajte firemní logo nebo vyberte přednastavenou ikonu.

Krok 5: Napište uvítací zprávu

Sekce “Krok 5: Napište uvítací zprávu”

Uvítací zpráva se objeví, jakmile návštěvník poprvé otevře prázdný chat.

  1. V sekci Záhlaví najdete pole pro zprávy.
  2. Nastavte Uvítací zprávu. Udržte ji přátelskou a vybízející k akci:

Dobré příklady:

  • “Ahoj! Pomůžu vám najít odpovědi o [Produkt]. Zeptejte se na cokoli, nebo vyzkoušejte některý z návrhů níže.”
  • “Vítejte! Naši dokumentaci znám nazpaměť. S čím vám mohu pomoci?”
  • “Zdravím! Potřebujete poradit? Položte mi otázku, nebo si projděte témata níže.”
  1. Nastavte Zástupný text vstupu pro vstupní pole:
    • “Napište svou zprávu…” (výchozí)
    • “Zeptejte se na cokoli…”
    • “Co byste chtěli vědět?”

Krok 6: Přidejte navrhované otázky

Sekce “Krok 6: Přidejte navrhované otázky”

Navrhované otázky se v prázdném chatu zobrazí jako klikatelné prompty. Nasměrují návštěvníky k běžným tématům.

  1. Otevřete nastavení bota (ikona ozubeného kola).
  2. Přidejte 3-5 Navrhovaných otázek, které pokryjí vaše nejdůležitější témata:
    • “Jak začnu?”
    • “Jaké cenové plány nabízíte?”
    • “Jak kontaktuji podporu?”
    • “Co všechno je v ceně?”
  3. Nastavte Počet navrhovaných otázek podle toho, kolik jich chcete ukázat (tři obvykle stačí).

Krok 7: Náhled na mobilu

Sekce “Krok 7: Náhled na mobilu”
  1. V Playgroundu klikněte na přepínač náhledu na mobilu.
  2. Zkontrolujte, že:
    • spouštěč je vidět a nepřekrývá jiné prvky,
    • okno chatu je na malé obrazovce čitelné,
    • barvy a písma vypadají dobře i v mobilní velikosti.
  3. Pokud chcete widget na mobilech skrýt, vypněte Zobrazit na mobilech.

Krok 8: Uložte a vložte

Sekce “Krok 8: Uložte a vložte”

Přizpůsobení se ukládá automaticky. Teď stačí widget vložit na web:

  1. Přepněte na záložku Nasazení.
  2. Zkopírujte kód widgetu.
  3. Vložte ho do HTML svého webu.

Navštivte svůj web a pokochejte se chatbotem v barvách vaší značky.

Související

Sekce “Související”