Express kontakta oss formulär på hemsida är en komponent ni kan infoga på objektbeskrivningen på eran hemsida.

Se en demo på hur det fungerar på demo hemsidan. Klicka in på ett objekt och klicka på knappen i nedre högra hörnet för att få fram formuläret. Ni kan också klicka på intressanmälan eller tipsa länkarna i menyn för att öppna upp det.

• Visa en knapp i något av webbläsarens hörn som öppnar upp formuläret.
• Dölja knappen om ni vill.
• Direktlänka till formuläret för intresseanmälan, tipsa en vän och visningsbokning.
• Få events när en anmälan eller visningsbokning har skett ifall ni till exempel vill logga till ett analysverktyg

Börja med att ta kontakt med oss på Vitec för att få en nyckel. Ni behöver också meddela oss en lista på domäner som ska kunna visa komponenten.

Sen lägger ni in följande skript på sidan för objektbeskrivningen.

<script type="text/javascript" src="https://hemsida.maklare.vitec.net/js/components/init.js"
        data-key="{{nyckel}}" data-estate-id="{{objektid}}"
        data-anchor-position="bottom-right"
        data-is-anchor-enabled="true"
        async defer></script>
            

• data-key (krävs): Nyckeln ni fått från oss
• data-estate-id (krävs): Det objektid som beskrivningen gäller för
• data-is-anchor-enabled: Om knappen ska visas
• data-anchor-position: Var knappen ska visas (bottom-left, bottom-right, top-left, top-right)
• data-init: En funktion som ska anropas när komponenten är initierad, se nedan för mer information

Initieringsfunktionen kan användas ifall ni till exempel vill lyssna på när en formuläret har skickats. Om ni till exempel vill logga i ett analysverktyg.

<script type="text/javascript">
    let myApp = {
        vitecContactInit: function(component) {
            component.on("sent", function(sender, eventArgs) {
                if (eventArgs.intent === "interested") {
                    alert(eventArgs.person.firstName + " skickade en intresseanmälan");
                }
            });
        }
    }
</script>
<script type="text/javascript" src="https://hemsida.maklare.vitec.net/js/components/init.js"
        data-key="{{nyckel}}" data-estate-id="{{objektid}}"
        data-anchor-position="bottom-right"
        data-is-anchor-enabled="true"
        data-init="myApp.vitecContactInit"
        async defer></script>
            

Parametern component har följande metoder

• on(eventName: "sent", callback: (sender, eventArgs) => void - Exempel: component.on("sent", function(sender, eventArgs) { /* Code */ });

• person: {firstName, lastName, email, phone, streetAddress, zipCode, city}
• message: string // Texten i meddelanderutan
• includeValuation: boolean // Om personen även vill ha värdering
• intent: "interested" | "interested-viewing" | "attend-viewing" | "share-to"
  • interested: Intresseanmälan
  • interested-viewing: Visningsanmälan
  • attend-viewing: Visningsbokning
  • share-to: Tipsa en vän

• Intresseanmälan: <button onclick="Vitec.Housing.Components.raiseEvent('$contact', 'show', 'interested')" >Intresseanmälan</button>
• Tipsa en vän: <button onclick="Vitec.Housing.Components.raiseEvent('$contact', 'show', 'share-to')" >Tipsa</button>
• Visningsbokning: <button onclick="Vitec.Housing.Components.raiseEvent('$contact', 'show', 'attend-viewing')" >Boka</button>
• Visningsbokning på datum: <button onclick="Vitec.Housing.Components.raiseEvent('$contact', 'show', {view: 'attend-viewing', date: '2024-02-29T10:00'})" >Boka</button>