Custom Cards
The Custom Card node is a powerful feature in Engati’s conversational automation platform that allows you to insert your own custom-designed layout or content into a chatbot flow using HTML and CSS. This gives you complete flexibility to design and display rich content such as product highlights, promotional banners, personalized messages, and more.
You can create visually engaging cards using your own layout and styling while ensuring that the content is securely validated and safely rendered inside the chatbot UI. The node helps you offer a more tailored and branded experience to your users.
Adding a Custom Card node is simple. Follow the steps below to get started:
Go to Builder and click on "+ Add Node".
Select the Custom Card node from the Display Information section.
In the Custom Card editor, you will find two fields:
- HTML Content: Enter your raw HTML snippet here. You can include elements such as div, h3, p, img, and more.
- CSS Styling: Add your custom CSS styles to define the appearance of the HTML content. You can style fonts, colors, layout, spacing, etc.
Click 'Validate' to preview your card and see how it will appear. The platform validates the HTML and CSS input for security before displaying the preview.
The final output will appear as a clean, styled block inside the chatbot conversation.
If your HTML or CSS contains disallowed tags, unsafe attributes, or unsupported styles, the system will redirect you to a validation screen where you can review and accept a sanitized version of your code. This cleaned version is used to ensure secure rendering.
All HTML and CSS entered into the node goes through strict validation:
- HTML Sanitization: Tags like <script>, <iframe>, and <object> are automatically removed. Only safe tags and attributes are allowed.
- CSS Sanitization: Only safe properties like colors, padding, fonts are retained. Unsafe values like !important, @import, and untrusted URLs are blocked.
- Scoped Styling: Your styles are scoped to avoid interfering with other elements of the bot UI.
Once validated, your HTML and CSS are securely stored inside the node as part of the bot flow. These values are rendered dynamically when the bot reaches this step in the conversation.
When active, the custom card content is rendered inside a sandboxed container in the chat widget to ensure isolation and safety. Styling is applied using scoped styles or encapsulated using Shadow DOM.
- 🛍️ Custom Product Cards
- 🎉 Event Promotions or Announcements
- 💌 Personalized Welcome Cards
- 📊 Data Tables for User Info or Reports
You can customize these cards for branding, layout, and visual appeal as per your business requirements.
- ✅ Always preview your content before saving.
- 🔒 JavaScript is not supported to avoid security risks.
- 🎨 Keep styling scoped to avoid conflicts.
- 💾 Reuse custom cards by copying HTML/CSS to other nodes or flows.
Since this node uses fully custom HTML/CSS, you control the entire design. However, it’s good to follow your website/app branding guidelines to maintain consistency across platforms.
- If any part of your code is unsafe, the platform will strip it automatically.
- Use images hosted on secure (https) URLs.
- Make sure your layout is mobile-responsive.
If you face any issues while using the Custom Card node or need help with formatting your HTML/CSS, feel free to reach out to us at: 📧 [email protected]
