Custom Cards

custom card custom card 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 how to use? how to use? adding a custom card node is simple follow the steps below to get started step 1 go to builder and click on "+ add node" step 2 select the custom card node from the display information section step 3 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 step 4 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 example example \<! html > \<div class="custom card"> \<h3>welcome to moplet 🎉\</h3> \<p>discover powerful automation tools for your business \</p> \</div> / css / custom card { background #e0f7fa; padding 16px; border radius 10px; font family arial, sans serif; } the final output will appear as a clean, styled block inside the chatbot conversation validation error view validation error view 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 additional information additional information html & css validation 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 card storage 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 rendering method 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 use cases use cases 🛍️ 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 best practices best practices ✅ 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 theme styling theme styling 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 important notes important notes 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