3D Twin Viewer implementation guide
Apps should be implemented as embed elements on your website.
You should not implement app using iframe - it will heavily decrease mobile UX experience.
Element that is used to render app must have defined sizes - width and height. It is important for proper app rendering.
Your AppID:
Basic implementation
Basic implementation is to copy HTML code on the right and paste it in target place in website code.
Proper app rendering requires target element to have defined width and size.
Code in HTML section
content_copy
<div id="sm3de"></div>
<script
src="https://oneappappsprd.z6.web.core.windows.net/launcher/production/app.js"
data-appid="[PUT-YOUR-APPID-HERE]">
</script>
Example CSS Styles for propper layout
content_copy
<style>
#sm3de {
width: 100%;
height: calc(100vh - 100px); // adjust to website
}
</style>
Configure your implementation
Configuration below allows to adjust app behaviour to your needs. Select features and they will be added to example code on the right.
Features:
Initial view
initViewId: number
Choose initial view. View ID can be obtained from URL params or by contacting our support team. Usually they are in order: 1, 2, 3, ...
viewId is number representation of all 3d views visible in app
it is possible to check viewId from url query: '&sm-viewer-view=2'
App language
initLang: "en" | "pl" | "de" | "fr" | "it" | "he" | "es" | "bg" | "el" | "pt" | "ro" | "nl"
Set apps language
Initial view rotation
initViewRotation: number
Sets the initial rotation frame of the 3D view. Value from 0 to 119.
Action on unit open
onUnitOpen: (unit: Unit) => void
Provided function will be called after user click "open unit" button
Hooks:
Custom handling of analytical events
onAnalyticEvent: (event: AnalyticEvent) => void
Function is called to handle analytical events
Interaction with app instance
Set app language
setLocale: (locale: string) => void
Call this function to change app language. App may support only selected languages.
Close App
closeApp: () => void
Allows to close app
Set unit filter
unitFilterSet: (unitFilters: UnitFilter[]) => void
Allows to filter units. It is possible to filter all unit data. For more info please contact our support.
App configuration:
Options that change the appearance and behaviour of the app. Passed inside the appFeatures object within props.
Hide share button
appFeatures.disableShare: boolean
Hides the share button in the app.
Hide fullscreen button
appFeatures.disableFullscreenButton: boolean
Hides the button that toggles fullscreen mode.
Hide screenshot button
appFeatures.disableScreenshotButton: boolean
Hides the screenshot button from every bottom navigation - the building viewer and all tour players.
Hide outlines toggle
appFeatures.disableOutlinesSwitchButton: boolean
Hides the button that toggles unit outline visibility. The outlines themselves are unaffected.
Disable investment tour
appFeatures.disableInvestmentTour: boolean
Removes every entry point to the investment tour: the button in the building viewer navigation and the tour pins. Unrelated POI pins keep their own configuration.
Simple config
Advanced config
Code in HTML section
content_copy
<div id="sm3de"></div>
<script>
window.AppLauncher3DEOAConfig = {
appId: "[PUT-YOUR-APPID-HERE]",
rootElement: "sm3de",
};
</script>
<script src="https://oneappappsprd.blob.core.windows.net/$web/launcher/production/app.js"></script>
Example CSS Styles for propper layout
content_copy
<style>
#sm3de {
width: 100%;
height: calc(100vh - 100px); // adjust to website
}
</style>