With code generation, you can insert custom interactive elements and effects directly onto your pages. Unlike regular page or form creation, you work directly in the dedicated custom code area.
Here, the AI assistant creates code snippets that specifically enhance and improve your site.
🎬 At the end of the article, you'll find our latest video tutorial!
What’s possible
The AI can generate many small but powerful elements inside the custom code frame, including:
Labels and badges
Charts (bar charts, pie charts, progress indicators)
Calculators (simple, client-side logic)
Custom buttons with unique behaviors
Entire sections styled in code
Elements with effects, such as typewriter text or animated counters
Essentially, if it fits inside the code frame, you can attempt it.
What’s not possible
There are some limits you should keep in mind:
No back-end logic (e.g. database connections, server-side actions)
No effects that change the entire page or large parts of a section (e.g. full custom background animations)
No extremely complex applications. The assistant is best for focused, lightweight features.
No editing of existing Onepage elements
Start a chat with the AI assistant
With custom code, you can further expand the possibilities of your site; AI helps you create your own code and even integrate images.
Step 1: Add a section
Add a new section and select "Custom Code".
Step 2: Open the chat window
You now have the option to open the chat window and write in detail what you want the AI to create.
Writing effective prompts
Unlike page or form prompts, code generation requires more precise instructions. It works like an "AI-native tool": You should describe exactly what you want, sometimes even including technical details.
Examples of good prompts:
"Create a countdown timer that starts at 10 minutes and shows minutes:seconds."
"Add a typewriter effect to this text: 'We build AI websites faster than anyone else.'"
"Generate a progress bar that fills to 75% with the label 'Project complete'."
"Make a button that changes color when hovered and links to the pricing section."
"Create a simple calculator that adds two numbers together and shows the result."
"Add an animated number counter that counts from 0 to 500 in 3 seconds."
"Generate a pie chart showing Sales 60%, Marketing 25%, Operations 15%."
"Build a sliding testimonial carousel with 3 quotes."
"Create a floating label that says ‘New!’ in the top right corner of a product image."
"Add a button that smoothly scrolls the page back to the top when clicked."
"Generate a bar chart comparing Revenue, Expenses, and Profit."
"Create a blinking cursor effect at the end of a heading."
"Make a card element with hover animation: zoom in slightly and add a shadow."
"Add a rotating text effect cycling between 'Fast', 'Flexible', 'Powerful'."
"Create a progress circle that fills to 90% with the label 'Customer Satisfaction.'"
📌 Please note: The examples shown are for guidance only. When using the AI assistant, you must always specify exactly what you want created, including:
Text to appear in headings
Content of tiles or elements
Precise text for buttons or labels
Since these elements are not editable text fields, the AI can only work correctly if it knows all the content from the start. The more precise your specifications, the more accurate the result.
So, for example: “Create a calorie calculator in English and include the following color: #00d54b.”
You can review the result and then decide whether to accept or reject it.
If you accept the final result, you have the option to make further adjustments.
Example: “Please make the ‘Calculate calories’ button round with a radius of 0px”.
If the first result isn't satisfactory, you can try again and click Decline. Regenerating preserves the existing code structure while rebuilding or adjusting content and effects.
Finding a starting point
If you're unsure what to request:
Take a screenshot of the effect you want to replicate.
Paste it into the AI assistant and ask it to create something similar.
The assistant will understand your idea and generate code based on it.
Example: "Create rotating buttons like the ones in the screenshot:
1. Copywriting
2. Logo Design
3. SEO Optimization
For each category, clicking on a button should display a short list with two specific examples of services, including prices.
1. Copywriting:
Blog article (500 words) - €150
Product description (up to 300 words) - €80
2. Logo Design:
Simple logo design - €250
Logo with branding guide - €600
3. SEO Optimization:
Simple SEO optimization - €300
Keyword analysis & report - €200
The layout should be clear, with active button highlighting and a clear separation of the categories."
The screenshot:
You can simply insert this into the chat window, or you can use the upload function "+ Upload media text".
The final result could then look like this:
Here too, you can chat with the AI assistant and make adjustments until you are completely satisfied with the result.
Video Tutorial
For a clearer overview of the process, you can also watch our video tutorial below:
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂