Abandon de panier : Configuration des e-mails

Modifié le Mar, 19 Mai à 10:23 H

Ce type d'e-mail sert d'outil pour augmenter la conversion, afin que le client qui a abandonné le processus de réservation dans le checkout, finisse par finaliser la réservation. Cet outil est configurable pour les réservations avec et sans système de fidélisation.

Pour pouvoir utiliser ce type d'e-mails, il faut suivre les étapes suivantes :

Demander la fonctionnalité

Pour activer cette fonctionnalité, vous devez contacter l'équipe de support de Witbooking afin de demander l'activation de l'e-mail d'abandon de panier.

Signer et recevoir le contrat

Witbooking enverra à l'hôtel l'annexe du contrat de traitement des données pour signature avant d'activer la fonction d'abandon de panier. Une fois signé et renvoyé, Witbooking procédera à l'activation de la fonctionnalité

Configurer le contenu de l'e-mail

Une fois la fonctionnalité activée, accédez à :

1. Communication > E-mails Personnalisés > Créer Nouveau > Abandon de panier.

2. Choisir le type de modèle : « Default » ou « Custom »

3. Enregistrer

Important: un seul modèle d'e-mail peut être configuré, qui sera utilisé à la fois pour les réservations avec Loyalty et pour celles sans Loyalty.

Vérifier les politiques de confidentialité

Vérifiez que les politiques de confidentialité sont correctement configurées dans Configuration > Informations Légales. Cette configuration est obligatoire pour que l'e-mail soit envoyé correctement. Si elle n'est pas configurée, l'e-mail n'arrivera pas au client.

COMMENT METTRE EN PAGE LE MODÈLE CUSTOM

Vous trouverez ci-dessous les étiquettes qui peuvent être utilisées et qui seront remplacées par les valeurs de chaque réservation :

Client
- Nom → customer.name
- Prénom → customer.lastName
- Adresse → customer.address
- Numéro de téléphone → customer.phoneNumber
- E-mail → customer.email
- idCard → customer.idCard
- Pays → customer.country
- Tier (niveau loyalty) → customer.tier
Client Sessión ID → Peut être utilisé, mais n'a pas beaucoup d'utilité pour le client.
urlSession → C'est cette étiquette qui doit être implémentée dans le bouton pour rediriger vers le checkout avec le panier abandonné.

Note importante: les variables marquées avec HTML contiennent du HTML ; dans ce cas, pour les afficher, il faut utiliser trois accolades {{{ }}}. Exemple : {{{conditionInfo.checkOut}}}

Pour tester l'apparence des styles des modèles lors de leur envoi par e-mail, vous pouvez utiliser le lien suivant : https://putsmail.com/tests/new

Exemple d'utilisation :

Exemple de modèle HTML:
(les styles sont ceux de l'exemple d'utilisation)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> ReadMsgBody{width: 100%;}.ExternalClass{width: 100%;}.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height: 100%;}body{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}p{margin: 1em 0;}table td{border-collapse: collapse;}img{outline:0;}a img{border:none;}@-ms-viewport{width: device-width;}</style> <style type="text/css"> @media only screen and (max-width: 480px){.container{width: 100% !important;}.footer{width:auto !important; margin-left:0;}.mobile-hidden{display:none !important;}.logo{display:block !important; padding:0 !important;}img{max-width:100% !important; height:auto !important; max-height:auto !important;}.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}.photo img{width:100% !important; max-width:100% !important; height:auto !important;}.drop{display:block !important; width: 100% !important; float:left; clear:both;}.footerlogo{display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}.nav4, .nav5, .nav6{display: none !important;}.tableBlock{width:100% !important;}.responsive-td{width:100% !important; display:block !important; padding:0 !important;}.fluid, .fluid-centered{width: 100% !important; max-width: 100% !important;height: auto !important; margin-left: auto !important;margin-right: auto !important;}.fluid-centered{margin-left: auto !important;margin-right: auto !important;}/* MOBILE GLOBAL STYLES - DO NOT CHANGE */ body, .tb_properties{font-family: Arial !important; font-size: 16px !important; color: #000000 !important; line-height: 1.5 !important; padding: 0px !important;}.buttonstyles{font-family: Arial, helvetica, sans-serif !important; font-size: 16px !important; color: #000000 !important; padding: 10px !important;}h1{font-family: Arial !important; font-size: 22px !important; color: #202020 !important; line-height: 1 !important;}h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important;}h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important;}a:not(.buttonstyles){line-height: 1 !important; border-radius: 10px;}.mobile-hidden{display: none !important;}.responsive-td{width: 100% !important; display: block !important; padding: 0 !important;}/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */}@media only screen and (max-width: 640px){.container{width:100% !important;}.mobile-hidden{display:none !important;}.logo{display:block !important; padding:0 !important;}.photo img{width:100% !important; height:auto !important;}.nav5, .nav6{display: none !important;}.fluid, .fluid-centered{width: 100% !important;max-width: 100% !important;height: auto !important; margin-left: auto !important; margin-right: auto !important;}.fluid-centered{margin-left: auto !important;margin-right: auto !important;}}</style> </head> <body bgcolor="#F3EFE7" text="#000000" style="-webkit-text-size-adjust:none;background-color : #F3EFE7; font-family : Arial, helvetica, sans-serif; line-height : 100%; font-size : 16px; color : #000000; padding : 0px; "> <div style="font-size:0; line-height:0;"> <custom name="opencounter" type="tracking"> <custom name="usermatch" type="tracking"/> </div><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr><td align="center" valign="top"> <custom type="header"/></td></tr><tr><td align="center"> <table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center"><tr><td><table class="tb_properties border_style" style="font-size : 16px; font-family : Arial, helvetica, sans-serif; color : #000000;background-color : transparent; border : 0px solid transparent; line-height : 100%; " cellspacing="0" cellpadding="0" bgcolor="transparent" width="100%"> <tr><td align="center" valign="top"><table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tr> <td class="content_padding" style="padding : 0px 0px 0px 0px; "> <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr> <td align="center" class="header" valign="top"><table align="left" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr> <td align="left" valign="top"><table cellspacing="0" cellpadding="0" style="width:100%"> <tbody><tr><td class="responsive-td" valign="top" style="width: 100%;"><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #234739; min-width: 100%; " class="stylingblock-content-wrapper"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;"><tr><td><table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;"><tr><td valign="top" style="width: 50%; padding-right: 0px;"><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #234739; min-width: 100%; " class="stylingblock-content-wrapper"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner"><div style="line-height: 200%;"> <b><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif; color: #F3EFE7;"> RÉSERVATIONS : +34 921 920 300</span></span></b></div></td></tr></table></td><td valign="top" style="width: 50%; padding-left: 0px;"><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #234739; min-width: 100%; " class="stylingblock-content-wrapper"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner"><div dir="rtl" style="line-height: 200%;"> <span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"> </span></span><b><span style="font-size:12px;"><u></span> <a target="_blank" class="buttonstyles" style="font-family:Arial,Helvetica,sans-serif;color: #F3EFE7"href="https://direct.witbooking.com/hotel/demo_urbano" title="" alias="" conversion="false" data-linkto="other">CHERCHER DISPONIBILITÉ</a></u></span></b></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0" role="presentation"><tr><td align="center"><img data-assetid="130495" src="https://www.smarttravel.news/wp-content/uploads/2022/11/Witbooking_Logo_verde.png" alt="" width="600" style="display: block; padding: 0px; text-align: center; height: auto; width: 50%; border: 0px;"></td></tr></table></td></tr></table><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0" role="presentation"><tr><td align="center"><img data-assetid="195424" src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/104/779/original/93dc4afd-b0c3-47d8-b01e-c9574d2fb542.jpg?1700742692" alt="" width="600" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px; border-radius: 10px;"></td></tr></table></td></tr></table><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;"><tr><td><table cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;"><tr><td valign="top" class="responsive-td" style="width: 100%;"><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #F3EFE7; min-width: 100%; " class="stylingblock-content-wrapper"><tr><td style="padding: 30px 30px 20px; " class="stylingblock-content-wrapper camarker-inner"><div style="text-align: center; line-height: 150%;"> <span style="font-size:22px;"><b>Bonjour ! {{{customer.name}}}{{{customer.lastName}}}, conservez votre niveau {{{customer.tier}}}</b><b> et ne perdez pas votre réservation !</b> <br><br>Ne vous inquiétez pas, nous la gardons pour vous un moment ;)<span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #F3EFE7; min-width: 100%; " class="stylingblock-content-wrapper"><tr><td style="padding: 10px 0px; " class="stylingblock-content-wrapper camarker-inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td align="center"><table border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td class="innertd buttonblock" bgcolor="#D8FF02" style=" border-radius: 5px!important; -moz-border-radius: 0px; -webkit-border-radius: 0px; color: transparent; background-color: #234739;"><a style=" font-size: 16px; font-weight: bold; font-family: Arial, helvetica, sans-serif; color: #F3EFE7; text-align: center; text-decoration: none; display: block; line-height: 100%; background-color: #234739; border: 1px solid transparent; padding: 10px; border-radius: 10px!important; -moz-border-radius: 0px; -webkit-border-radius: 0px;" target="_blank" class="buttonstyles" href="{{{urlSession}}}" title="" alias="" conversion="false" data-linkto="other">REVENIR À LA RÉSERVATION</a></td></tr></table></td></tr></table></td></tr></table> </body> </html>

COMMENT TESTER LE MODÈLE PERSONNALISÉ :

Pendant le développement de l'e-mail personnalisé, vous pouvez valider la programmation du fichier JSON sur le site web suivant : Éditeur Tryit de W3Schools

COMMENT CONFIGURER LE MODÈLE CUSTOM :

Pour configurer votre modèle custom, vous devez suivre les étapes suivantes :

Accédez depuis le backoffice du moteur à Communication > E-mails Personnalisés > Créer Nouveau.
- Actif: la case à cocher doit être cochée.
- Type d'e-mail: Abandon de panier
- Délai: choisissez le temps, selon préférence.
- Type de modèle: Modèle custom
- Traductions
  - Objet: supprimez le contenu par défaut et introduisez l'objet personnalisé, selon vos préférences, dans toutes les langues actives.
  - Corps : introduisez le modèle personnalisé que vous avez mis en page, dans toutes les langues actives.
- Enregistrer.
Faites un test pour confirmer que vous l'avez créé correctement.

Abandon de panier : Configuration des e-mails

COMMENT METTRE EN PAGE LE MODÈLE CUSTOM

COMMENT CONFIGURER LE MODÈLE CUSTOM :

EXEMPLE DE MODÈLE PAR DÉFAUT :

*Affiche le logo chargé dans le moteur, et l'image est la première configurée dans l'hébergement.