Custom HTML Teaser node in SmartFlow

This guide explains how to format custom HTML for the Custom HTML Teaser node in SmartFlow in Incomaker Next.

HTML Teaser Formatting Guide

You can create a custom HTML teaser using any AI chatbot. Simply copy the instructions below, provide them to your chatbot, and describe how you want your teaser to look.

Required HTML classes:

• .inco_teaser_container – The main wrapper <div> containing the entire teaser.
• .inco_teaser – The clickable teaser area. Clicking it automatically opens the popup.
• .inco_teaser_x – The close button. Clicking this element automatically closes the teaser.

Important rules:

• All three classes are required for the teaser to work correctly.
• You can fully customize the HTML structure, CSS, colors, fonts, animations, and positioning.
• Keep all CSS inside a <style> tag within the main container.
• Do not rename or remove the required classes.
• No additional JavaScript is needed for opening or closing the teaser.

Example HTML Teaser

<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>Get $10 off your first order!</span>
    <span class="inco_teaser_x">&times;</span>
  </div>
</div>

Create Your Own with AI

Copy this prompt into ChatGPT or any other AI chatbot:

Create a custom HTML teaser for my website.

The teaser must use these three required CSS classes:

• .inco_teaser_container – Main wrapper.
• .inco_teaser – Clickable area that opens a popup.
• .inco_teaser_x – Close button.

Include all CSS inside a <style> tag within the main container. Do not include JavaScript, as click and close functionality is handled automatically.

My teaser idea: [Describe your desired design, text, colors, position, and animations here.]

Return the complete, ready-to-use HTML code.

Was this article helpful?

YesNo