# 360° project Source: https://viewerdocs.planpoint.io/360 This new feature allows you to create a 360º outlook of your project’s environment and enhance your user‘s experience. Please note you need more than one rendering or photo of your project to enable this feature. **Change the icon** You can change the 360º icon to any SVG file of your choice. This allows for different experiences, like switching levels, changing buildings, etc. Please read below. Access the configuration module within your project dashboard and navigate to the **Exterior** tab. ![](https://i.postimg.cc/GpC0FBCZ/360-1.jpg) Arrange the desired views in the preferred sequence for presentation within your project. Simply click on the **plus** button to incorporate various views into the display order. **Important tip:** Upload your images in the desired order for display ![](https://i.postimg.cc/26hqgGWK/360-2.jpg) After organizing the images, you need to draw the simple polygons on each floor of each render. Just click on **Draw** or **Redraw** and repeat this process until finished. ![](https://i.postimg.cc/MHwcwBbK/360-3.jpg) ## Review and edit You can navigate the different views just by clicking here: ![](https://i.postimg.cc/mrs9yKJ5/360-4.jpg) ## Changing the 360º icon You can change Planpoint's default 360º icon to any SVG file. You can only upload one file. This option is available in Content > Exterior. Clean Shot 2025 12 20 At 21 55 31@2x ## Troubleshooting Here's how to solve some common problems when setting up a 360º project. Please try refreshing the page. This feature is only available in Planpoint V2. Please go to your V2 dashboard. # Allocations Source: https://viewerdocs.planpoint.io/allocations The allocation feature is a brand-new feature to Planpoint. It allows you to assign limited access to floors and units for preferred people, whether it is VIP brokers working on your project or even stakeholders. By using this feature, you will be able to create a custom Planpoint with the attributed units for a specific person that will require a password in order to access it. Please view the video below for step-by-step guide: ``` **After:** ```html theme={null} ``` *** ## Group, enterprise and searchbox stylesheets Each surface has its own stylesheet, edited the same way: | Surface | Where to find it | | -------------- | -------------------------------------------------------------------------------- | | **Project** | Project **Style & Embed** → **Style** → **Customize** → **`` Custom CSS** | | **Group** | Group **Style & Embed** → **Style** → **Customize** → **`` Custom CSS** | | **Enterprise** | Enterprise **Settings** → **Style** → **Customize** → **`` Custom CSS** | | **Searchbox** | Enterprise **Settings** → **Searchbox** → **Custom CSS** → **Open style editor** | The searchbox uses the same editor. When you open it from an enterprise, a **Viewer / Searchbox** switch appears at the top of the sidebar so you can move between the two stylesheets — the preview and the snippet list follow along. Searchbox selectors aren't scoped to `[data-pp-embed]`, since the searchbox is its own page. *** ## Understanding CSS selectors The viewer is built with CSS Modules, so class names get a unique suffix (`unitTile` becomes something like `Style1_unitTile__a1B2c`). Target elements with the stable `data-pp-*` attributes and with `[class*="…"]` wildcards. **✅ Correct selectors that work:** ```css theme={null} /* Data attribute selectors for main containers */ [data-pp-embed] /* Main embed wrapper */ [data-pp-container] /* Inner container */ [data-pp-layout] /* Layout container */ [data-pp-header] /* Portal header bar */ [data-pp-cta-desktop] /* Header CTA button (desktop) */ [data-pp-cta-mobile] /* Header CTA button (mobile) */ [data-pp-filters] /* Filters container */ [data-pp-filters-wrapper] /* Filters wrapper with background */ [data-pp-glass-filters] /* Glass-style filter variant */ [data-pp-unit-grid] /* Unit grid */ [data-pp-unit-list] /* Unit list table */ [data-pp-unit-view] /* Unit view container */ [data-pp-amenity-view] /* Amenity view container */ [data-pp-commerce-view] /* Commerce view container */ [data-pp-canvas] /* Canvas/floor plan area */ [data-pp-modal] /* Modal containers */ /* Scope-specific selectors */ [data-pp-scope="project"] /* Project view */ [data-pp-scope="floor"] /* Floor view */ [data-pp-scope="unit"] /* Unit detail view */ /* Class wildcard selectors for nested elements */ [data-pp-embed] [class*="unitTile"] /* Unit cards */ [data-pp-embed] [class*="unitTileBody"] /* Card body */ [data-pp-embed] [class*="unitTilePrice"] /* Price display */ [data-pp-embed] [class*="unitTileAttrs"] /* Attributes container */ [data-pp-embed] [class*="badge"] /* Status badges */ [data-pp-embed] [class*="dropdownToggle"] /* Filter dropdowns */ [data-pp-embed] [class*="dropdownMenu"] /* Dropdown menus */ [data-pp-embed] [class*="unitCardAction"] /* Action buttons */ [data-pp-embed] [class*="shortlistAction"] /* Favorite button */ /* Scope-specific selectors */ [data-pp-scope="project"] [data-pp-layout] /* Project view layout */ [data-pp-scope="floor"] [data-pp-layout] /* Floor view layout */ [data-pp-scope="unit"] [class*="unitCard"] /* Unit detail card */ ``` **❌ Incorrect selectors that won't work:** ```css theme={null} /* These data attribute selectors are NOT implemented */ [data-pp-button] /* Use [class*="button"] or [class*="unitCardAction"] */ [data-pp-unit-tile] /* Use [class*="unitTile"] instead */ [data-pp-badge] /* Use [class*="badge"] instead */ [data-pp-dropdown] /* Use [class*="dropdown"] instead */ [data-pp-list] /* Use [data-pp-unit-list] or [data-pp-unit-grid] */ [data-pp-floor] /* Use [data-pp-scope="floor"] instead */ /* Plain class names won't work due to CSS Modules */ .header .unitTile .badge /* This attribute doesn't exist */ [data-theme="showcase"] ``` ### Common elements you can style | Element | Selector | What it controls | | -------------------- | ---------------------------- | ------------------------------------- | | Main container | `[data-pp-embed]` | Overall viewer wrapper, CSS variables | | Inner container | `[data-pp-container]` | Inner container element | | Layout | `[data-pp-layout]` | Grid layout container | | Portal header | `[data-pp-header]` | Header bar with logo and CTAs | | Header CTA (desktop) | `[data-pp-cta-desktop]` | Desktop call-to-action button | | Header CTA (mobile) | `[data-pp-cta-mobile]` | Mobile call-to-action button | | Filters wrapper | `[data-pp-filters-wrapper]` | Filter bar background/styling | | Filters | `[data-pp-filters]` | Filter controls section | | Glass filters | `[data-pp-glass-filters]` | Glass-style filter variant | | Unit grid | `[data-pp-unit-grid]` | Grid of unit cards | | Unit list | `[data-pp-unit-list]` | Table view of units | | Unit cards | `[class*="unitTile"]` | Individual unit listings | | Card body | `[class*="unitTileBody"]` | Card content area | | Card price | `[class*="unitTilePrice"]` | Price display | | Status badges | `[class*="badge"]` | Available/Sold/Reserved labels | | Dropdowns | `[class*="dropdownToggle"]` | Filter dropdown buttons | | Dropdown menus | `[class*="dropdownMenu"]` | Filter dropdown options | | Action buttons | `[class*="unitCardAction"]` | CTA buttons | | Modals | `[data-pp-modal]` | Popup windows | | Canvas area | `[data-pp-canvas]` | Floor plan display area | | Unit view | `[data-pp-unit-view]` | Unit view container | | Amenity view | `[data-pp-amenity-view]` | Amenity view container | | Commerce view | `[data-pp-commerce-view]` | Commerce view container | | Gallery | `[class*="embla"]` | Image carousel | | Shortlist button | `[class*="shortlistAction"]` | Favorite/save button | *** ## CSS custom properties (variables) The default theme is built on CSS custom properties. Overriding them is the safest way to restyle the viewer: a few lines change everything consistently, and they keep working when the design is updated. These variables live in *your* stylesheet, not in the viewer itself. Setting `--pp-brand-primary` on its own does nothing until a rule reads it — which is exactly what the snippets do. Add **Brand colours** first, then any other snippet follows it. ```css theme={null} [data-pp-embed] { /* Brand — every snippet derives from --pp-brand-primary */ --pp-brand-primary: #5b4cdb; /* Solid brand colour with a subtle sheen: buttons, chips, filter bar. Swap it for a gradient if you want a two-tone look. */ --pp-brand-surface: linear-gradient( 135deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.12) 100% ), var(--pp-brand-primary); /* Pale wash of the brand colour: hover and selected states */ --pp-brand-tint: linear-gradient( 0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100% ), var(--pp-brand-primary); /* Optional accents — nothing uses them unless you do */ --pp-brand-secondary: #7c3aed; --pp-brand-accent: #8b5cf6; --pp-brand-light: #ede9fe; /* Status Colors */ --pp-success: #059669; --pp-success-bg: #d1fae5; --pp-danger: #dc2626; --pp-danger-bg: #fee2e2; --pp-warning: #d97706; --pp-warning-bg: #fef3c7; /* Neutral Palette */ --pp-white: #ffffff; --pp-gray-50: #f9fafb; --pp-gray-100: #f3f4f6; --pp-gray-200: #e5e7eb; --pp-gray-500: #6b7280; --pp-gray-700: #374151; --pp-gray-900: #111827; /* Shadows */ --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --pp-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --pp-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05); /* Border Radius */ --pp-radius-sm: 8px; --pp-radius-md: 12px; --pp-radius-lg: 16px; --pp-radius-xl: 20px; --pp-radius-full: 9999px; } ``` *** ## Example: styling status badges ```css theme={null} /* Available badge - green gradient */ [data-pp-embed] [class*="badge"][data-style="available"] { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #ffffff !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 9999px !important; } /* Sold badge - red gradient */ [data-pp-embed] [class*="badge"][data-style="sold"] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #ffffff !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 9999px !important; } /* Reserved/On Hold badge - gray gradient */ [data-pp-embed] [class*="badge"][data-style="reserved"], [data-pp-embed] [class*="badge"][data-style="onhold"] { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; color: #ffffff !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 9999px !important; } ``` *** ## Troubleshooting ### It looks right in the editor but not on my site 1. **Missing URL parameter:** make sure `?customCss=true` is in your embed URL 2. **Not published:** the status above the editor must read *Published*, not *Unsaved changes* — click **Save & publish** 3. **Cache:** reload with a hard refresh, or test in a private window ### Some elements aren't styling correctly You're probably using selectors that don't exist in the viewer: * ❌ Don't use: `[data-pp-button]`, `[data-pp-unit-tile]`, `.unitTile` * ✅ Do use: `[class*="button"]`, `[class*="unitTile"]` Inspect the element in the live preview to see the exact class, then target it with a `[class*="…"]` wildcard. ### My rule is ignored Add `!important`. CSS Modules generate high-specificity selectors, so most overrides need it. ### I changed a `--pp-*` variable and nothing happened Variables only do something when a rule reads them. They're defined by your stylesheet, not by the viewer — so `--pp-brand-primary` on its own changes nothing. Add the **Brand colours** snippet plus the snippet for the section you want to restyle. ### My viewer stopped getting design updates That happens when the published stylesheet is a full copy of the default theme: it pins every component to an old version. Trim it down to the rules you actually changed. ### How do I go back to the default theme? Click **Remove** in the CSS editor, or drop the `?customCss=true` parameter from your embed URL. Removing doesn't delete your stylesheet — you can paste it back later. # Form Source: https://viewerdocs.planpoint.io/documentation/general/advanced-features/forms The Form module allows you to create fully customizable forms to collect information from users interested in a specific unit. Form can be integrated directly into your project flow, supporting advanced customization, logic rules, previews, and multi-language translations. This module is commonly used for: * Lead capture * Unit inquiries * Reservation requests * Contact and information collection ### Video Guide for Visual Learners