Uzel Custom HTML Teaser ve SmartFlow

Tento návod popisuje formátování vlastního HTML pro uzel Custom HTML Teaser ve SmartFlow v Incomaker Next.

Průvodce formátováním HTML teaseru

Vlastní HTML teaser můžete vytvořit pomocí libovolného AI chatbota. Stačí zkopírovat pokyny níže, předat je chatbotovi a popsat, jak má váš teaser vypadat.

Povinné HTML třídy:

• .inco_teaser_container – Hlavní obalový prvek <div>, který obsahuje celý teaser.
• .inco_teaser – Klikatelná plocha teaseru. Kliknutím na ni se automaticky otevře vyskakovací okno.
• .inco_teaser_x – Zavírací tlačítko. Kliknutím na tento prvek se teaser automaticky zavře.

Důležitá pravidla:

• Aby teaser správně fungoval, musí obsahovat všechny tři třídy.
• Strukturu HTML, CSS, barvy, písma, animace i umístění můžete libovolně upravit.
• Veškeré CSS ponechte uvnitř značky <style> v hlavním kontejneru.
• Povinné třídy nepřejmenovávejte ani neodstraňujte.
• Pro otevření ani zavření teaseru není potřeba přidávat JavaScript.

Ukázka HTML teaseru

<div class="inco_teaser_container">
  <style>
    .inco_teaser_container {
      position: fixed;
      bottom: 0;
      right: 10px;
      z-index: 90;
    }

    .inco_teaser {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 12px 20px;
      background: #1c1c1c;
      color: white;
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      font-family: Arial, sans-serif;
    }

    .inco_teaser_x {
      color: #aaa;
      font-weight: bold;
      cursor: pointer;
    }

    .inco_teaser_x:hover {
      color: red;
    }
  </style>

  <div class="inco_teaser">
    <span>Získejte slevu 10 $ na první objednávku!</span>
    <span class="inco_teaser_x">&times;</span>
  </div>
</div>

Vytvořte si vlastní teaser pomocí AI

Zkopírujte následující zadání do ChatGPT nebo jiného AI chatbota:

Vytvoř vlastní HTML teaser pro můj web.

Teaser musí používat tyto tři povinné CSS třídy:

• .inco_teaser_container – Hlavní obalový prvek.
• .inco_teaser – Klikatelná plocha, která otevře vyskakovací okno.
• .inco_teaser_x – Zavírací tlačítko.

Veškeré CSS vlož do značky <style> uvnitř hlavního kontejneru. Nepřidávej JavaScript, protože kliknutí a zavírání jsou obsluhovány automaticky.

Moje představa teaseru: [Zde popište požadovaný design, text, barvy, umístění a animace.]

Vrať kompletní HTML kód připravený k použití.