Customization Guide
Learn how to edit, style, and extend your Draftly site without touching code.
How Customization Works
Draftly gives you three ways to customize your site after generation:
1. Click-to-Edit (Inline Editing) — Toggle Edit in the preview toolbar, then click any text or element. The inspector shows typography, spacing, colors, and animation controls. Changes apply live.
2. Chat-to-Modify — Type one focused instruction per message (e.g. "change the hero background to dark navy", "add a pricing section"). Draftly patches only the relevant parts — typically 0.5 credits per edit.
3. Regenerate Website UI — Click ↺ Regenerate Website to run a fresh AI design pass while keeping your video, images, and scroll frames.
Optional: switch to a preset template from the template picker for a faster layout swap.
Recommended Customization Workflow
For the smoothest experience, follow this order:
Avoid: vague requests like "make it better" — specify what to change. Use Guide (header) or ask in chat: "How do I customize text?"
Editing Text & Colors
To edit any element inline:
You can also click AI Rewrite to let Draftly rewrite the selected text in a better tone, or Replace Image to swap out a background or product image.
Using Design Presets
Design Presets let you change the entire visual style of your site in one click.
Presets combine with your content — your text, sections, and brand name stay the same; only the visual system changes.
Chat-to-Modify
Chat-to-modify is the fastest way to make structural changes without full regeneration.
How it works: Type any instruction into the chat bar while your site is loaded. Examples: - *"Change the hero headline to something more exciting"* - *"Add a FAQ section between pricing and contact"* - *"Make the color scheme darker and more professional"* - *"Rewrite the about section to be more personal"* - *"Replace the hero CTA button text with 'Get a Free Quote'"*
Draftly sends only the relevant section of your site's HTML to the AI — not the whole page — so edits are fast and cost 0.5 credits instead of the full regeneration cost.
Tips: - Be specific: "change the nav background to black" works better than "make it darker" - Reference sections by name: "the services section", "the footer" - You can chain edits — each chat message is a new targeted patch
Adding Analytics & Tracking
Connect Google Analytics, Google Tag Manager, Facebook Pixel, or any custom tracking script to your site — no code required.
G-XXXXXXXXXX). Find it in GA4 → Admin → Data Streams.GTM-XXXXXXX). Find it in GTM → Admin → Container ID.<script> block to inject into <head> (HTTPS sources only).All scripts are injected into the <head> of your published site HTML. GTM also gets the required <noscript> iframe injected after <body>.
Adding a Contact Form
Every Draftly site can include a working contact form that sends submissions directly to your Draftly inbox and emails you a notification.
How it works:
- If your generated site already has a <form> element (common in sites with a Contact section), Draftly patches it to submit to the Draftly backend.
- If no form exists, Draftly injects a styled form section before the footer.
- Submissions are stored in your Draftly account under the site's Submissions tab.
- You receive an email notification for each new submission with the visitor's name, email, and message.
All data stays within Draftly — no third-party form services required.