🖼️ Modul Karusel

Modul Karusel umožňuje vašemu botovi prezentovat informace v rolovatelném rozložení karet. Karusely se běžně používají k zobrazení produktů, služeb nebo možností vizuálně poutavým způsobem. Každá karta může obsahovat název, popis, obrázek a tlačítka.

Manuální režim

• Přidávejte karty jednu po druhé přímo v editoru.

• Každá karta může obsahovat:

  • Název + Popis

  • Obrázek a URL obrázku (zobrazeno po kliknutí na obrázek)

  • Více tlačítek

    • Tlačítka URL – otevřou odkaz

    • Akční tlačítka – fungují jako tlačítka v běžných zprávách v chatu (pokračování dialogu).

Dynamický režim

Místo manuální tvorby karet je možné je generovat z JSON pole uloženého v proměnné $context.

• Každý objekt v JSON = jedna karta v karuselu.

• Komponenty karty (název, popis, obrázek, odkaz) lze mapovat na klíče v JSON.

• Používejte syntaxe šablon: {{ title }}, {{ description }}, atd.

Příklad JSON

[
  {
    "name": "Chatbot",
    "description": "Automate conversations on your website chat",
    "imgUrl": "https://cdn.../Chatbot.png",
    "link": "https://www.coworkers.ai/chatbot"
  },
  {
    "name": "RBM Agent",
    "description": "Send SMS with rich content",
    "imgUrl": "https://cdn.../RBMbot.png",
    "link": "https://www.coworkers.ai/rbm-agent"
  },
  {
    "name": "Voicebot Outbound",
    "description": "Automate outgoing calls with Voicebot",
    "imgUrl": "https://cdn.../Voicebot.png",
    "link": "https://www.coworkers.ai/voicebot-outgoing"
  }
]

Kroky použití dynamického karuselu:

1. Uložte svůj JSON do proměnné $context (například $cwProducts).

2. V sekci JSON s daty karuselu vyberte $context.

3. Mapujte klíče v JSON na komponenty karuselu (název, popis…) pomocí zástupců {{ }} (například {{ prodName }}).

Režim HTML na míru

Pro pokročilé přizpůsobení přepněte z Základního obsahu na HTML obsah (kontaktujte podporu, pokud tuto možnost ve svém Karuselovém modulu nevidíte). Tím získáte přístup k plnohodnotnému HTML editoru, kde můžete definovat svou vlastní šablonu karty.

<div class="product-card">
  <a class="title" href="{{link}}">{{name}}</a>
  <div class="price">{{description}}</div>
  <div class="action-btn">
    <a class="more-btn" href="{{link}}">More</a>
  </div>
</div>

<style>
.product-card { width: 100%; padding: 12px; color: #04477A; }
.product-card .title { color: #18214D; font-weight: bold; text-decoration: none; }
.product-card .title:hover { text-decoration: underline; }
.price { font-size: 18px; font-weight: bold; margin: 12px 0; }
.action-btn { display: flex; gap: 8px; margin-top: 8px; }
.more-btn { flex: 1; background-color: #F4F4F4; border-radius: 4px; padding: 6px; text-decoration: none; font-weight: bold; }
.more-btn:hover { opacity: 0.85; }
</style>

To vám umožňuje:

• Přizpůsobit stylování CSS vaší značky

• Přidat vlastní akce (například tlačítko „Přidat do košíku“)

• Vytvořit zcela jedinečné rozložení.

Ověrené postupy

Kdy použít který režim:

• Manuální → Malé, fixní sady karet (například FAQ nebo top 3 odkazy).

• Dynamický → Větší, na datech založené karusely (například seznamy produktů, výsledky hledání).

• HTML na míru → Pokud potřebujete plnou kontrolu nad stylem a funkcionalitou.