Implémentation du widget

Le widget Cocolis permet d'intégrer à votre site web un formulaire de devis de transport via un iframe.

Via un iframe

Pour l'environnement de production :

<iframe src="https://widget.cocolis.fr/iframe.html" />

Pour l'environnement de test :

<iframe src="https://staging-widget.cocolis.fr/iframe.html" />

Pré-remplissage du formulaire de devis

Afin de pré-remplir dans le formulaire de devis les informations concernant l'expéditeur, le destinataire et l'objet à livrer, les informations suivantes peuvent être renseignées sous forme de paramètres de recherche dans l'URL de l'iframe.

type SearchParams = {
  externalId?: string;
  externalDescription?: string;
  format?: "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
  fromCity?: string;
  fromCountryAlpha2: string;
  fromEmail?: string;
  fromFirstname?: string;
  fromLastname?: string;
  fromLat?: number;
  fromLng?: number;
  fromName?: string;
  fromPhone?: string;
  fromPostcode?: number;
  fromStreet?: string;
  fromDetails?: string;
  hideEmail?: boolean;
  insuranceValue?: number;
  partnerName: string;
  photoUrls?: string[];
  title?: string;
  toCity?: string;
  toCountryAlpha2?: string;
  toEmail?: string;
  toFirstname?: string;
  toLastname?: string;
  toLat?: number;
  toLng?: number;
  toPhone?: string;
  toPostcode?: number;
  toStreet?: string;
  toDetails?: string;
  weight?:
    | "less_than_5_kg"
    | "between_5_and_30_kg"
    | "between_30_and_50_kg"
    | "between_50_and_100_kg"
    | "more_than_100_kg";
  hideCloseButton?: boolean;
};

La propriété partnerName est obligatoire.

hideCloseButton permet de masquer le bouton de fermeture en haut à droite de l'iframe quand celui-ci n'est pas utilisé, dans une dialog ou un drawer par exemple.

Le champ hideEmail permet d'afficher ou non un champ d'email ainsi qu'un bouton permettant d'envoyer le devis par email au sein du widget. Cela est nécessaire par exemple dans le cas où vous voulez afficher le widget Cocolis à des moments différents de vos parcours et que vous ne souhaitez pas toujours proposer l'envoi du devis par email.

info

Si hideEmail n'est pas spécifié, alors par défaut le champ email sera affiché.

hideEmail = false (ou défaut) :

hideEmail = true :

Le format de l'objet est déterminé selon son volume :

• s : Entre 0 et 0,1 m³
• m : Entre 0,01 et 0,05 m³
• l : Entre 0,05 et 0,5 m³
• xl : Entre 0,5 et 1 m³
• xxl : Entre 1 et 2 m³
• xxxl : Plus de 2 m³

Exemple d'intégration :

const rideInfos = {
    externalId: "12345",
    externalDescription: "Lot 2, vente du 26/05/2025",
    format: "l",
    fromCity: "Paris",
    fromCountryAlpha2: "FR",
    fromEmail: "exemple@cocolis.fr",
    fromFirstname: "Jean",
    fromLastname: "Dupont",
    fromLat: 48.866667,
    fromLng: 2.333333,
    fromName: 'Maison de vente XYZ',
    fromPhone: "0601020304",
    fromPostcode: 75001,
    fromStreet: "1 Place Vendôme",
    fromDetails: "Digicode 1234",
    hideEmail: false,
    insuranceValue: 1000,
    partnerName: "nom-de-votre-site",
    photoUrls: ["https://picsum.photos/200", "https://picsum.photos/300"],
    title: "Armoire",
    toCity: "Lyon",
    toCountryAlpha2: "FR",
    toEmail: "exemple2@cocolis.fr",
    toFirstname: "Marie",
    toLastname: "Dupuis",
    toLat: 45.75,
    toLng: 4.85,
    toPhone: "0601020304",
    toPostcode: 69001,
    toStreet: "1 Place Bellecour",
    toDetails: "Digicode 5678",
    weight: "less_than_5_kg",
}

const searchParams = new URLSearchParams(rideInfos).toString()

<iframe src={`https://widget.cocolis.fr/iframe.html?${searchParams}`} />

Événements

Le widget envoie des messages à son parent :

• Lors du résultat de l'estimation de prix

type EventDataEstimate = {
  "cocolis-availability": boolean;
  "cocolis-estimated-price"?: number;
};

• Lors de la fermeture de l'iframe (au clic sur le bouton Close dans l'iframe)

type EventDataClose = {
  "cocolis-iframe-close": true;
};

Exemple d'intégration :

window.addEventListener("message", function (event) {
  const { data } = event;
  if (data["cocolis-iframe-close"]) {
    console.log("The iframe has been closed");
  }
  if (data["cocolis-availability"] !== undefined) {
    console.log("Availability: " + data["cocolis-availability"]);
  }
  if (data["cocolis-estimated-price"] !== undefined) {
    console.log("Estimated price: " + data["cocolis-estimated-price"]);
  }
});