Page Spec v4

Bina HTML ikut idea anda, serasi dengan editor ROAS.my.

Spec ini menerangkan syarat teknikal untuk section yang boleh diedit, CTA yang boleh dipetakan ke Checkout dan asset yang selamat. Reka bentuk, copy dan urutan kandungan kekal pilihan anda bersama AI.

Cara guna ROAS.my Buka llms.txt Starter prompts

section snippet

<section data-roas-section="maklumat-utama" id="maklumat-utama">
  <div class="wrap">
    <p class="label">Koleksi baharu</p>
    <h1>Nama Produk atau Tajuk Utama</h1>
    <p>Maklumat yang user mahu paparkan pada bahagian ini.</p>
    <img src="produk-hadapan.webp" alt="Pandangan hadapan produk">
    <a class="cta" data-roas-cta>Lihat Pilihan</a>
  </div>
</section>

Satu fail HTML lengkap

Nama section unik untuk edit yang mudah

data-roas-cta hanya untuk Checkout

Spec Untuk AI

Link rasmi untuk diberi kepada ChatGPT, Claude, Gemini, atau mana-mana AI:
https://roas.my/llms.txt

Full spec HTML · v4

# ROAS.my Page Spec v4

Dokumen ini menerangkan keserasian teknikal HTML dengan ROAS.my. Reka bentuk,
bahasa, copywriting, panjang halaman dan urutan kandungan ditentukan oleh
pengguna bersama AI mereka. Tiada susunan salespage wajib.

## Cara ROAS.my bekerja
- HTML membina struktur, kandungan dan visual landing page dalam satu fail.
- ROAS.my mengurus media, produk, checkout COD/FPX, order, email, tracking,
  analytics, domain dan integrasi operasi secara berasingan.
- Jangan bina semula fungsi payment, order atau tracking platform dalam HTML.
- Import menghasilkan draft. Merchant boleh publish untuk melihat page live
  walaupun CTA checkout belum dipetakan; sistem akan memaparkan warning.

## 1. Output wajib
- Pulangkan SATU fail HTML lengkap bermula dengan <!DOCTYPE html>.
- Letak semua CSS dalam <style> di <head>.
- Tetapkan <html lang="..."> mengikut bahasa sebenar page, contohnya ms atau en.
- Teks yang mahu diedit mesti wujud dalam DOM, bukan dijana oleh JavaScript.
- JavaScript kecil untuk fungsi UI boleh diletakkan inline. Untuk portability,
  utamakan HTML/CSS atau elemen native seperti <details> jika mencukupi.
- Jangan gunakan framework, npm package, PHP, WordPress shortcode, React/Vue,
  build step atau dependency CSS/JS luaran.
- Apabila user meminta fail siap, pulangkan HTML tanpa memaksa proses kelulusan
  flow atau copy terlebih dahulu.

## 2. Kandungan milik user
- Gunakan hanya fakta, harga, testimoni, sijil dan claim yang diberi user.
- Jangan reka statistik, nama doktor, kelulusan, testimoni atau claim kesihatan.
- Ikut bahasa, tone, reka bentuk, panjang dan urutan kandungan yang user minta.
- Jika brief memberi kebebasan, AI boleh mencadangkan pendekatannya sendiri.
  Cadangan itu bukan sebahagian daripada kontrak teknikal ROAS.my.

## 3. Struktur editor ROAS.my
- Untuk output AI yang mudah dikenal pasti dalam editor, tandakan setiap
  bahagian utama dengan nama unik:
  <section data-roas-section="nama-unik" id="nama-unik">...</section>
- Contoh nama hanyalah label teknikal: pengenalan, galeri, maklumat-produk,
  pilihan, soalan, penutup. Ia tidak menentukan flow page.
- Jangan duplicate data-roas-section.
- id pada section hanya wajib jika link scroll merujuk kepadanya.
- Jika marker section tertinggal, importer memberi fallback sec-1, sec-2 dan
  seterusnya. Nama bermakna tetap lebih mudah digunakan ketika edit.
- Jangan cipta atribut data-roas-id. ROAS.my menambahkannya semasa import.
- Gunakan HTML semantik: h1 hanya sekali, kemudian h2/h3 mengikut hierarki.

## 4. Gambar dan media
- Guna nama fail lokal yang deskriptif, contohnya:
  <img src="produk-hadapan.webp" alt="Penerangan gambar">
- Jangan guna URL gambar luaran, base64, blob, CSS background URL luaran atau
  hotlink. User akan upload gambar sebenar dalam Media ROAS.my.
- Jika gambar belum tersedia, tetap sediakan tag <img> pada lokasi yang tepat.
- Beri width dan height atau aspect-ratio untuk elakkan layout shift.
- Gunakan object-fit: cover hanya jika crop tidak menjejaskan produk atau teks.
- Jangan jadikan teks penting sebagai sebahagian daripada gambar.
- YouTube dibenarkan melalui https://www.youtube.com/embed/VIDEO_ID sahaja.

## 5. CTA dan checkout
- Hanya butang yang patut membuka Checkout menggunakan marker:
  <a class="..." data-roas-cta>Teks CTA</a>
- Jangan letak href pada data-roas-cta. Import menukarnya kepada Checkout CTA
  yang belum dipetakan; merchant kemudian memilih Product/Checkout dalam editor.
- Link scroll biasa guna href="#nama-section" dan target mesti mempunyai id.
- Link luaran boleh guna URL HTTPS penuh.
- Tindakan bukan checkout seperti scroll, WhatsApp atau URL biasa tidak
  menggunakan data-roas-cta.
- Jangan bina form order, cart, payment selector atau checkout sendiri.
  ROAS.my menyediakan validation, harga, COD/FPX, tracking dan order.
- Harga yang kelihatan dalam HTML ialah teks paparan sahaja. Jumlah yang dicaj,
  Product, shipping dan fee datang daripada setting Checkout ROAS.my.

## 6. Script, tracking dan payment
- Functional inline script untuk interaksi page seperti accordion atau tab
  dibenarkan pada paste/upload HTML, selagi tidak memuat dependency luaran.
- Import melalui URL membuang script pihak ketiga. Jangan bergantung pada
  WordPress/plugin runtime atau external JavaScript untuk fungsi asas page.
- Jangan masukkan Meta Pixel, CAPI, GA4, GTM, TikTok Pixel, Clarity, Hotjar,
  affiliate pixel atau script analytics lain.
- Jangan masukkan fbq(), gtag(), dataLayer, ttq atau noscript tracking.
- Jangan masukkan service worker, push notification, popup pihak ketiga,
  live-chat script atau code yang mengubah checkout.
- ROAS.my inject tracking daripada Settings dan membuang tracking lama.

## 7. CSS dan responsive
- Mobile-first bermula pada 320px. Tiada horizontal scroll.
- Container utama disyorkan max-width 1100-1200px dengan padding 16-24px.
- Gunakan grid/flex responsive; satu kolum pada mobile.
- Jangan skala font berdasarkan viewport width sahaja. Gunakan clamp() dengan
  minimum dan maksimum yang munasabah jika perlu.
- Pastikan button sekurang-kurangnya 44px tinggi dan teks tidak terpotong.
- Elakkan fixed height pada section kandungan.
- Jangan gunakan z-index melampau, overlay yang menghalang checkout, negative
  margin berlebihan, decorative orb atau animasi berat.
- Hormati prefers-reduced-motion. Hadkan font kepada maksimum dua keluarga.

## 8. Accessibility dan trust
- Gunakan lang mengikut bahasa page, meta charset dan viewport.
- Semua gambar ada alt yang bermakna; gambar dekoratif guna alt="".
- Warna teks/latar perlu contrast jelas.
- Gunakan <button> untuk tindakan UI dan <a> untuk navigasi.
- FAQ disyorkan guna <details><summary>.
- Jangan papar countdown palsu, stok palsu atau notifikasi jualan rekaan.

## 9. External asset yang dibenarkan
- Google Fonts melalui <link href="https://fonts.googleapis.com/...">.
- YouTube melalui https://www.youtube.com/embed/VIDEO_ID.
- Selain dua perkara ini, page mesti self-contained dan media menggunakan
  nama fail lokal untuk dimasukkan ke ROAS.my.
- Jika user hanya mempunyai URL gambar, mereka boleh import URL itu melalui
  Media ROAS.my. HTML akhir tetap perlu merujuk asset lokal, bukan hotlink.

## 10. Checklist sebelum pulangkan HTML
- Satu fail HTML lengkap dan boleh dibuka terus dalam browser.
- Section utama mempunyai data-roas-section unik dan nama yang bermakna.
- Hanya CTA checkout menggunakan data-roas-cta tanpa href.
- Semua gambar menggunakan nama fail lokal dan alt text.
- Tiada tracking, form order, external image atau dependency framework.
- Mobile 320px dan desktop tidak overflow.
- Harga/fakta sama dengan maklumat user.
- Susunan, bahasa dan copy mengikut brief user; tiada flow wajib daripada ROAS.my.

Maklumat manusia dan tutorial lengkap:
https://roas.my/knowledgebase

Copy, Paste dalam chat AI, kemudian sesuaikan dengan bahan anda.

Starter Prompts

BM: Landing Page Produk

Baca dan patuhi spec ini dahulu: https://roas.my/llms.txt

Hasilkan satu fail HTML lengkap untuk landing page [NAMA PRODUK] dalam Bahasa Melayu Malaysia.

Objective page: [OBJECTIVE].
Audience: [AUDIENCE].
Maklumat dan fakta yang dibenarkan: [MAKLUMAT].
Harga atau pilihan yang mahu dipaparkan: [DETAIL].
Direction reka bentuk/copy: [ARAHAN ATAU BERI AI KEBEBASAN].

Tentukan reka bentuk, copy, panjang dan urutan berdasarkan brief ini. Jangan anggap mana-mana flow salespage wajib. Gunakan <section data-roas-section="..."> yang unik untuk bahagian utama, nama fail gambar lokal dengan alt text, dan <a data-roas-cta> tanpa href hanya untuk tindakan Checkout. Pulangkan HTML terus apabila brief mencukupi.

Copy, Paste dalam chat AI, kemudian sesuaikan dengan bahan anda.

EN: Product Landing Page

Read and follow this spec first: https://roas.my/llms.txt

Create one complete HTML file for a mobile-first product landing page for [PRODUCT NAME].

Page objective: [OBJECTIVE].
Audience: [AUDIENCE].
Approved facts and content: [INFORMATION].
Prices or choices to display: [DETAILS].
Design/copy direction: [DIRECTION OR GIVE THE AI DISCRETION].

Choose the design, copy, length and content order from this brief; ROAS.my does not require a particular sales-page flow. Use unique <section data-roas-section="..."> markers for major sections, local image filenames with alt text, and <a data-roas-cta> without href only for Checkout actions. Return the HTML directly when the brief is sufficient.

Copy, Paste dalam chat AI, kemudian sesuaikan dengan bahan anda.

BM: Rework LP Sedia Ada

Baca dan patuhi spec ini dahulu: https://roas.my/llms.txt

Tukar HTML landing page di bawah supaya sesuai untuk import ke ROAS.my.

Keperluan:
- Buang semua tracking pixel/script.
- Tukar semua gambar external/base64 kepada nama fail lokal yang deskriptif.
- Tambah data-roas-section pada setiap section utama.
- Tukar hanya butang Checkout kepada <a data-roas-cta> tanpa href.
- Kekalkan reka bentuk, copy dan urutan kandungan asal kecuali saya meminta perubahan.

HTML asal:
[PASTE HTML DI SINI]

Copy, Paste dalam chat AI, kemudian sesuaikan dengan bahan anda.

Checkout & TQ Custom

Ini kontrak berasingan daripada Page Spec landing page. Gunakan marker ini apabila mahu design Checkout atau halaman terima kasih sendiri. Sistem masih mengawal validation, harga, order, tracking dan bayaran.

# HTML Checkout Custom
Letak tepat satu marker bagi setiap field wajib:
data-roas-field="name|phone|email|address1|address2|postcode|city|state|payment|submit"

Jenis elemen:
- name, phone, email, address1, address2, postcode, city: <input> atau <textarea>
- state: <select>
- payment: bekas seperti <div> (sistem isi pilihan FPX/COD)
- submit: <button> atau <input>

Contoh minimum:
<input data-roas-field="name">
<input data-roas-field="phone">
<input data-roas-field="email">
<div data-roas-shipping>
  <textarea data-roas-field="address1"></textarea>
  <input data-roas-field="address2">
  <input data-roas-field="postcode">
  <input data-roas-field="city">
  <select data-roas-field="state"></select>
</div>
<div data-roas-custom-fields></div>
<div data-roas-field="payment"></div>
<span data-roas-value="offer-name"></span>
<span data-roas-value="subtotal"></span>
<span data-roas-value="shipping"></span>
<div data-roas-cod-row><span data-roas-value="cod-fee"></span></div>
<span data-roas-value="total"></span>
<button data-roas-field="submit">Buat Pesanan</button>

Nilai checkout opsyenal:
brand-name, offer-name, offer-subtitle, offer-price, offer-gift,
subtotal, shipping, cod-fee, total. Gambar produk: data-roas-image="offer".

# HTML Terima Kasih Custom
Marker wajib: data-roas-value="status-title", "order-code", dan "total".
Nilai lain: brand-name, status-message, offer-name, subtotal, shipping,
cod-fee, payment, customer-name, address, company-line.
Link opsyenal: data-roas-link="retry" atau data-roas-link="whatsapp".

Semua <script>, iframe, handler on* dan form buatan sendiri akan dibuang.
ROAS.my menyuntik form, validation, harga, tracking dan payment flow sebenar.

Contoh Section

Ini contoh marker teknikal, bukan template kandungan atau flow wajib. Tukar nama dan kandungannya mengikut page anda; pastikan nama section unik.

<section data-roas-section="maklumat-utama" id="maklumat-utama">
  <div class="wrap">
    <p class="label">Koleksi baharu</p>
    <h1>Nama Produk atau Tajuk Utama</h1>
    <p>Maklumat yang user mahu paparkan pada bahagian ini.</p>
    <img src="produk-hadapan.webp" alt="Pandangan hadapan produk">
    <a class="cta" data-roas-cta>Lihat Pilihan</a>
  </div>
</section>

FAQ Ringkas

Kenapa CTA beli tak boleh letak href?

Marker data-roas-cta menjadikan tindakan itu Checkout CTA yang belum dipetakan. Selepas import, pilih Product/Checkout dalam editor supaya link, tracking dan bayaran kekal konsisten.

Boleh guna gambar dari URL luar?

Jangan. Guna nama fail seperti produk-hero.webp, kemudian upload gambar sebenar dalam ROAS.my supaya page laju dan asset tak hilang.

Boleh letak Meta Pixel atau GA4 dalam HTML?

Tidak perlu. ROAS.my inject tracking daripada Settings dan akan buang kod tracking lama semasa import.

Harga dalam HTML menentukan jumlah bayaran?

Tidak. Harga dalam HTML ialah teks paparan. Jumlah transaksi sebenar datang daripada Product, shipping, fee dan Checkout yang dipilih dalam ROAS.my.