AI Editor for web pages

Pour :Administrateur

View of the « AI editor pages » page

The Unisoft AI Editor – Web page is a CMS page editor that works by conversation: you describe the page you want to add to your public site, the AI generates it before your eyes, you refine it through successive messages. At the end, the page is published at the URL you have chosen under your domain https://[your-organization].unisoft.world.

This page explains how to generate a web page by chat, the design rules applied (responsive, 1200 px container, modern fonts), the automatic multilingual management (French, English, Hebrew, etc.) and all the particularities to know.

ℹ

Availability

The AI Editor is in beta. The AI Editor selector when creating a CMS page is only visible in non-production environments (staging, test). If you don't see it in your backoffice, it's normal — your organization uses the classic editor for now. For an overview of the feature, see Understanding the AI Editor.

When to use it

The AI Editor – Web page is particularly useful for:

• Quickly creating an "About us" page with photo, presentation of the rabbi, values, calendar of services.
• Announcing a project: presentation of a new Beth Habad, launch of a Jewish school, Mikveh project, etc., page with visual hero, sections, donation button.
• Presenting a team: photo board of the rabbi, the gabbai, the choir leader, volunteers.
• Publishing a manifesto / a charter: editorial page with numbered sections.
• Launching a project page: page dedicated to a collection, a trip to Israel organized by the community, etc.

Conversely, if you need complex interactive features (custom form, dynamic calendar, sophisticated third-party integration), the classic editor remains preferable.

Enable AI mode at creation

The AI Editor is chosen at the time of creation of a CMS page.

1. 1

   Open My pages

   Go to /app/web/pages (My pages entry under Website in the admin sidebar).

2. 2

   Click Add

   Blue button at the top right. The editing window opens.

3. 3

   Fill in the basic info

   Enter the title, description, URL (page slug on your public site, for example about-us) and any SEO fields.

4. 4

   Select AI Editor

   In the Editor type field, choose AI Editor instead of Classic Editor. This field is only visible in non-production environment during the beta.

5. 5

   Validate

   Click Validate. The page is created in the database. Back on the list, you see your page appear with a purple "AI editing" icon in the Editor column. Click on it to open the AI Editor (route /editor/ai/web?id=[ID]).

⚠

Locked choice

Once the page is created in AI Editor mode, it cannot be switched back to the classic editor (and vice versa). If you have chosen the wrong mode, delete the page and recreate it.

The interface in detail

The editor takes up the entire screen: the backoffice sidebar is hidden during editing. Two panels separated by a resize bar that you can drag with the mouse.

Left panel – the discussion

From top to bottom:

• Header: AI avatar + page name + subtitle "Create your page through discussion".
• Images panel (collapsible): drag-and-drop zone for your visuals. Click on the Images (N) header to expand it.
• Conversation history: your prompts (in black bubbles on the right) + "Email generated" badges (read: page generated) + AI summaries in English listing the modifications + suggestions for what's next.
• Prompt field at the bottom: a textarea that grows up to 160 px in height, an arrow button to send (or Enter), and a square Stop button during generation if you want to interrupt.

Right panel – the preview

From top to bottom:

• Language banner (visible if your organization has configured several languages, see below).
• Toolbar: Quit button (red), Desktop / Mobile selector, Save button, ← → navigation in the history, History button that opens the complete list of versions.
• Preview iframe: live rendering of the generated HTML. You can switch to 390 px fixed width (mobile frame) to check the responsive.

On mobile, the two panels become two tabs at the bottom (Chat / Preview).

Import images

The AI does not make images; you must provide your own visuals.

1. 1

   Open the Images panel

   Click on the Images (0) header in the left panel to expand it.

2. 2

   Import

   Drag-and-drop your files into the dotted zone, or click on it to open the file selector. Accepted formats are all image formats (image/*).

3. 3

   Reference the images in a prompt

   Once imported, the images appear as thumbnails in the panel. The AI can "see" them: you can write prompts like "Put the first image as a full-screen banner at the top of the page, with a dark gradient on top and a large title overlaid".

To remove an image, click the small black cross at the top right of its thumbnail.

★

Official photos, no captures

For a pro rendering, use official photos: your rabbi in portrait, a view of a community event, a photo of the building, a symbolic image (Torah scroll, Shabbat candles). Avoid screenshots or low quality visuals — the AI will use them as is.

Design rules applied by the AI

Unlike an email (which must be ultra-compatible), a Unisoft web page can use all modern CSS. The AI nevertheless follows precise rules to ensure clean and performant rendering.

Rule	Detail
Modern CSS allowed	Flexbox, grid, CSS variables, @keyframes animations, hover, transitions.
Google Fonts fonts	Inter, Plus Jakarta Sans, DM Sans — imported via @import.
Lucide icons	Modern vector icon library injected via CDN (you can ask: "Put a heart icon here").
1200 px max container	All visible content stays in a centered container (max-width: 1200px, margin: 0 auto) with 24 px lateral padding desktop / 16 px mobile. "Full width" sections (hero with background image) can overflow, but their internal content stays in the container.
Mobile-first responsive	Media queries ≤ 640px to adapt each section.
Only the page's <main>	The AI does not generate the header (logo + menu) or the footer (social networks + notices). They are added automatically by the site theme during the rendering on your public domain.

⚠

No viewport units (vh, vmin, vmax)

For technical reasons (the preview iframe dynamically adjusts its height), the AI never uses vh, vmin or vmax for heights — otherwise an infinite resize loop would be triggered.

Instead, the AI uses values in px, rem or fixed min-height. If you ask for "a section that takes the full screen height", the AI will use min-height: 600px or min-height: 800px, which renders well on the vast majority of screens.

The vw for widths remains, however, allowed.

Automatic multilingual

This is one of the most powerful features of the AI Editor for web pages: each generated text is automatically prepared for translation, without you having to touch the HTML.

How it works

At each save, Unisoft analyzes the HTML that the AI produced and automatically adds a data-i18n attribute on each visible text:

<h1 data-i18n="auto_1">Welcome to our community</h1>
<p data-i18n="auto_2">A spiritual family in the heart of Paris</p>
<a data-i18n="auto_3" href="...">Contact us</a>

For translatable attributes (alt, title, placeholder, aria-label), a data-i18n-alt, data-i18n-title, etc. variant is added. Decorative elements (empty containers, <style> / <script> tags) do not receive a key.

Each key is unique and stable: if you modify the text but keep the key, the existing translation is preserved.

★

Why `auto_1`, `auto_2`… and not a meaningful name?

The AI can, if it deems it useful, produce semantic keys itself (for example data-i18n="hero_title"). But any text that has not received an explicit key automatically receives a technical key auto_1, auto_2, auto_3, etc. at the time of saving, in the order in which the texts appear in the HTML. From the user's point of view, the key name has no importance: translations work identically and remain stable. You never have to manipulate these keys yourself.

The language banner

If your organization has configured several languages (French + English, or French + Hebrew, etc.), a language banner appears above the preview:

• A tab per language, with the flag of the corresponding country.
• An indicator of missing translations (for example: "5 texts not translated to English").
• A Translate all button which asks the AI to fill in all missing translations for the current language at once.

Clicking on a secondary language switches the preview to that language: the iframe applies the translation dictionary instead of the main language texts. If a translation is missing, the main language text is displayed as fallback.

Edit a translation by hand

On the preview in secondary language, the translatable texts are clickable: a click opens an inline mini-editor to modify the translation. It's the fastest way to adjust a word or correct a nuance that the AI would not have grasped.

If your organization is mono-language

The language banner does not appear, the data-i18n keys are still generated in the background (at no cost to you), in case you activate other languages later.

Best practices for prompting

The AI produces what you ask of it. The richer your brief, the better the rendering.

Start with a general brief

Create an About us page for our Beth David community in Paris,
with:
- A hero at the top with a photo of the synagogue and a welcoming title
- A presentation section in 3 short paragraphs
- A team card with 3 people (rabbi Yossi Mizrahi,
  gabbai David Cohen, secretary Sarah Lévy)
- A "Our values" section with 4 cards
- A call to action to join the community

The AI will produce a complete, responsive page, in the modern Unisoft style.

Refine through short messages

Replace the hero photo with the one I just imported

The values section is too cluttered, simplify to 3 cards instead of 4

Put a midnight blue gradient behind the hero title so it stands out
better on the photo

Add a "Join us" button that scrolls to the contact section

Prompt examples for a community

• Dedicated home page: "Home page for the Beth Habad of Marseille with a full-screen hero (image of the shaliach), a warm presentation, a calendar of the week's classes in cards, and a large Donate button".
• Construction project page: "Project page for the construction of a new Mikveh. Hero with the architectural rendering, "Why this project" section in 4 paragraphs, collection gauge, testimonials section, Support the project button in orange".
• Rabbi page: "Presentation page of rabbi Eli Benhamou, portrait photo on the left, biography on the right, list of his weekly classes below, inspirational quote in the middle of the page".
• Social projects page: "Page Our solidarity actions with 3 cards (help for families, Shabbat meals, youth in difficulty), each card with Lucide icon, title, paragraph, and Support link".
• Trip page: "Page for a trip organized to Israel (12 to 22 nissan), program day by day in vertical timeline, photos by stage, Sign up button".

Give the tone and style

Specify if you want:

• Sober vs warm vs festive vs institutional;
• Traditional colors (blue, white, gold) vs modern palette (burgundy, ochre, terracotta);
• Heavy on images vs text first;
• Spaced sections (airy, modern) vs dense (lots of info).

Navigate the history

Each prompt produces a new history entry. Three buttons at the top right of the preview:

• ←: go back one version.
• →: go forward (if you had gone back).
• History: opens a popup with the complete list. Each entry displays the start of the prompt that generated it and its generation time.

ℹ

The history is local to your session

The history does not survive a page reload: it's an in-memory stack during your editing. When you click Save, it's the current version (the one displayed) that is persisted. If you want to keep several variants in parallel, duplicate the page on the My pages side once saved.

Save and publish

The Save button changes appearance depending on the state:

• Gray: no modification since the last save.
• Black: pending modifications — a click saves them.

When saving, the server:

1. Injects the missing data-i18n on the new texts (preserves existing keys to not break translations already entered).
2. Merges the translation dictionary: translations already entered in secondary languages are kept for keys that still exist; obsolete keys are cleaned.
3. Stores the HTML, the list of imported images, the main language, and the i18n dictionary.

ℹ

No PNG thumbnail for web pages

Unlike email templates (which generate a PNG thumbnail server-side for display in card grid), saving a web page does not produce any derived image. Only the HTML, the i18n dictionary, and the list of imported images are persisted.

Once the page is saved, it is immediately published at the URL you have chosen on your public site (for example https://beth-david.unisoft.world/about-us). No distinct "publish / unpublish" step — saving is publishing.

If you try to quit the editor without saving, a confirmation is displayed to avoid involuntary loss.

★

Remember to add your page to the menu

Creating a page is not enough for it to be findable: by default it is accessible only at its direct URL. For it to appear in the site navigation, add it to the menu via Site menu (/app/web/menu) — see Site menu.

Page on computer vs mobile

Not all visitors view the site from a computer. A Unisoft CMS page generated by the AI is responsive by construction (mobile-first, media queries ≤ 640px), but systematically check the mobile rendering before saving a new page:

1. Click Mobile in the toolbar — the preview switches to 390 px frame.
2. Scroll the page: check that the images do not overflow, that the titles are not cut off, that the buttons remain large enough to be touched with a finger.
3. If something goes wrong on mobile, ask the AI: "On mobile the 3-column grid is too cramped, switch it to a single column with more air between the cards".

Limits to know

• Feature in beta: visible only in non-production environments for now.
• No image generation by the AI: import your visuals via the Images panel.
• No switching AI Editor ↔ Classic Editor: the choice made at creation is locked.
• No block-by-block editing in the UI: everything goes through the chat or by returning to a previous version via the History.
• No header or footer in the editor: only the page's <main> is generated. The header and the footer are added by the site theme on the public rendering.
• No vh, vmin, vmax units for heights (technical limit of the preview iframe).
• Complete versions only in the history: no micro-undo per operation.
• No explicit quota displayed to date. Stay reasonable.

Going further

• Understanding the AI Editor — cross-cutting overview.
• My pages — the CMS page management page (creation, duplication, deletion, URL).
• Site menu — to make a page visible in navigation.
• Site theme — to customize the global appearance (colors, fonts) of the site containing your page.
• AI Editor for emails — the equivalent variant for email templates.