Embedding the guest space
هذه الصفحة بالإنجليزية عمدًا: أسماء الحقول والأوامر يجب أن تُقرأ تمامًا كما يعرضها المنتج وواجهة البرمجة.
The guest space is where a company’s holiday-home guests sign in by email link, see their stays and pay. It lives on the company’s guest host, <company>.guests.majali.app or a verified custom host, and can be placed inside the company’s website so guests never leave it.
Set up by the company
In the admin, under Settings, Embeddings, the company creates a guest space configuration: the host, the website origins allowed to embed it (exact scheme, host and port), the languages, and the look (colours, font presets, radius, spacing, optional logos and fonts from an approved origin). A draft has a signed preview with sample content; publishing makes it usable; pausing removes the embedded placement while direct access keeps working. The company then copies the installation snippet. See the staff guide, Guest space.
The snippet
<div data-guest-embed="https://guest.example.com/embed/CONFIGURATION-UUID/"
data-language="en" data-title="Guest space"
data-loading="Loading guest space…"
data-recovery-label="Open guest space directly"></div>
<script src="https://guest.example.com/assets/embed-v1.js" defer></script>/assets/embed-v1.js is version 1 of the loader; an incompatible change would ship as another version. Allow the guest origin in your website’s script-src and frame-src content-security policy.
The loader adds a sandboxed frame with a random instance identifier, the current website origin and the selected language. A bounded resize message adjusts its height; the website uses normal scrolling. If loading fails, the placement offers direct access, and a recovery link is always available, including when a browser blocks embedded cookies.
Cookies and domains
For reliable sign-in inside the frame, use the same registrable domain and scheme for the website and the guest host (for example www.example.ae and guests.example.ae). Cross-site embedding can show the sign-in but is not promised a persistent session under third-party-cookie blocking; the recovery link then opens the guest space directly.
The JavaScript API
The loader exposes MajaliEmbeddingsV1:
| Call | Does |
|---|---|
MajaliEmbeddingsV1.scan() | Finds new placements after client-side navigation (frameworks that swap page content) |
MajaliEmbeddingsV1.language(element, "ar") | Switches one placement’s language |
MajaliEmbeddingsV1.focus(element) | Focuses the guest application’s main region |
Loading the script twice installs no duplicate handlers, and removed placements are cleaned on the next scan.
The message contract
Messages between the website and the frame carry {version: 1, instance, type} and are checked for exact origin, window and instance. Only these cross:
| Direction | Type | Payload |
|---|---|---|
| Guest to website | resize | A height between 200 and 12000 pixels |
| Guest to website | navigation | userInitiated: true; no destination or booking information |
| Website to guest | language | en or ar |
| Website to guest | focus | none |
No email, booking detail, session proof, sign-in link or payment address ever crosses. Dialogs stay inside the guest application, and the website cannot inject styles into the frame.
Public configuration
GET /embeddings/{id}/config/ on the guest host returns the public configuration only: version, id, module, url, standalone, languages, default_language. An id never authorises private data.