=== Akram Website Builder – Drag & Drop Page Builder ===
Contributors: whalebuilder
Tags: page builder, website builder, drag and drop, landing page, theme builder
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Fast drag & drop page builder. 127 widgets, theme builder, popups, forms and WooCommerce. Pages are built on save and load almost no JavaScript.

== Description ==

Akram lets you design any page, header, footer, popup or online store by dragging and dropping. No coding needed.

The difference is speed. Most page builders run heavy code every time someone visits your page. Akram does the work once, when you click Save. Your visitors get a finished, lightweight page that opens fast on any phone.

On our test landing page (hero, features, testimonials, pricing, FAQ and a form) a visitor downloads **about 5 KB of JavaScript**, and the page causes **0 ms of main-thread blocking** on a mobile phone profile. The scripts a page loads depend on the widgets it uses.

Faster pages mean happier visitors and better Core Web Vitals.

= ⚡ Why Akram is fast =

* **Pages are built when you save, not when people visit.** Visitors get ready-made HTML and one cached CSS file.
* **Only the code you use is loaded.** Each interactive widget has its own tiny script (the biggest is under 4 KB). A page without a slider loads no slider code.
* **No jQuery and no icon fonts.** Icons are light SVGs.
* **Instant page changes.** Links are preloaded when a visitor hovers them, and pages fade smoothly from one to the next.
* **Fonts on your own server.** The default fonts are included in the plugin, and any Google Font you pick is downloaded once and served from your site. Visitors never contact Google unless you choose to load fonts from Google's servers.
* **Lazy videos and maps.** Videos and maps load only when they are needed.

= 🎨 A visual editor that is easy to use =

* **Drag & drop** anywhere on the page or in the Layers panel, and **edit text right on the page**.
* **Your real site:** the editor shows your real theme, so what you see is what you get.
* **Every device and state:** separate settings for desktop, laptop, tablet and mobile, and for hover, focus, active and sticky states.
* **Never lose work:** undo and redo, revisions, drafts, autosave and crash recovery.
* **Real-time teamwork:** several people can edit the same page at once, each with their own undo.
* **Keyboard friendly:** command palette (Ctrl+K), shortcuts, right-click menu, and copy and paste of elements and styles between pages. Dark and light editor.

= 🧩 127 widgets =

**Layout:** flexbox and grid containers, tabs, accordion, carousel, off-canvas panel, horizontal scroll section, protected content, 13 shape dividers, background videos, slideshows and effects.

**Basic:** heading, text, image with masks and lightbox, button, icon box, icon list, video, audio, map, counter, progress bar, testimonial, star rating, code block, world clock, weather, QR code and more.

**Creative:** animated headline, flip box, image hotspots, before/after slider, hover card, marquee, Lottie animations, curved text, timeline, process steps, team member, logo grid and custom cursor.

**Marketing:** call to action, pricing table, countdown timer, FAQ with Google schema, data table, charts, share buttons, cookie consent, age verification, PayPal and Stripe buttons, events with "add to calendar".

**Media:** gallery (grid, masonry, justified, filters, lightbox, videos), image carousel, image zoom, PDF viewer, video playlist, 360° product spin.

**Forms:** multi-step forms with conditional logic, calculations, file uploads, signatures and 25 field types. Email notifications, webhooks, Mailchimp, reCAPTCHA v3, Cloudflare Turnstile, spam protection and a submissions inbox with CSV export.

**Site and blog:** menus with mega menus, site logo, breadcrumbs, live search, table of contents, dark mode switch, login form, posts grid and custom loop templates (filters, AJAX pagination, infinite scroll), every post and archive field, social feed (RSS, YouTube, Instagram) and Google reviews.

**WooCommerce:** product grid with wishlist, quick view and compare, AJAX product filters, every single product field, mini cart, cart, checkout and my account.

= 🏗️ Theme builder =

Design your own **header, footer, single post, archive, search results and 404 page** with drag & drop. Choose where each one shows with simple include and exclude rules. Works with classic and block themes. Sticky headers can shrink, change color or hide when scrolling.

= 💬 Popup builder =

Create **modals, slide-ins, top and bottom bars and side panels**. Open them on page load, on scroll, on exit intent, on click, when an element comes into view, or after a visitor is inactive. Control how often each visitor sees them.

= 🎯 Show the right content to the right people =

Show or hide any element by login status or user role, date and time, URL parameter, referrer, cookie, custom or ACF field, device, browser, language, number of visits, A/B test version, page type, post author, and WooCommerce cart or past purchases.

= 🔗 Dynamic content =

Fill text, links and images with live data: post, author, site, archive, user, custom field, ACF and WooCommerce data. Great for templates and listings.

= ✨ Motion effects =

20 entrance animations, hover and looping effects, scroll effects (parallax, fade, scale, rotate, blur), mouse tilt and mouse tracking, and sticky elements. Visitors who prefer less motion get a calm version automatically.

= 🎨 Design system =

Set your colors, fonts and text sizes once and use them everywhere. Change a color in one place and every page updates. Add reusable style classes.

= 📦 Ready-made templates =

**12 complete website kits** (SaaS, agency, app, restaurant, portfolio, coach, AI startup, conference, online course, product launch, nonprofit, developer) and **34 designed sections**. Every template is fully editable and follows your design system.

= 🔄 Import pages from Elementor =

Convert your existing Elementor pages into Akram pages one by one or all at once. Your original Elementor data is not changed. Converted pages stop loading Elementor's files, so they get faster straight away.

= 🤖 Optional AI writing assistant =

Write, rewrite and create whole sections with AI. The assistant uses the WordPress AI Client (WordPress 7.0 or later): you connect an AI provider to WordPress once, and Akram uses it. Akram stores no AI keys and calls no AI service itself. Without a connected provider the assistant is not available.

= 🛠️ For agencies and developers =

* **White label:** use your own name and logo everywhere in the builder.
* **Role manager:** let clients edit text and images without touching the design.
* **Element manager:** turn off widgets you don't need.
* **Site kits:** export your design system, templates and pages, and import them on another site.
* **WP-CLI commands**, multisite support, maintenance and coming-soon mode, safe SVG uploads, custom CSS classes and attributes on every element.
* **"Test connection" buttons** for every integration, so you know your keys work.

= ♿ Accessible and translated =

* The editor, dashboard and all templates are tested for **WCAG 2.2 AA**. You can build pages with only a keyboard or a screen reader.
* Every word can be translated on translate.wordpress.org, and right-to-left (RTL) languages are fully supported.

= 🔒 Safe and private =

* No tracking, no ads, no data sent to us.
* Forms have spam protection, rate limits and server-side checks. IP addresses are anonymised.
* All saved content is cleaned for safety, for every user.

= 🧱 No lock-in =

A plain copy of every page is saved in the normal WordPress content. If you ever turn the plugin off, your text, images and layout stay readable.

== Installation ==

1. In your WordPress dashboard go to **Plugins → Add New**, search for **Akram**, then click **Install** and **Activate**.
2. You will see the Akram dashboard. Pick a website kit, or open any page and click **Edit with Akram**.
3. Design your header and footer under **Akram → Theme Builder**.

== Frequently Asked Questions ==

= Is Akram free? =

Yes. Everything in this plugin is free to use, with no time limits, sign-up or locked features.

= Do I need to know how to code? =

No. Everything is drag & drop and point-and-click.

= Will it slow down my site? =

No. Akram is built for speed. Pages are prepared when you save, and each page loads only the small scripts its widgets need.

= Does it work with my theme? =

Yes. Akram works with any theme. It is tested with Twenty Twenty-Five, Astra, GeneratePress, Kadence and Hello. Choose the "Akram Full Width" layout to keep your theme's header and footer, or design your own with the theme builder.

= Does it work with WooCommerce? =

Yes. There are 17 WooCommerce widgets, including product grids, AJAX filters, wishlist, quick view, compare, mini cart and single product parts.

= Can I import my Elementor pages? =

Yes. Go to **Akram → Tools → Migrate from Elementor** and convert one page or all of them. Your Elementor data is kept, so you can go back if you want.

= What happens if I deactivate the plugin? =

Your pages keep their content. A plain copy with its styles is stored in each page's normal content. Dynamic parts such as post lists, menus and forms need the plugin to work.

= Can my clients edit their pages safely? =

Yes. Add their role under **Settings → Roles → Content-only editors**. They can change text and images but cannot break the layout or design.

= Can two people edit the same page? =

Yes. Akram has real-time co-editing. Everyone sees each other's selection, changes are merged automatically and each person has their own undo.

= Is my form data private? =

Yes. Submissions are stored in your own database. IP addresses are anonymised, and you can delete old submissions automatically after a number of days.

= Does it work on multisite? =

Yes. You can activate it on the whole network or on single sites. Each site keeps its own settings and data.

= Is it translated? =

Akram is fully translatable. Translations are delivered through translate.wordpress.org, where anyone can help, and right-to-left languages are fully supported.

= Do I need an AI key? =

No. The AI assistant is optional and uses the AI provider connected to WordPress itself (WordPress 7.0 or later). Everything else works without it.

= Can I add my own CSS, JavaScript or PHP? =

No. For your safety, the builder does not accept custom code. Every style is set with visual controls. You can give elements your own CSS classes and style them in WordPress (Appearance → Customize → Additional CSS, or the Site Editor). To add tracking codes, use a dedicated analytics plugin.

= What data does Akram store, and which cookies does it set? =

* Form submissions are stored in your WordPress database (Akram → Submissions) and can be exported or deleted there, or removed automatically after a number of days (Settings → Advanced).
* Cookies: `nx_vid`, `nx_visits` and `nx_sess` are set only when a page uses visit-based display rules (A/B test variant, number of visits, new vs. returning visitor). `nx_consent` stores the visitor's answer to the Cookie Consent widget. `nx_unlock_*` remembers that a visitor unlocked password-protected content. `nx_age` remembers an age confirmation. None of these are used for tracking across sites.
* The plugin itself sends no data anywhere unless you use one of the services listed under External services.

== Screenshots ==

1. The visual editor: drag widgets onto the page and edit text right on the canvas.
2. 127 widgets, all free, grouped and searchable.
3. Design for desktop, laptop, tablet and mobile, each with its own settings.
4. The dashboard: start from one of 12 ready-made website kits.
5. Theme builder: design your header, footer, posts, archives and 404 page.
6. Popups with smart triggers: exit intent, scroll, click, time and more.
7. Forms with 25 field types and a built-in submissions inbox.
8. Design system: set your colors and fonts once and use them everywhere.
9. A page made with an Akram website kit, as your visitors see it.
10. Light editor theme and the layers panel.

== External services ==

Akram works without any external service. The services below are only contacted when you turn on or use the feature that needs them. Nothing is sent to the plugin's authors, and there is no tracking or telemetry.

**Google Fonts** (fonts.googleapis.com, fonts.gstatic.com)
The default fonts (Bricolage Grotesque and Figtree) are included in the plugin and need no external service. When you pick a different Google font, your server downloads that font's files from Google once (no visitor data is sent) and serves them from your own site, so visitors never contact Google. Only if you turn on "Load fonts from Google's servers" (Settings → Performance, off by default) do visitors' browsers load fonts from Google, which then receives their IP address and browser details. In the editor and the Design System screen, font previews load from Google for logged-in builders. Turn off "Load Google Fonts" to stop all Google Fonts requests.
Terms: https://policies.google.com/terms — Privacy: https://policies.google.com/privacy

**Google reCAPTCHA v3** (www.google.com/recaptcha)
Used only when you select reCAPTCHA in Settings → Integrations and turn on CAPTCHA in a form. The visitor's browser loads Google's script on pages with that form; when the form is submitted, your server sends the CAPTCHA token and the visitor's IP address to Google to verify it.
Terms: https://policies.google.com/terms — Privacy: https://policies.google.com/privacy

**Cloudflare Turnstile** (challenges.cloudflare.com)
Used only when you select Turnstile in Settings → Integrations and turn on CAPTCHA in a form. The visitor's browser loads Cloudflare's script on pages with that form; on submission your server sends the token and the visitor's IP address to Cloudflare to verify it.
Terms: https://www.cloudflare.com/website-terms/ — Privacy: https://www.cloudflare.com/turnstile-privacy-policy/

**Mailchimp** (*.api.mailchimp.com)
Used only when you add a Mailchimp API key and turn on "Add to Mailchimp list" in a form. On submission your server sends the visitor's email address and name to your Mailchimp audience. "Test connection" lists your audiences.
Terms: https://mailchimp.com/legal/terms/ — Privacy: https://www.intuit.com/privacy/statement/

**AI assistant (WordPress AI Client)**
Akram does not connect to any AI service itself. When a builder uses the AI assistant, the request text and the selected text or page title are passed to the WordPress AI Client (WordPress 7.0 or later), which sends them to the AI provider the site owner connected to WordPress, under that provider's terms. Visitors' data is never sent.

**Instagram API (Meta)** (graph.instagram.com)
Used only when you add an Instagram access token and a Social Feed widget shows Instagram. Your server fetches your recent posts (cached for 3 hours) and refreshes the token weekly. Visitors' browsers load the post images from Instagram's CDN.
Terms: https://help.instagram.com/581066165581870 — Privacy: https://privacycenter.instagram.com/policy

**YouTube and RSS/Atom feeds**
Used only when a Social Feed widget shows a YouTube channel or a feed URL you enter. Your server fetches the feed (cached for 3 hours); visitors' browsers load the thumbnails from the feed's host. YouTube: Terms https://www.youtube.com/t/terms — Privacy https://policies.google.com/privacy

**Google Places API** (places.googleapis.com)
Used only when you add a Google Places API key and use the Google Reviews widget. Your server sends the Place ID and your key to Google and caches the reviews for 12 hours. Reviewer photos load from Google.
Terms: https://cloud.google.com/maps-platform/terms — Privacy: https://policies.google.com/privacy

**Open-Meteo** (api.open-meteo.com)
Used only on pages with a Weather widget. The visitor's browser requests the forecast for the coordinates you set; Open-Meteo receives the visitor's IP address. No key or account is needed.
Terms: https://open-meteo.com/en/terms

**Video and map embeds** (YouTube, Vimeo, Dailymotion, Google Maps, OpenStreetMap)
Videos show a preview and load the provider's player only after the visitor clicks (or, when set to autoplay, once the video is visible). Maps load the provider's map when they scroll into view; turn on "Load after click (privacy)" to load them only after a click, and the Cookie Consent widget can hold them back until visitors accept. The provider then receives the visitor's IP address and browser details.
YouTube: https://www.youtube.com/t/terms — Vimeo: https://vimeo.com/terms, https://vimeo.com/privacy — Dailymotion: https://legal.dailymotion.com/en/terms-of-use/, https://legal.dailymotion.com/en/privacy-policy/ — Google Maps: https://maps.google.com/help/terms_maps/ — OpenStreetMap: https://wiki.osmfoundation.org/wiki/Terms_of_Use, https://osmfoundation.org/wiki/Privacy_Policy

**Spotify and SoundCloud** (open.spotify.com, w.soundcloud.com)
Used only when an Audio widget is given a Spotify or SoundCloud link. The visitor's browser loads the provider's embedded player on that page, and the provider receives the visitor's IP address and browser details.
Spotify: Terms https://www.spotify.com/legal/end-user-agreement/ — Privacy https://www.spotify.com/legal/privacy-policy/ — SoundCloud: Terms https://soundcloud.com/terms-of-use — Privacy https://soundcloud.com/pages/privacy

**Your own URLs**
A form webhook sends each submission (field values and page URL) to the URL you enter. A Lottie widget loads the animation file from the URL you enter. Payment buttons link visitors to the PayPal or Stripe checkout you configure (PayPal: https://www.paypal.com/legalhub/home — Stripe: https://stripe.com/legal).

== Source code and build ==

Akram is open source. The complete, human-readable source of every compiled file is included in this plugin, together with the build scripts, so you can study, change and rebuild it.

Every compiled file is included twice: a readable build and a minified copy next to it with the same name plus `.min` (for example `assets/build/m/countdown.js` and `assets/build/m/countdown.min.js`). Sites load the minified copies. Set `SCRIPT_DEBUG` to true in wp-config.php to load the readable builds instead.

Compiled files and their source:

* `assets/build/editor.js` and `assets/build/editor.css` (and their `.min` copies): the visual editor, built from `src/editor/` (entry point `src/editor/main.jsx`), `src/engine/` and `src/library/`.
* `assets/build/admin.js` and `assets/build/admin.css` (and their `.min` copies): the dashboard, built from `src/admin/` (entry point `src/admin/main.jsx`), `src/engine/` and `src/library/`.
* `assets/build/m/*.js` (and their `.min` copies): one small front-end script per interactive widget, built from the file of the same name in `src/frontend/` (for example `src/frontend/countdown.js` becomes `assets/build/m/countdown.js`). Each one also contains the shared helpers from `src/frontend/_core.js` (and `src/frontend/_calc.js` for forms); comments in the readable build show which source file each part comes from.
* `assets/build/global-default.css` (and its `.min` copy), `assets/build/css-schema.json` and `assets/build/strings.json`: generated from the render engine in `src/engine/` (default design system styles, the style data used by the server-side stylesheet builder `includes/Css.php`, and the translatable strings).
* `assets/icons/lucide.json` and `assets/icons/brands.json`: icon data generated from the lucide-static and simple-icons packages by `bin/build-icons.mjs`. The icon subsets in `src/engine/core-icons.js` and `src/editor/ui-icons.js` are generated the same way, by `bin/build-icons.mjs` and `bin/build.mjs`.
* `assets/vendor/lottie_light.js` and `assets/vendor/lottie_light.min.js`: the Lottie player, copied unmodified from the lottie-web package by `bin/build.mjs` (see Third-party libraries).

The files in `assets/css/` and `assets/js/` are not compiled. They are loaded exactly as they are written.

How to build:

1. Install Node.js 20 or later.
2. In the plugin folder, run `npm ci` to install the build tools listed in `package.json` (esbuild, Preact and the libraries below).
3. Run `npm run build`. It runs `bin/build.mjs`, which compiles `src/` into `assets/build/`. Use `npm run watch` while you work.

== Third-party libraries ==

All bundled code is GPL-compatible. Full license texts are in THIRD-PARTY-LICENSES.txt.

* Preact 10 (MIT), compiled into the editor and dashboard: https://github.com/preactjs/preact
* qrcode-generator (MIT), compiled into the render engine (QR Code widget): https://github.com/kazuhikoarase/qrcode-generator
* lottie-web 5.12.2, light build (MIT), included unmodified as `assets/vendor/lottie_light.js` (readable) and `assets/vendor/lottie_light.min.js` (Lottie widget). Source: https://github.com/airbnb/lottie-web
* Lucide icons (ISC): https://github.com/lucide-icons/lucide
* Simple Icons (CC0 1.0; brand names and logos are trademarks of their owners): https://github.com/simple-icons/simple-icons
* Fonts: Instrument Sans, Bricolage Grotesque and Figtree (SIL Open Font License 1.1).

== Changelog ==

= 1.0.0 =
* Initial release: visual drag & drop editor with 127 widgets, theme builder (header, footer, single, archive, search, 404, loop items), popups, forms with submissions, a site-wide design system and 12 page kits.
* Pages are saved as pre-rendered HTML and load only the CSS and JavaScript their widgets use.
* Real-time co-editing with field-level merging and personal undo; presence and hand-over for teams.
* WooCommerce widgets, display conditions, dynamic content, mega menus and maintenance mode.
* Import of Elementor pages.
* Integrations: Mailchimp, webhooks, reCAPTCHA, Turnstile, Instagram, Google Reviews and weather, each with "Test connection"; an optional AI writing assistant through the WordPress AI Client.
* White label, role manager, element manager and site kit export/import.
* Fully translatable, with RTL support; WCAG 2.2 AA tested editor, dashboard and page kits.
* Works with any theme; tested with Twenty Twenty-Five, Astra, GeneratePress, Kadence and Hello, on single sites and multisite, PHP 7.4 to 8.4, MySQL, MariaDB and SQLite.
