The new editor's text component supports pasting in AI-generated code
The Feversocial editor supports a rich set of standard components, but if the standard components can't meet your visual needs, you can use AI to help lay things out and generate the HTML code you need. The text component in Feversocial's new editor supports pasting in AI-generated code, as long as it follows our safe development guidelines. See the article below, and instruct the AI to follow these guidelines when generating code.
Editor — Core AI-Generated HTML/CSS Development Guidelines
How to paste in code
Use the text component provided by the editor
In the text component's toolbar, click the <> icon to paste your AI-generated code directly. The system automatically filters out anything risky to keep it within safe development guidelines.
How to support highly custom animation
A reminder — under our safe development guidelines, the system blocks third-party packages and JavaScript. If your content absolutely requires dynamic code, you have 2 options.
Use the Embed component provided in the editor
Overview and comparison of each approach
Implementation path | Best for | Pros | Cons |
1. Native AI snippet following Feversocial's page guidelines | General UI components, entrance animations, static content | Best SEO performance, fast loading, no extra setup needed, protected by the system. | Doesn't support custom JavaScript logic. |
2. Installing an SDK via GTM | When you need Lucide icons, Lottie animations, or third-party analytics packages. | Professional management, clean code, supports global JS SDKs, and keeps SEO benefits. | Requires a CNAME setup and GTM admin access. |
3. Embed component | When you need complex JS interactions (like a calculator or custom player) and can't use GTM. | Highly flexible, supports full JS/HTML/CSS. | Loses SEO benefits; content is stored on a CDN domain instead of your main domain. |
Detailed breakdown of each approach
Approach 1: Follow the AI-generation guidelines (native code snippet)
This is the most recommended approach, suitable for 90% of on-page visual components. You can paste AI-generated code directly into the text editor component.
Technical details: Uses plain HTML and CSS, with animation handled through the built-in
USAL.jsor CSS@keyframes.SEO performance: Excellent. Content lives directly in the page's HTML structure, so search engines can fully crawl it.
Development limits:
<script>tags aren't allowed. If you need dynamic logic, you can only rely on CSS states (like:hover,:checked).
Extendable: adding a specific third-party SDK (via GTM)
For when your design needs Lucide, FontAwesome, or another JS-driven visual package.
Technical details: Install the SDK in GTM, then paste only the trigger tag (like
<i>) into the editor.SEO performance: Excellent. The main HTML still lives on the page; icons and similar elements are rendered by JS.
Development limits: Requires a completed CNAME setup. If your URL is still Feversocial's native URL, GTM won't fire.
Approach 2: Use the Embed component (a JavaScript alternative)
If you must run custom JavaScript (like an API integration or complex calculation) and can't use GTM, you can use the editor's source-code component instead.
Technical details: Embed the code using the editor's Embed feature.
SEO performance: Poor. The code is stored on the
fevercdn.comdomain and rendered as an embed, making it hard for search engines to index the content.Development limits: Only works within that block, and its styling is harder to blend seamlessly with the main page.
Suggested prompts for AI
Once you've decided on your approach, give the AI the matching instruction:
If you chose Approach 1:
"Please follow Feversocial's core development guidelines — use
fs-custom-naming, no JavaScript, no pseudo-elements, and use USAL.js for animation."If you chose the extendable approach:
"Please use Lucide tag formatting — the SDK is already installed via GTM in this environment — and otherwise follow Feversocial's core development guidelines."
If you chose Approach 3:
"This code will be used in the Embed component, so you can use JavaScript, but make sure everything is wrapped inside a single standalone container."