Guide de configuration : intégrations au site web

1. Avant de commencer

Un forfait Pro. Le widget d'annonces, le bouton résidents, les boutons prêts à l'emploi, les codes QR et les flux de données font partie de RentMerchant Pro. Les liens simples et votre page RentMerchant gratuite fonctionnent avec tous les forfaits. Passez au forfait supérieur depuis Facturation dans votre compte.
Une adresse e-mail confirmée. Les annonces et les widgets ne se chargent que pour les comptes vérifiés.
Un accès pour modifier votre site web. Vous devez pouvoir ajouter un élément de page dans votre outil de création de site. Certains outils n'autorisent le code personnalisé qu'avec leurs forfaits payants ; les étapes pour votre outil de création de site ci-dessous indiquent où le faire.

2. Trouver votre code

Connectez-vous sur app.rentmerchant.com.
Ouvrez Paramètres, puis l'onglet Intégrations.
Cliquez sur une option pour l'ouvrir, puis utilisez son bouton Copier le code. Votre code contient déjà le nom de votre compte : collez-le exactement tel que copié.

Dans les exemples de cette page, your-name remplace le nom de votre compte. Copiez toujours votre vrai code depuis la page Intégrations plutôt que de retaper ceux-ci.

3. Ajoutez vos annonces de location

Le widget affiche les logements que vous publiez. Rien n'est publié tant que vous ne l'activez pas, logement par logement.

Ouvrez Annonces (sous Location). Tous vos logements y figurent. Un bien sans logement affiche un bouton Créer une annonce.
Cliquez sur Modifier pour un logement et indiquez les chambres, les salles de bain, la surface en pieds carrés, le loyer mensuel, le dépôt, la date de disponibilité (laissez vide pour « disponible maintenant »), les animaux acceptés et une description.
Téléversez jusqu'à 12 photos. La première photo est la photo de couverture ; utilisez les flèches pour réorganiser. Les données de localisation sont automatiquement supprimées de chaque photo.
Cochez Publier ce logement et cliquez sur Enregistrer l'annonce.

Quand un logement est loué, cliquez sur Retirer l'annonce sur la page Annonces. Il disparaît de votre site web sous cinq minutes, sans code à modifier.

Chaque annonce dispose aussi de sa propre page avec une galerie de photos et un bouton Postuler pour ce logement. Le formulaire de candidature s'ouvre avec ce logement déjà sélectionné, et les dossiers arrivent dans votre onglet Dossiers de location.

Affiche vos logements publiés sous forme de cartes avec une photo, le loyer, les chambres, les salles de bain et la disponibilité. Les visiteurs cliquent sur une carte pour ouvrir la page de l'annonce.

Option A : code du widget (recommandé)

S'adapte à la largeur de votre page et s'agrandit selon vos annonces. Collez-le là où les annonces doivent apparaître :

<div data-rentmerchant-listings="your-name"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

Option B : iframe

Pour les outils qui n'autorisent pas les scripts. C'est un cadre de hauteur fixe avec défilement :

<iframe src="https://app.rentmerchant.com/embed/listings/your-name" title="Available rentals"
        loading="lazy" style="width:100%;height:900px;border:0"></iframe>

Si votre outil autorise un script à côté, utilisez plutôt la version à taille automatique de la page Intégrations. Elle ajoute une ligne qui donne au cadre exactement la hauteur de vos annonces.

5. Bouton résidents flottant

Ajoute un bouton Résidents dans le coin inférieur de chaque page. Il ouvre un petit menu : Connexion résident, Payer le loyer, Soumettre une demande de réparation, Postuler et Locations disponibles (chacun affiché uniquement s'il s'applique à votre compte). Collez-le une seule fois, dans la zone de votre outil qui ajoute du code à toutes les pages (généralement appelée code global, code de pied de page ou injection de code) :

<script src="https://app.rentmerchant.com/embed/v1/resident-button.js" data-rentmerchant-site="your-name" async></script>

Si votre outil n'a pas de zone de code global, collez-le sur chaque page où vous voulez le bouton.

6. Boutons et liens

Boutons : dans la section Boutons des Intégrations, cochez les boutons souhaités, choisissez une couleur, vérifiez l'aperçu et copiez le code. Les boutons sont de simples liens stylisés : ils fonctionnent donc dans tout outil qui accepte le HTML, y compris les newsletters par e-mail.

Liens (tous les forfaits) : copiez n'importe quel lien dans le menu de navigation de votre site, le pied de page, un profil de réseau social ou votre signature e-mail. Dans la plupart des outils : ouvrez l'éditeur de menu, ajoutez un élément lien et collez l'adresse.

7. Codes QR

Dans la section Codes QR, cliquez sur Télécharger le PNG sous le code souhaité. Imprimez-le sur une pancarte « À louer » (utilisez Locations disponibles ou Postuler), un avis dans la buanderie (Payer le loyer ou Réparations) ou votre dossier d'emménagement. Imprimez-le avec une largeur d'au moins 2,5 cm (1 pouce) et scannez-le avec votre propre téléphone avant d'en imprimer une série.

8. Étape par étape pour votre outil de création de site

Les outils de création de site modifient leurs menus de temps en temps. Si un libellé ci-dessous ne correspond pas exactement, cherchez l'élément appelé HTML, Intégration ou Code.

Wix

Annonces ou boutons : dans l'éditeur, cliquez sur Ajouter des éléments (+), puis Intégrer du code, puis Intégrer du HTML. Choisissez Code, collez et cliquez sur Mettre à jour. Faites glisser le cadre à la taille souhaitée.
Bouton résident : allez dans les Paramètres de votre site, puis Code personnalisé (sous Avancé), cliquez sur Ajouter du code personnalisé, collez, puis choisissez Toutes les pages et Corps, fin. Wix ne propose le code personnalisé que pour les sites avec un domaine connecté et un forfait payant.
Publiez votre site.

Squarespace

Annonces ou boutons : modifiez la page, cliquez sur un point d'insertion, choisissez Code, collez et vérifiez que Afficher la source est désactivé.
Bouton résident : ouvrez Paramètres, puis Outils de développement (ou Avancé), puis Injection de code, et collez dans Pied de page.
Les scripts dans les blocs de code et dans Code Injection nécessitent un forfait Squarespace incluant le code personnalisé. Si le code du widget ne fonctionne pas, utilisez plutôt l'option iframe.

WordPress

Annonces ou boutons : modifiez la page, cliquez sur +, ajoutez un bloc HTML personnalisé, collez et mettez à jour la page.
Bouton résident : utilisez le réglage de code de pied de page de votre thème s'il en a un, ou une extension de code d'en-tête et de pied de page (par exemple WPCode), et collez dans le pied de page.
Sur WordPress.com (le service hébergé), les scripts ne fonctionnent qu'avec les forfaits qui autorisent les extensions et le code personnalisé. Avec les autres forfaits, utilisez l'option iframe et les boutons.

GoDaddy Websites + Marketing

Modifiez votre site, cliquez sur Ajouter une section, recherchez HTML et ajoutez-la.
Collez votre code dans la zone de code personnalisé de la section et cliquez sur Terminé. L'option iframe est la plus fiable ici.
Pour le bouton résidents, cherchez dans les Paramètres de votre site le code global. Si votre forfait ne le propose pas, ajoutez plutôt les boutons à vos pages.

Weebly (Square Online classic)

Annonces ou boutons : faites glisser un élément Intégrer du code sur la page, cliquez dessus, choisissez Modifier le HTML personnalisé et collez.
Bouton résident : Paramètres, puis SEO, puis collez dans Code de pied de page.

Webflow

Annonces ou boutons : faites glisser un élément Code Embed sur la page et collez.
Bouton résident : Paramètres du site, puis Code personnalisé, et collez dans Code de pied de page. Publiez.
Webflow exige un forfait de site payant pour le code personnalisé.

Un site personnalisé ou fait main

Collez le code du widget là où doivent figurer les annonces, et le bouton résident juste avant la balise de fermeture </body>. Ou utilisez les Flux JSON pour créer votre propre design.

9. Référence des options

Attribut	Fonctionne sur	Ce que ça fait
data-limit="3"	Widget d'annonces	Afficher uniquement les premiers logements (les plus tôt disponibles d'abord).
data-accent="#0f766e"	Widget d'annonces, bouton résidents	Votre propre couleur, sous forme de code hexadécimal à six chiffres. La couleur par défaut est l'indigo RentMerchant.
data-position="left"	Bouton résident	Placer le bouton dans le coin inférieur gauche plutôt qu'à droite.
data-label="Tenants"	Bouton résident	Modifiez le texte du bouton (24 caractères maximum).
?accent=0f766e	Adresse de l'iframe	Votre couleur pour la version iframe, ajoutée à la fin de son adresse.

Exemple, un widget affichant trois logements en bleu sarcelle :

<div data-rentmerchant-listings="your-name" data-limit="3" data-accent="#0f766e"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

10. Pour les développeurs web : flux JSON

Deux flux publics en lecture seule contiennent les mêmes données que les widgets. Aucune clé n'est nécessaire, les requêtes cross-origin sont autorisées et les réponses sont mises en cache pendant cinq minutes.

GET https://app.rentmerchant.com/r/your-name/listings.json
GET https://app.rentmerchant.com/r/your-name/links.json

Chaque élément de listings comprend :

{
  "id": 476,
  "title": "Capitol Flats · Unit 102",
  "city": "Columbus, OH",
  "rent": "$1,950/mo",          "rent_amount": 1950,
  "deposit": "$1,950",
  "facts": ["2 bed", "1 bath", "880 sq ft"],
  "bedrooms": 2, "bathrooms": 1, "square_feet": 880,
  "available": "Available now", "available_on": null,
  "pets": "Cats OK",
  "description": "Bright corner two bedroom...",
  "photos": [{ "url": "...", "thumb": "...", "w": 2000, "h": 1500 }],
  "url": "https://app.rentmerchant.com/r/your-name/listings/476",
  "apply_url": "https://app.rentmerchant.com/apply/...?unit=476"
}

Affichez le texte exactement tel que fourni et créez des liens vers url et apply_url plutôt que de concevoir votre propre formulaire de candidature. L'adresse complète n'apparaît que sur la page d'annonce, pas dans le flux. links.json renvoie votre nom, votre couleur d'accent et les liens résidents (key, label, url).

11. Dépannage

La zone du widget est vide.: Votre outil de création de site supprime peut-être les scripts ; utilisez l'option iframe. Vérifiez aussi que votre compte est sur Pro, que votre e-mail est confirmé et que le code a été collé en entier.
Il indique qu'aucun logement n'est disponible.: Ouvrez Annonces dans votre compte et vérifiez qu'au moins un logement est coché comme publié. Les modifications apparaissent sous cinq minutes.
Tout semble correct dans l'éditeur, mais pas sur mon site en ligne.: La plupart des outils n'exécutent les scripts que sur le site publié, pas dans l'aperçu de l'éditeur. Publiez, puis vérifiez l'adresse en ligne.
L'iframe est coupé ou affiche une barre de défilement.: Utilisez la version à taille automatique, ou augmentez la valeur height dans le code de l'iframe.
Le bouton résident n'apparaît pas.: Il doit se trouver dans une zone de code global ou sur la page elle-même, et il n'apparaît que sur le site publié. Si votre compte n'a aucun lien à afficher, il reste masqué.
Autre chose ?: Ouvrez Assistance dans votre compte et indiquez-nous l'adresse de votre site web et l'outil utilisé pour le créer. Nous y jetterons un œil.

12. Sécurité et confidentialité

Les paiements et la connexion s'ouvrent toujours sur RentMerchant. Un locataire ne saisit jamais de mot de passe ni de coordonnées bancaires sur votre site web.
Les widgets n'affichent jamais que des liens et des photos RentMerchant, et sont isolés du reste du code et des styles de votre page.
Seuls les logements que vous publiez sont publics. Retirer une annonce la supprime partout en même temps.
Les données de localisation et les autres informations cachées sont supprimées de chaque photo que vous téléversez.
Si un compte est fermé, suspendu ou quitte Pro, ses annonces et widgets cessent automatiquement de s'afficher.

Prêt à connecter votre site ?

Connectez-vous et ouvrez Intégrations, ou voyez d'abord le widget d'annonces en action.

Ouvrir Intégrations Voir la démo en direct

Intégrations au site web