Produits iFrame | melon.market

Veuillez noter que cet article concerne le produit melon.market (première location).

L’iFrame pour le produit de relocation melon.rent diffère de celui-ci.
Pour plus d’informations, veuillez consulter : Comment connecter mon site web ? | melon.rent

Emonitor propose des iframes payantes pour le formulaire de contact et le navigateur d'appartements. 

Les iframes peuvent être intégrées via un lien sur le site web (en général, c'est l'agence web qui s'en charge), ce qui demande moins d'efforts que Interface de formulaire de prospect et l´interface des objets. 

L'inconvénient des iframes est la limitation en termes de design et de fonctionnalité. Vous trouverez dans cet article les possibilités de personnalisation et la manière de les adapter.

Formulaire de contact iFrame (payant)

Voici un exemple d'iframe pour un formulaire de contact.

Possibilités de personnalisation:

• Couleur de la police
• Couleur d'arrière-plan
• Police
• Texte d'introduction et texte relatif à la protection des données
• Il est également possible d'afficher ou de masquer d'autres champs d'information (sélection par emonitor).

Comment personnaliser le formulaire de contact ? 

Naviguez vers:

1. « Paramètres du projet » (en haut à droite) -> « Site web »

2. Cliquez sur « + » et Sélectionnez « Modèle vierge » et donnez un nom au modèle. Cliquez sur « Ok ».

3. Dans le menu de gauche, sous « Blocs de contenu » et « Contact », sélectionnez l'un des deux modèles ci-dessous.

Navigateur d'appartements iFrame avec isométrie (payant) 

Options de personnalisation :

• Couleur de la police
• Couleur d'arrière-plan
• Police
• Sélection de colonnes (sélection par emonitor)
• Affichage de documents
• Filtre (sélection par emonitor)

Exemple: 

L'isométrie (payante) peut être réservée en option.

Sélection des colonnes

L'en-tête des colonnes peut être personnalisé. Exemple :

Désignation = Numéro d'appartement / NR.

Nombre de pièces = Pièces

Étage = Étage / Niveau

Modifier l’ordre des colonnes, ajouter des colonnes et masquer des colonnes

Les colonnes du tableau peuvent être configurées en cliquant sur l’icône en forme de crayon, puis dans l’onglet « Colonne ».

À droite, vous voyez toutes les colonnes actuellement affichées ; à gauche, les autres colonnes disponibles.

En cliquant sur les colonnes à gauche, celles-ci apparaissent en bas de la liste à droite. Pour modifier l’ordre, vous pouvez faire glisser les colonnes vers le haut ou vers le bas. En cliquant sur le « x » à droite, la colonne correspondante est déplacée de nouveau vers la gauche et n’est plus affichée dans le tableau.

Une fois la configuration terminée, vous devez cliquer sur « Enregistrer » dans la fenêtre contextuelle, puis également cliquer à droite sur l’icône de la disquette (Enregistrer).

Vue détaillée de l'appartement dans le tableau

D'autres informations sur le bien peuvent être affichées ici, à côté des colonnes. Les attributs qui peuvent être affichés sont les mêmes que ceux des colonnes. Il est également possible d'ajouter un texte d'information (pour tous les appartements, pas individuellement), ainsi que des boutons et des liens PDF.

Exemple:

Sélection des filtres

Les options de filtrage suivantes peuvent être affichées:

FAQ

Comment activer ou désactiver l'option de candidature dans l'iframe ? 

1. Cliquez sur « Paramètres du projet » en haut à droite.
2. Cliquez sur « Site web » à gauche.
3. Sélectionnez le « crayon d'édition » en haut à droite.
4. Accédez à « WIDGETS ». 
5. Pour activer la colonne dans l'iframe , 
   • sélectionnez « Wishlist » 
   • Pour la désactiver, sélectionnez « Aucun »
6. N'oubliez pas d'enregistrer le modèle en haut à droite 
7. Vous pouvez afficher l'aperçu pour vérifier vos informations

Info: L'activation ne peut malheureusement pas être réglée automatiquement dans le temps et les modifications doivent être effectuées manuellement.

Comment puis-je insérer l'isométrie?

1. Cliquez sur « Paramètres du projet » en haut à droite.
2. Cliquez sur « Site web » à gauche.
3. Sélectionnez le « crayon d'édition » en haut à droite.
4. Ouvrez « Isométrie ».
5. Cochez la case « Afficher l'isométrie ».
6. Sélectionnez le fichier SVG de l'isométrie.
7. Enregistrez la modification.

Comment afficher l'isométrie dans la vue mobile ?

Sur les appareils mobiles, l'isométrie s'affiche sous forme d'image dans la vue détaillée, car les effets de survol ne sont pas possibles sur ces appareils.

1. Cliquez sur « Paramètres du projet » en haut à droite.
2. Cliquez sur « Site web » à gauche.
3. Sélectionnez le « crayon d'édition » en haut à droite.
4. Accédez à « Affichage détaillé » 
5. Cochez la case « Afficher la colonne détaillée » 
6. Cliquez sur les 3 points en haut à droite et sélectionnez « Enregistrer le modèle entre »
7. Cliquez sur le champ de texte et sélectionnez CTRL + V (ou clic droit et coller)  
8. Enregistrez la modification

Affichage mobile:

Code HTML pour la vue détaillée:

<div class="detail-row-default">
    <div class="detail-row-info">
        <div class="detailed-row-title">
            <span>{{ gettext('general_apartment_number') }} </span>
            <span class="detail-apartment-title">{{ rowData.title }}</span>
        </div>
        <div class="links-row" :class="{ mobile: isMobile }">
            <div class="links-column-1">
                <i class="fas fa-download pdf-icon"></i>
                <a target="_blank" :href="rowData.factsheet">
                    {{ gettext('Factsheet') }}
                </a>
            </div>
            <div v-if="isMobile" class="links-column-2">
                <i class="fas fa-download pdf-icon"></i>
                <a target="_blank" :href="isPdf ? pdfLink : rowData.pdf_file_link">
                    {{ gettext('Grundriss') }}
                </a>
            </div>
        </div>
        <div class="links-row" :class="{ mobile: isMobile }">
            <div class="links-column-1">
                <i class="fas fa-download pdf-icon"></i>
                <a href="/#" target="_blank">
                    {{ gettext('Kurzbaubeschrieb') }}
                </a>
            </div>
            <div class="links-column-2">
                <i class="fas fa-download pdf-icon"></i>
                <a href="/#" target="_blank">
                    {{ gettext('Gut zu Wissen') }}
                </a>
            </div>
        </div>
    </div>
    <div v-if="!isMobile &amp;&amp; isPdf" class="detail-row-layout detail-row-layout-pdf">
        <iframe :src="pdfLink" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <div v-if="!isMobile &amp;&amp; !isPdf" class="detail-row-layout">
        <img :src="rowData.pdf_file_link" width="100%">
    </div>
    <isometry-mobile>
</isometry-mobile></div>

Remarque: Si vous nous avez uniquement commandé l'isométrie, sans iFrame, et que votre agence web rencontre des problèmes lors de l'insertion de l'isométrie ou lors de son utilisation, celle-ci devra utiliser une autre structure/désignation de niveaux et tout devrait alors fonctionner. 

Vous avez des questions? Contactez notre support à l’adresse suivante support@emonitor.ch