Embed a Matterport 3D tour in a property listing page and control navigation programmatically via the Showcase SDK
domain: matterport.com · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Log into the Matterport account, navigate to Account Settings > Developer Tools, and create an SDK key, adding the production and development domains to the allow list
Add the Matterport Showcase SDK script tag to the listing page and initialize the SDK by calling the connect() function with the model SID and the SDK key to establish a connection to the embedded iframe
Use sdk.Model.getData() to retrieve model metadata including floor count, scan positions, and room labels to populate property detail UI elements alongside the 3D viewer
Subscribe to sdk.Camera.pose events to track the viewer's current position within the model and update UI state (e.g., highlight the current room on a floor plan overlay) in response to navigation
Call sdk.Sweep.moveTo() with a specific sweep ID to programmatically navigate the viewer to a featured location such as the master bedroom or kitchen when a user clicks a room name in the listing UI
Use sdk.Mattertag.add() to inject custom annotation overlays at specific 3D coordinates, linking to feature descriptions, inspection reports, or seller disclosures within the virtual tour
Known gotchas
The SDK key is domain-restricted; a key created for a production domain will not function on localhost during development—create a separate development SDK key with localhost in the allow list
Matterport model SIDs are not secret but models must be set to public sharing in the Matterport account; a privately shared model will return an authentication error when the SDK tries to load it even with a valid SDK key
The SDK connect() call is asynchronous and model loading takes several seconds depending on model size and network conditions; all SDK method calls must be deferred until the sdk.App.state event signals that the model is fully loaded, or they will silently fail
Give your agent this knowledge — and 15,600+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?