Getting Started

Presets

Presets allow you to reuse styling and behavior across multiple hotspots or skin components. Instead of manually copying colors, fonts, borders, actions, and other settings from one element to another, you create a preset once and link it wherever you need it. When you later update the preset, every linked hotspot or skin component is updated automatically. In other design software, presets may also be referred to as (design) tokens or (combo) classes. Hotspot Presets vs. Skin Presets 360Crafter contains two separate preset systems: - Hotspot Presets - Skin Presets Although they are managed independently, they work exactly the same way. Everything explained in this article applies to both systems. Preset Types Each hotspot or skin component can use three types of presets: - Unique - Custom - Defaults These presets work together in a priority system, where higher-priority presets override lower-priority ones. Unique Preset The Unique preset contains styling and actions that apply only to the currently selected hotspot or skin component. Use it when an individual element needs to look or behave differently from everything else. For example, if one hotspot should have a purple background while every other hotspot remains unchanged, configure that color on its Unique preset. The Unique preset always takes highest priority over other presets. Defaults Preset The Defaults preset defines the starting appearance and behavior for a specific hotspot or skin type. Each hotspot type has its own defaults. For example: - Text Hotspots - Icon Hotspots - Video Hotspots Changing a Defaults preset only affects newly created items of that type. For example, if you change the Icon Hotspot Defaults preset to have: - a white background - a circular shape Every new Icon Hotspot you create will automatically start with those settings instead of the standard appearance. The Defaults preset always takes the lowest priority compared with other presets. Custom Presets Custom presets let you create reusable styles that can be shared across multiple hotspots or skin components. Create one by clicking the + button located between Unique and Defaults, then give it a descriptive name, such as: - Project Card Hotspot - Navigation Button - Warning Marker Once linked, every hotspot using that preset shares the same styling and actions. For example: - one preset could create white circular hotspots with a green border - another could create red squares with 5 px rounded corners Editing the preset later automatically updates every linked hotspot. The Custom preset takes higher priority than Defaults but lower priority than Unique. There can be multiple custom presets on a single hotspot or skin component. The last linked custom preset takes priority over the custom presets that were already added before. Preset Priority When multiple presets define the same property, the preset with the highest priority wins. Priority is always: 1. Unique 2. Custom Presets (top to bottom) 3. Defaults This means: - Unique always overrides Custom and Defaults. - Custom presets override Defaults. - If multiple Custom presets are linked, the one higher in the list takes precedence. If you want to change the order of Custom presets, unlink the preset and link it again. Newly linked presets are placed above older ones. Understanding Preset Indicators The Properties panel uses color indicators to show where each value comes from. Blue A blue-highlighted property belongs to the currently selected preset. Any changes you make will be stored in that preset. Orange An orange-highlighted property is inherited from another preset. Hover over the property to see which preset supplies the value. Red (Strikethrough) A red property with a strikethrough indicates that the value exists but is currently overridden by a higher-priority preset. For example: - The Unique preset sets the background color to purple. - Your Project Card Hotspot custom preset sets the background color to white. Because Unique has a higher priority, the hotspot appears purple. If you later remove the purple background from the Unique preset, the hotspot automatically falls back to the white background defined in the Project Card Hotspot preset. Presets for Design and Actions Presets are not limited to visual styling. They can also contain Actions. For example, imagine a hotspot that triggers a notification. - If the notification action is added while the Unique preset is selected, only that hotspot will trigger the notification. - If the notification action is added to a Custom preset, every hotspot linked to that preset will automatically inherit the same action. This makes presets useful for maintaining both a consistent appearance and consistent behavior throughout your project.

Variables

Variables are named, reusable values you define once and apply throughout your project. Instead of manually typing the same color code or number in dozens of places, you set up a variable with a meaningful name and reference it wherever you need it. When you update the variable, every place that references it updates automatically. Why Use Variables? Presets handle consistent styling within a single hotspot type, but variables go a level above that. If your brand color appears across multiple different presets (a callout preset, a menu preset, a tooltip preset), updating one variable updates all of them at once without touching each preset individually. And at the craftspace level, a single variable change can ripple across every project in your craftspace simultaneously. Variable Types 360Crafter supports three types of variables: Color Stores a hex color value (e.g. #3B82F6). Color variables are the most commonly used type. Apply them to backgrounds, text, borders, icon tints, and any other color property in the editor. Number Stores a measurement or rotation value, such as 20px or 50%, or a number of degrees. Use number variables for consistent spacing, border radius, font sizes, rotation, or any other measurement that repeats across your project. Icon Stores a reference to an icon. This can be a URL, an uploaded image, or a built-in Lucide icon using the format lucide:icon-name. Icon variables let you swap out a symbol globally across all hotspots that reference it. Scopes: Craftspace vs. Project Variables exist at two levels: Craftspace variables are shared across all projects in your craftspace. They are ideal for brand-wide values like your main brand colors, your company icon, and your standard sizing. Everyone working in the craftspace can use them. Project variables are local to a single project. They are perfect for values specific to one experience, such as a scene-specific color palette, a unique icon set for that tour, or sizing that differs from the craftspace defaults. When a project variable and a craftspace variable share the same name, the project variable takes priority. This lets you override a craftspace default for a specific project without affecting anything else. Managing Variables Craftspace Variables Open the Craftspace settings to manage variables shared across all your projects. Here you can create, edit, and delete colors, numbers, and icons at the craftspace level. Project Variables Open the Variables page within a project to manage that project’s local variables. You will also see a read-only view of craftspace variables here, so you can see everything available to your project in one place. Using Variables in Properties When editing a hotspot or other element in the Properties Panel, you will see variable options in color pickers and numeric fields. - Color fields show a list of your color variables. Click one to apply it. The field stores a reference to the variable rather than the raw color value, so if you update the variable later the element updates too. - Numeric fields show a variable picker when variables of the matching type are available. Select a variable to link the field to that value. A Built-in Variable: circle 360Crafter includes one built-in variable available to all projects: circle. It stores the value 999px, which produces a fully circular border radius when applied to an element. You will see it appear in border radius fields alongside your own variables. Tips - Name variables for intent, not appearance. brand-primary is better than blue-500. If you rebrand to a different color, the name still makes sense. - Use craftspace variables for anything brand-wide. Reserve project variables for one-off overrides or project-specific values. - Project variables override craftspace variables by name. To customise a craftspace default for one project, create a project variable with the exact same name. - Variables are live. Editing a variable value immediately updates every place it is referenced in your project. You do not need to re-apply it manually.

CMS

The CMS (Content Management System) is a structured data layer built into every 360Crafter project. Think of it as a spreadsheet that lives alongside your experience. You can store any information in it, such as product names, prices, descriptions, images, audio files, and locations, and then connect that data directly to hotspots, panoramas, and other elements in your tour. This separation of content from design means you can update text, swap images, or change values without touching the visual layout of your experience at all. Tables, Fields, and Records The CMS is organized around three concepts: Tables (also called collections or datasets) are the top-level containers. Each table holds one category of information. A project might have a “Products” table, a “Status” table, or a “Team Members” table. Fields are the columns of a table. Each field has a name and a type (text, number, image, and so on). The field structure defines what kind of data a table holds. Records are the rows of a table. Each record is one entry: one product, one status, one team member. Built-in Tables Every project automatically gets three tables that 360Crafter creates and keeps up to date for you: Panoramas contains one record for each panorama in your project, with fields like name, thumbnail, file URL, dimensions, and order. Hotspots contains one record for each hotspot, with fields like name, type, position, the panorama it belongs to, and its applied presets. Group Hotspots contains one record for each hotspot group, with fields like name, type, panorama, parent group, and child count. You cannot delete these built-in tables. They are regenerated automatically whenever you add, remove, or change panoramas or hotspots. You can add your own custom fields to extend them. For example, you could add a “Location” field to the Panoramas table or a “Product SKU” field to the Hotspots table. Field Types When you add a field to a table, you choose its type. The available types are: | Type | What it stores | | ------------- | --------------------------------------------------------------- | | Text | Short plain text | | Long Text | Multi-line or rich text | | Number | A numeric value, with options for decimal places and formatting | | Integer | A whole number | | URL | A web address | | Color | A color value | | Image | An uploaded image (JPG, PNG, WebP) | | Audio | An uploaded audio file (MP3, WAV, AAC, and others) | | Date | A date, with configurable display format and timezone | | Date & Time | A date and time | | Switch | A true/false toggle | | Single Select | A choice from a fixed list of options you define | | Linked Field | A reference to one or more records in another table | Linked Fields A linked field creates a relationship between two tables. For example, if you have a “Products” table and a “Categories” table, you can add a linked field to Products that points to a row in Categories. Each product record then references its category. When you set up a linked field, you choose whether it connects one record to one other record, or one record to many. Linked fields work in both directions. If Products links to Categories, you can also access which products belong to a given category from the Categories side. Localization Text and URL fields can be marked as localizable. When a field is localizable, it stores a separate value for each language your project supports rather than a single value. For example, a localizable “Description” field on a panorama might store “Kitchen” in English and “Küche” in German. When a viewer switches the tour language, all localizable fields automatically display the correct translation. You configure which languages your project supports in the project settings. The active language in the editor can be switched at any time to preview how the experience looks in each locale. Editing CMS Data The CMS Page Open the CMS page from the project sidebar to see and edit all your tables. The interface works like a spreadsheet: you can add and remove columns, edit cells directly, import data from a CSV or JSON file, and manage all records in one place. Quick Edit from the Editor When you select a hotspot in the editor, the Properties Panel includes a CMS tab. This tab shows the custom fields for that hotspot’s record and lets you edit them without leaving the editor. Changes are saved immediately and are reflected anywhere that field is used in the experience. Using CMS Data in Your Experience CMS data becomes useful when you connect it to visible content in your tour. You can reference any CMS field in a text field using the [table.field] token syntax. For example, placing [hotspot.name] in a hotspot label inserts that hotspot’s name from the CMS. Placing [panorama.location] in a description inserts the location field from the Panoramas table for the current panorama. This is covered in detail in the Dynamic Linking article. Collection Lists A collection list is a special skin component. It connects to a CMS table and renders one copy of its contents for each record in that table. This lets you build dynamic lists, galleries, or menus that are driven entirely by CMS data. You can create a menu by having 3 text component A, B and C as their own duplicated menu items in the skin and linking them to panoramas A, B and C. Or you can put in a single Collection List with 1 text component. In which you link the collection list to the panoramas. Now when you import later panorama D, it is automatically shown up as well in the menu. You can also configure filters and sorting on a collection list to control which records are shown and in what order.

Dynamic Linking

Dynamic Linking is the way you connect dynamic data (both CMS and Variables) to content in your experience. Instead of typing a fixed value into a text field, you insert a token that pulls its value from somewhere exlse: a CMS field, a variable, the name of a linked target, and so on. When that source value changes, the content updates automatically everywhere it is used. The Token Syntax Tokens follow the pattern [source.field], where source is the data table or system you are pulling from, and fieldis the specific piece of data you want. For example: - [hotspot.name] inserts the name of the current hotspot from the CMS - [panorama.location] inserts the location field of the current panorama - [var.brand_primary] inserts the value of a variable named “Brand Primary” Where You Can Use Tokens Tokens work in any text field that supports rich content. This includes hotspot labels, descriptions, tooltips, and custom HTML fields. When you are in one of these fields, type [ to open the autocomplete menu. The menu shows all available sources and fields. You can keep typing to filter the list, then press Enter or click to insert the token. Available Sources Hotspot Resolves fields from the current hotspot’s record in the Hotspots CMS table. [hotspot.name], [hotspot.type], [hotspot.panorama_name] Any custom field you have added to the Hotspots table is also available here. Panorama Resolves fields from the current panorama’s record in the Panoramas CMS table. [panorama.name], [panorama.location], [panorama.time] Any custom field you have added to the Panoramas table is also available here. Target Resolves the name of the panorama a navigation hotspot links to. [target.name] Group Resolves fields from the parent group hotspot’s record in the Group Hotspots CMS table. Useful when a hotspot is nested inside a group and you want to display information about that group. [group.name], [group.panorama_name] You can also traverse up to a grandparent group using [group.parent.field]. Collection Resolves fields from the currently active row inside a collection list component. This source is only available inside the content of a collection list, where each item represents one record from the connected CMS table. [collection.name], [collection.price], [collection.image] Variable Resolves the value of a project or craftspace variable. [var.brand_primary], [var.border_radius] Variable names are normalized to snake_case. A variable named “Brand Primary” is referenced as [var.brand_primary]. Linked Fields If a CMS table has a linked field pointing to another table, you can traverse that link inside a token using dot notation. For example, if the Hotspots table has a linked field called “Status” that references a “Status” table with a “label” field, you can write: [hotspot.status.label] This resolves the label from the linked Status record for the current hotspot. How Values Are Resolved Numbers are formatted according to the field’s settings, including decimal places, thousands separators, and separator style. Localizable fields resolve to the value for the currently active language. If no translation exists for the active language, the default language value is used as a fallback. Image and audio fields resolve to a working URL, so you can use them directly as the source of an image or audio element in custom HTML. Variables resolve to their raw value: a hex code for a color variable, a pixel value for a number variable, and so on. Tips - Use [panorama.name] in a hotspot label to automatically show the name of the destination panorama on a navigation hotspot, without ever typing it manually. - Use [collection.field] inside a collection list to build a fully data-driven gallery or menu where every item is pulled from a CMS table. - Localizable fields update automatically when the viewer switches language. You do not need separate tokens per language.

Responsive design with breakpoints

360Crafter experiences are viewed on a wide range of devices and screen sizes. Responsive design lets you control how your hotspot callouts look and behave at different viewport widths, so your experience looks great whether someone is viewing it on a large desktop screen, a tablet, or a phone. Breakpoints 360Crafter uses three breakpoints: | Breakpoint | When it applies | | -------------- | -------------------------------------- | | Base | All screen sizes (your default design) | | Tablet | Screens 1079px wide and below | | Mobile | Screens 767px wide and below | The Base breakpoint is your starting point. It defines how everything looks by default. Tablet and Mobile breakpoints let you adjust that design for smaller screens. How the Cascade Works The three breakpoints follow a cascade from largest to smallest: - Everything starts from Base. - Adjustments you make at Tablet automatically apply to Mobile as well. - Adjustments you make at Mobile apply only to Mobile. This means you only need to make changes at a breakpoint when something needs to look different from the breakpoint above it. Switching Breakpoints in the Editor The breakpoint selector appears in the Properties Panel when you have a hotspot or skin component selected. Switching breakpoints resizes the canvas to match that breakpoint’s width and switches the editor into that breakpoint’s context so any changes you make are saved for that breakpoint only. You can also drag the edge of the canvas to resize it freely. The editor automatically detects which breakpoint you are in based on the canvas width. Working with Breakpoints 1. Design everything in Base first until you are happy with the desktop layout. 2. Switch to Tablet and adjust for medium-sized screens. These changes cascade to Mobile automatically. 3. Switch to Mobile and make any additional adjustments needed for small screens. 4. Switch back to Base to continue refining the overall design. When a property has been customized at the active breakpoint, it is highlighted in the panel so you can see at a glance what differs from the base design.