Website CMS and builder

Website setup layers

Kashef has two website layers. Website CMS manages publication state, website logo, contact information, SEO, theme tokens, and structured home sections. Website Builder provides a full-screen visual editing experience for the home page when the visual page builder feature is enabled for the tenant. The public slug is managed from Lab Settings.

Use Website CMS for controlled business data. Use Website Builder when you want to edit the home page layout and content visually. Both should be kept aligned so the public website does not show outdated contact information or mismatched branding.

Website publication and logo

The CMS identity section controls the publish flag and website logo. The publish toggle controls whether the website is publicly available. Edit the public URL slug from Lab Settings; it determines the path under /labs/{slug} and should stay stable once patients or partners know the link.

The website logo is stored publicly and overrides the lab company logo on website pages. Upload only JPEG, PNG, or WebP images no larger than 5 MB or 2048 × 2048 px.

Change the slug carefully from Lab Settings. If patients or partners already know the old URL, changing it can break external links. When rebranding, update printed material, social links, and QR codes at the same time.

Contacts and SEO

Contact fields include phone, email, WhatsApp, and address. Use public details monitored by the lab and never enter private operational notes. Store WhatsApp numbers in international format with the country code.

SEO fields include English and Arabic title, description, and optional comma-separated keywords. Titles and descriptions in both languages are required while the website is published. These values help patients and partners understand the lab before logging in or requesting services.

Keep Arabic and English SEO content aligned. The two languages do not need to be literal translations, but they should describe the same services, brand, and location. Avoid leaving one language blank if the website is used publicly.

Theme tokens and home sections

Theme tokens store required primary, accent, surface, and text colors as six-digit hexadecimal values. They are used by the public website rendering layer. Keep color values readable and consistent with the lab brand. Test contrast, especially for buttons and text over colored surfaces.

Home sections are repeatable records with section key, enabled flag, display order, English title/body, and Arabic title/body. They power the structured fallback homepage when no visual-builder page is published. Enabled sections require titles in both languages. Disabled sections remain saved but are hidden.

Each section key must be unique and use only lowercase letters, numbers, underscores, or hyphens. Use stable keys that describe purpose, such as hero, services, home_visits, or partners. Dragging changes editor organization; the numeric Display Order controls public rendering order. Saving updates matching sections without discarding additional legacy or builder-specific content stored with them.

Page actions

Use Open Public Website to inspect the currently published patient-facing website in a new tab. This action appears only when the website is published. Verify Arabic and English content, links, responsive layout, and branding before sharing the URL.

Use Open Website Builder to edit the visual home page. Saving Website CMS does not publish visual-builder drafts, and publishing the visual builder does not replace CMS contact, SEO, or theme settings.

Visual builder

The Website Builder is a full-screen editor for the home page. The back arrow always returns to Website CMS, and the help button opens this article. Use the language buttons to switch between English and Arabic content. Text and page structure are stored separately for each language, while CSS styles are shared so branding and layout remain consistent.

The component library adds sections and elements. The style manager changes layout, colors, spacing, and typography for the selected element. Element settings control details such as links, targets, and image alternative text. The layer manager shows page hierarchy and helps select nested elements. Every editor control has a localized tooltip explaining its effect.

Changes auto-save after a short pause. Save immediately stores the current language content and shared styles without making them public. Do not close the page while the status says Saving. If Save failed appears, correct the reported validation or connection problem before publishing.

Publish asks for confirmation, saves the current changes, and publishes both languages immediately. Publishing is blocked until Website CMS exists and both English and Arabic homepages contain content. Revert asks for confirmation and replaces both current drafts with the last published version; it is disabled until a version has been published.

Asset uploads accept JPEG, PNG, and WebP images up to 5 MB and 4000 × 4000 px. SVG and GIF uploads are rejected. Builder telemetry is disabled, so the editor does not send usage data to the GrapesJS telemetry service.

Sanitization and widgets

On publish, the system removes risky script tags, inline event handlers, JavaScript URLs, and unsafe CSS expressions. This protects the public website while still allowing rich page composition. Widgets such as featured tests, latest posts, and portal CTA can be rendered into the published page.

If custom HTML does not appear after publishing, it may have been sanitized or the widget token may be unsupported. Review the draft, publish again, and check the public page in both languages.

Checklist

• Website slug in Lab Settings is final enough for public sharing.
• Publish flag matches whether the lab wants the site visible.
• Logo uses an allowed image format and size.
• Contact phone, email, WhatsApp, and address are current.
• English and Arabic SEO titles and descriptions are complete before publishing.
• Theme colors match the brand and remain readable.
• Home section keys are unique; enabled sections are sorted and titled in both languages.
• Public website is checked on desktop and mobile in Arabic and English.
• English and Arabic builder content are complete, and shared styles work in both directions.
• Builder changes show Saved, are previewed at desktop, tablet, and mobile widths, then published.
• Revert is used only when replacing both drafts with the last published version is intentional.