AppMulti 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.
Hooks:
Custom contact form
onContactFormClicked: (units: Unit[], formId: string, appId: string) => void
App allows to user custom contact form when user clicks "send message" button. Provide function that should be executed on button click.
// formId: string
// id of the contact form that was opened
// appId: string
// id of the sub-app (investment) that emitted this event
Custom handling of analytical events
onAnalyticEvent: (event: AnalyticEvent) => void
Function is called to handle analytical events
Action after user sent contact form request
onContactFormSent: (contactFormData: JsonObject, appId: string) => void
Provided function will be called after user submiots contact request. Argument of function will contain user data and selected units.
// appId: string
// id of the sub-app (investment) that emitted this event
"Phone" button in app
onPhoneClicked: (appId: string) => void
Providing function will display "phone" button in app, which will trigger provided function.
// appId: string
// id of the sub-app (investment) that emitted this event
Additional data in 3D Estate Contact Form
rfpExternalData: (contactFormData: JsonObject) => Promise<JsonObject | undefined>
Function that handles passing additional data to 3D Estate Contact Form. Function will be called when user sends contact form. Proper handling of extra data need configuration in 3D Estate system - please contact our support.
Add custom UTM data to contact form
rfpUtmData: () => Promise<UtmData | undefined>
Function that handles passing additional UTM data to 3D Estate Contact Form. Function will be called when user sends contact form. Proper handling of extra data need configuration in 3D Estate system - please contact our support.
type UtmData = {
utm_source?: string;
utm_medium?: string;
utm_campaign?: string;
utm_term?: string;
utm_content?: string;
fbclid?: string;
gclid?: string;
[key: string]: string | undefined;
}
Handling of custom app actions
onAppAction: (id: string, data: JsonObject, appId: string) => void
Provided function will be called after a specific event, such as clicking an additional button in the details panel. The function returns the action ID and any additional data that may be passed as part of that action. Proper handling of the custom app action requires configuration in the 3D Estate system - please contact our support
// appId: string
// id of the sub-app (investment) that emitted this event
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>