1. What This Page Is For
The Sign-up & sign-in popup page configures the desktop layout and artwork displayed when players click Sign in or Sign up in the lobby header. It allows administrators to select artwork orientation (left, right, top banner, full background, or theme colours), present welcoming promotions, and establish a high-conversion first impression.
On mobile smartphones, the popup automatically uses a dedicated compact modal designed for touchscreen inputs, ensuring that players can register or log in effortlessly on smaller screens.
2. Before You Begin
- Permission Requirements: You must have the 'Sign-up & sign-in popup' permission in your staff role to view and edit popup layouts and images. (Users without update permission see the page in read-only mode).
- Things to Prepare:
- Banner Graphic: Recommended vertical orientation, recommended dimensions 600 × 700 px. Formats: PNG, JPG, or WEBP up to 5 MB.
- If no custom image is uploaded, the system automatically draws a stylish branded panel in your site's Theme colour featuring your logo and greeting copy.
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title Sign-up & sign-in popup, subtitle, and navigation breadcrumbs (Settings / Theme / Popup).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Preview Card (Preview): Live simulation of the authentication popup in dark lobby surroundings:
- Language Toggle: Thai and English.
- Computer Preview: Displays the interactive desktop popup with the Sign-in tab open.
- Phone Preview: Displays the mobile phone modal alongside a helper note: "A phone has one popup of its own, whatever layout is chosen."
- Computer Layout Selection Grid (Computer layout):
- Picture side toggle: Choose Left or Right alignment for the image.
- 4 distinct layout cards with mini-visualizations and an In use badge.
- Picture Upload Section: Dedicated image dropzone with aspect ratio feedback and restore controls.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons.
4. Search and Filters
There is no data search on this page. Instead, 2 interactive preview controls allow administrators to customize and inspect the layout:
| Control | Options | Preview Result |
|---|
| Language | Thai / English | Toggles modal text (tab headers, input labels, submit buttons) between Thai and English. |
| Picture side | Left / Right | Repositions the artwork panel to the left or right side of the credentials form. (Disabled for Layout 1 Banner on top and Layout 3 Site colours). |
5. Data Table and Layout Cards
| ID | Layout Name | Form and Image Arrangement | Image Behavior |
|---|
| 0 | Picture beside (Lobby default) | Splits the modal 50/50: graphic on one half, authentication form on the other | Uses full 600 × 700 px vertical image |
| 1 | Banner on top | Narrow compact popup; picture acts as a horizontal banner across the top header above the form | Image is cropped to fit a wide horizontal header band |
| 2 | Picture behind | The picture expands to fill the entire modal canvas; form floats on a frosted glass card | Full-bleed background graphic |
| 3 | Site colours | No picture used; features a branded panel dressed in your theme colour with logo and welcome highlights | Disables picture display (uploaded image remains stored for other layouts) |
Action Controls in the Picture Section
| Action / Button | Appearance | Result When Clicked | Condition |
|---|
| Upload area | Dashed dropzone rectangle | Opens native file browser or accepts dragged image files | Supports PNG, JPG, WEBP up to 5 MB |
| Change image | Grey button | Replaces the current image with a newly selected file | Visible when an image is currently set |
| Delete / Reset | Red trash can icon | Marks image for removal to fall back to the site colour panel | Warns that saving will reset to theme colours |
| Keep current picture | Blue text link | Discards the staged change and restores the currently saved image | Clickable before submitting the save request |
6. Step-by-Step Guide
- Navigate to Site look > Sign-up & sign-in popup from the left navigation menu.
- In the Computer layout section, click your preferred layout among the 4 options.
- If you select Picture beside or Picture behind, click Left or Right under Picture side to adjust alignment.
- Review the simulated popup in the Preview card above.
- Click Save in the bottom action bar.
- A green alert will notify you: "Popup saved".
2. Uploading Custom Artwork
- Scroll to the Picture section.
- Click the upload box or drag a vertical image file (up to 5 MB) into it.
- Review the helper note under the image:
- Fits the recommended size: Dimensions match 600 × 700 px perfectly.
- Not the recommended size: The system will automatically crop or scale the image without distortion.
- Verify the preview rendering at the top of the page.
- Click Save in the bottom action bar.
3. Reverting to the System Default Theme Panel
- In the Picture section, click the red trash can icon.
- The card displays a status note: "After saving, the site's colours, logo and welcome show instead".
- Check the preview above to confirm that the branded theme panel renders correctly.
- Click Save to confirm.
| Field / Setting | Required? | Description | Example | Constraints |
|---|
| Computer layout | Required | Select 1 of the 4 desktop popup layout templates. | Picture beside (Layout 0) | Applies to desktop and tablet browsers only. |
| Picture side | Required | Position of the image relative to the form (Left or Right). | Right | Disabled for Layout 1 (Banner on top). |
| Picture | Optional | Vertical banner graphic displayed inside the modal. | Image file welcome-banner.webp (600 × 700 px) | Formats: PNG, JPG, WEBP up to 5 MB. Falls back to theme colour panel if empty. |
8. Popups and Confirmation Modals
1. Version Conflict Alert
- Triggered When: Another administrator saved popup configuration changes before your save request was submitted.
- What You See: A red error snackbar: "Someone saved this page first. The latest is shown; make your change again."
- Action Required: The system automatically reloads the latest saved configuration. Re-select your preferred layout and save again.
- Result: Prevents concurrent administrators from overwriting each other's settings.
- Triggered When: You have picked a new layout or uploaded a new graphic and attempt to navigate away without clicking Save.
- What You See: A browser modal warning of unsaved changes.
- Action Required: Click Cancel to remain on the page and save, or confirm navigation to discard staged modifications.
9. Status Badges and Colors
| Badge / Indicator | Color | Meaning | Required Action |
|---|
| In use | Green | The currently published desktop popup layout on the live site. | No action required if maintaining current layout. |
| Fits the recommended size | Green | Image matches recommended 600 × 700 px dimensions. | Ready to publish. |
| Not the recommended size... | Yellow | Image dimensions differ from recommendation; cropping will occur. | Check preview to ensure no vital details are cut off. |
| Uploading… | Blue | File is uploading to cloud storage. | Wait until upload finishes before clicking Save. |
| After saving, the site's colours... | Orange | Graphic marked for removal, awaiting save confirmation. | Click Save to confirm or Keep current picture to cancel. |
10. Frequently Asked Questions and Troubleshooting
- Why doesn't the layout on mobile phones change when I pick a new desktop template?
- This is expected behavior. Smart phones always utilize a single, specialized touch-optimized modal. Layout selection applies exclusively to computer and tablet viewports.
- Why did my artwork disappear when selecting "Site colours" (Layout 3)?
- Layout 3 is intentionally designed to showcase your brand logo and theme gradient rather than an image. However, your previously uploaded graphic remains safely stored in the system and will reappear if you switch back to Layout 0, 1, or 2.
- Why is the Save button greyed out and unclickable?
- The Save button is only enabled when modifications are staged (a new layout is picked, alignment is changed, or an image is uploaded/removed).
- Why are form inputs hard to read when using Layout 2 (Picture behind)?
- Layout 2 stretches the artwork behind the form fields. If your background graphic is very bright or busy, text contrast may suffer. We recommend using darker, simpler background images with subtle lighting.