If you're looking for a more custom feature that can't be built with the functionality currently available on our drag and drop builder, you can utilise AI tools such as ChatGPT, Gemini or even our chatbot, Mai, to generate it for you. The code can then be added to a Custom Code Block on any of your app pages.
How to Generate Code with AI (Including Mai)
You can ask Mai or another AI tool to generate an embedded code snippet that works inside an existing webpage. It is important to let the AI tool know that the HTML should be self-contained meaning no <html>, <head>, or <body> tags are required. Use a prompt like this:
"I need an HTML, CSS, and JavaScript snippet that I can embed as custom code inside an existing webpage. The widget should [describe your desired feature here in as much detail as possible including any styling requirements]. The HTML should be self-contained—no <html>, <head>, or <body> tags."
Example: Interactive Info Card that Flips on Click
You could ask ChatGPT or Mai:
"I need an HTML, CSS, and JavaScript snippet that I can embed as custom code inside an existing webpage. The widget should display a card (~400px tall, 250px wide) that flips on click to reveal additional information on the back.
Requirements:
• The card should be centred on the page both horizontally and vertically.
• It should have a front and back side, with the back containing placeholder text
• The front of the card should have a background image (use a placeholder image for now).
• The card should flip smoothly using CSS transitions when clicked.
• No <html>, <head>, or <body> tags—just valid embedded HTML, <style>, and <script> that works inside an existing document.
• Ensure the card is fully responsive and does not get clipped on smaller screens.
• Use https://placehold.co/ for placeholder images "
This would generate a snippet like:
<style>
.card-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
padding: 50px 0; /* Prevents clipping */
}
.card-container {
width: 250px;
height: 400px;
perspective: 1000px;
cursor: pointer;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.flipped {
transform: rotateY(180deg);
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
color: white;
font-size: 18px;
text-align: center;
padding: 20px;
}
.card-front {
background: url('https://placehold.co/250x400') no-repeat center/cover;
}
.card-back {
background: #1E1E1E;
transform: rotateY(180deg);
}
.card-back ul {
list-style-type: none;
padding: 0;
}
.card-back li {
color: white; /* Ensures text is white */
}
</style>
<div class="card-wrapper">
<div class="card-container" onclick="flipCard(this)">
<div class="card">
<div class="card-face card-front"></div>
<div class="card-face card-back">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Curabitur blandit tempus</li>
<li>Nulla vitae elit libero</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function flipCard(element) {
element.querySelector('.card').classList.toggle('flipped');
}
</script>
Using the Generated Code in Movement
Copy the HTML, CSS, and JavaScript.
Paste it into a Custom Code Block inside your app.
Preview your app to test the feature (custom code wont render inside the builder - only the live app).
With this approach, you can quickly create interactive custom widgets for your Movement app. If you need more help, just ask Mai! 🚀