Comment personnaliser son bouton Rendez-vous

Développeurs    |   novembre 14, 2016

Cet article présente des notes techniques sur comment personnaliser l’apparence du bouton Rendez-vous, en plus de la personnalisation de certains comportements. Il est à noter que ces options sont facultatives et non requises au bon fonctionnement du widget Rendez-vous.

  • Personnalisation complète de l’apparence du bouton
  • Redirection URL (réservation complété ou interrompue)
  • Ajout de code analytique

Personnalisez l’apparence de votre bouton Voici une liste des options de style disponibles, que vous pouvez utiliser en tant que propriétés d’un objet javascript.

  • button_color : css background-color
  • text_color : css text color
  • border : css border style
  • hover_button_color : on hover background-color
  • hover_text_color : on hover text color
  • hover_border : on hover border style
  • border_radius : css border-radius
  • button_height : css height
  • line_height : css inline-height – pour centrer verticalement le texte du bouton
  • font_size : css font-size – pour le label (texte) du button
  • font_weight : css font-weight – exemple bold
  • font_family : css font family.
  • show_icon : true ou false pour afficher ou non l’îcon.
  • icon_path : url vers une image pour l’îcon.
  • use_important : true ou false – pour appliquer le css, donc important de le mettre à true.

Repérer la méthode javascript bxe_core.init, et ajoutez-y la propriété customize_button, étant un objet javascript (property / value pairs) qui utilise les propriétés listées plus haut. Les valeurs sont les même que pour CSS, par exemple 18px qui est une valeur valide pour font_size en CSS.

Example :

bxe_core.init({
bxLang: ‘fre’,
bxExtWin: true,
customize_button:
{
button_color:"#D792A1",
text_color:"#333333"
}
});

Personnalisez le comportement de votre bouton Vous pouvez personnaliser certain comportement du bout Rendez-vous en utilisant quelques paramètres simple.

  • Referrer url (document_domain): Le lien URL d’origine de l’utilisateur (de quelle page il vient avant la page contenant le bouton).
  • onBooked url (url_booked): Si ce paramètre est présent, l’utilisateur web sera redirigé au URL fourni suite à une demande de rendez-vous complétée avec succès.
  • onCancel url (url_cancel) : Si ce paramètre est présent, l’utilisateur web sera redirigé au URL fourni suite à une demande de rendez-vous interrompu, donc non complétée.
  • Google Analytic ID (custom_ga): Vous permet de fournir votre propre code d’analytique.

Voici un exemple d’utilisation.

window.bxApiInit =

function() {bxe_core.init({ bxLang: ‘eng’, btn_text_eng: ‘Book your appointment’, bxExtWin: true, document_domain:’wix.com‘, Url_booked:’[ajoutez votre URL rdv complété ici]‘, Url_cancel:’[ajoutez votre URL rdv interrompu / non complété ici]‘, Custom_ga:’[ajoutez votre code Google Analytics ici]‘ });

};

Astrid Bertout
Digital Marketing | Customer Success
L’importance d’un site Internet
Astuces d'affaires   |   Oct 19, 2016
Vous pouvez maintenant personnaliser le prix et la durée de vos services par personnel
Fonctionalités   |   Nov 18, 2016