Aller au contenu principal

Lead Capture

StableOffert en anglais seulementÉ.-U. 🇺🇸 et Canada 🇨🇦

Description​

Le formulaire Lead Capture pour IO Reports permet aux clients de capturer facilement des prospects et de livrer instantanément des rapports de quartier et de marché personnalisés et à leur image, grâce à des intégrations SDK ou API de génération de prospects.

info

Pour des trucs, astuces et bonnes pratiques concernant la mise en œuvre de Lead Capture, consultez notre Guide de mise en œuvre.

Installation​

Nos produits SDK sont servis à partir d'une source unique.

Les SDK sont conçus pour fonctionner avec React et d'autres cadriciels déclaratifs.

D'abord, installez le script d'entrée avec npm, yarn ou pnpm :

npm i --save @local-logic/sdks-js
yarn add @local-logic/sdks-js
pnpm add @local-logic/sdks-js

Exemple

import { useRef, useEffect } from "react";
import LLSDKsJS from "@local-logic/sdks-js";

const globalOptions = {
locale: "en", // Si disponible, changer pour anglais ou français
appearance: {
  // Ajoutez ici toute autre modification d'apparence
  // Consultez la section "Appearance" ci-dessous pour la liste des options disponibles.
  variables: {
    "--ll-color-primary": "#fd3958",
    "--ll-color-primary-variant1": "#d5405b",
    "--ll-font-family": "Avenir, sans-serif"
  }
}
};

const localLogicClient = LLSDKsJS("your-api-key-here", globalOptions);

function LeadCaptureSDKComponent() {
const containerRef = useRef(null);

useEffect(() => {
  if (!containerRef.current) {
    return;
  }

  const sdkOptions = {
    lat: 45.5282164, lng: -73.5978527

    // ...Autres options propres au SDK
  }

  const sdkInstance = localLogicClient.create(
    "lead-capture",
    containerRef.current,
    sdkOptions,
  );

  // Il est important de détruire l'instance du SDK lorsque le composant est démonté.
  return () => {
    sdkInstance.destroy();
  }
}, []);

return (
  <div
    ref={containerRef}
    style={{
      // La hauteur dépend du SDK que vous implémentez
      height: "700px",
      width: "100%",
    }}
  />
);
}

export default LeadCaptureSDKComponent;

Configuration​

Clé API​

Votre clé API vous sera fournie par l'équipe Local Logic.

Options globales​

const localLogicClient = localLogicSDK(apiKey, globalOptions)

Ces options sont disponibles pour tous les SDK. Vous pourrez également spécifier des options propres à chaque SDK, selon le SDK que vous implémentez. Ces options seront disponibles dans la documentation propre à chaque SDK

NomRequisTypeValeur par défautDescription
apiKeytruestringClé API requise pour effectuer des requêtes vers l'API Local Logic.
globalOptions.appearancefalseAppearanceL'option appearance permet d'utiliser des variables pour personnaliser l'apparence de vos widgets.
globalOptions.localefalse"en" ou "fr""en"L'option locale spécifie la langue des pointages et de l'interface utilisateur.
globalOptions.externalIdfalsestringPour les SDK connectés à l'application de gestion de quartier (Neighborhood Management App) du Local Logic Hub. Ce champ est requis pour que les SDK Neighborhood Showcase et Favorite Neighborhoods fonctionnent

Apparence​

Variables couramment utilisées​

VariableDescription
--ll-color-primaryLa couleur principale de la marque.
--ll-font-familyModifie la police de caractères utilisée dans l'ensemble des SDK. Actuellement, les SDK ne prennent en charge que les polices système. Cette valeur doit toujours inclure une police de secours, par exemple Inter, sans-serif.

Fonctions​

Une fois que vous avez initialisé votre client SDK avec votre clé API et vos options globales, plusieurs fonctions sont disponibles.

Create​

const sdkInstance = localLogicClient.create("lead-capture", container, sdkOptions)

Cette fonction crée un nouveau widget SDK selon le nom spécifié.

Les sdkOptions sont spécifiques à chaque SDK créé.

NomRequisTypeValeur par défautDescription
sdkTypetruestringLe SDK que vous souhaitez créer. "lead-capture" dans ce cas.
containertrueHTMLElementL'élément dans lequel effectuer le rendu.
sdkOptionstrueSDKOptionsOptions requises pour le sdkType spécifié. Les options sont détaillées ci-dessous.

SDKOptions​

NameRequiredTypeDefaultDescription
sdkOptions.lat*numberLatitude de la zone que le rapport généré doit couvrir.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.lng*numberLongitude de la zone que le rapport généré doit couvrir.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.addressLabel*stringAdresse de l'emplacement; elle est nécessaire pour générer des rapports destinés aux acheteurs.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.geographyId*stringL'ID de géographie Local Logic. Les géographies valides sont celles de niveau inférieur à 40 : celles qui commencent par g10_, g20_, g30_, g32_, g35_, g37_ et g38_.

* Ce champ est requis si vous n'utilisez pas lat/lng.
sdkOptions.customDataCustomDataPermet aux clients de transmettre des métadonnées supplémentaires sur chaque prospect, sous forme de paires clé/valeur.

Veuillez noter que cette fonctionnalité est désactivée par défaut. Veuillez communiquer avec support@locallogic.co pour en demander l'activation pour votre compte.
Exemples d'utilisation​

Le SDK Lead Capture peut être instancié de deux façons mutuellement exclusives :

  1. En utilisant lat, lng
    • Requis : lat, lng, addressLabel
    const sdk = await loadLeadCaptureSDK({
      sdkOptions: {
        lat: 45.5282164, lng: -73.5978527
        addressLabel: "123 Main Street, Montreal, QC",
      },
    });
  2. En utilisant geographyId
    • Requis : geographyId
    • Ignoré : lat, lng, addressLabel
    const sdk = await loadLeadCaptureSDK({
      sdkOptions: {
        geographyId: "g10_drt2yt86",
        // lat, lng et addressLabel ne sont pas nécessaires et seront ignorés s'ils sont fournis
      },
    });

Update​

sdkInstance.update(sdkOptions)

Cette fonction sert à mettre à jour le widget avec de nouvelles valeurs. Cela peut être utile, par exemple, si vous souhaitez changer l'emplacement du widget.

L'objet sdkOptions suit la même structure qu'à la création.

On​

sdkInstance.on(event, callback)

Cette fonction prend en argument une fonction de rappel (callback) qui est déclenchée lorsqu'un event survient. Actuellement, il n'existe qu'un seul événement.

NomRequisTypeValeur par défautDescription
eventtrue"change"Le nom de l'event.
callbacktrueCallbackFunctionLa fonction de rappel à déclencher lorsque l'event spécifié survient.
type CallbackFunction = ({ type: string, data: unknown }) => void;

Destroy​

sdkInstance.destroy()

Cette fonction sert à détruire le widget SDK créé.

Définitions de type​

Type de données personnalisées​

L'objet peut contenir jusqu'à 50 paires clé/valeur. Chaque clé peut contenir jusqu'à 100 caractères, tandis que chaque valeur peut contenir jusqu'à 2048 caractères, sous forme de chaînes de caractères, de nombres, de booléens ou de chaînes vides.

type CustomData = Record<string, string | number | boolean | null>;

Exemple :

customData = {
  zip_code: 12345,
  mls_id: 102931024,
  listing_agent: "J. Smith",
};