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]‘ });
};