Ajouter la réservation et le chat à votre propre site web

Vous avez déjà un site web sur WordPress, Squarespace, Wix ou une autre plateforme ? Ajoutez un court script et votre parcours de réservation s'ouvre directement par-dessus vos propres pages. Les clients réservent sans quitter votre site. Un second script ajoute votre bouton de Live Chat.

Ajouter le widget de réservation

1. 1

   Étape 1 sur 3

   Ajoutez le script

   Collez ceci avant la balise body de fermeture de votre site web, en utilisant votre propre adresse principale :

   <script src="https://hairhaven.onsoftalon.com/embeds/booking.js"></script>
   

   Utilisez votre domaine principal dans l'adresse du script. Vos autres adresses redirigent vers l'adresse principale, et le widget n'écoute que l'adresse depuis laquelle il a été chargé : en cas de différence, il ne se ferme pas et ne signale pas correctement les réservations.

2. 2

   Étape 2 sur 3

   Ajoutez un bouton

   Donnez la classe softalon-booking-trigger à n'importe quel bouton ou lien :

   <button class="softalon-booking-trigger">Book Now</button>
   

   Vous pouvez aussi utiliser l'attribut data-softalon-booking-trigger ou l'id softalon-booking-trigger.

3. 3

   Étape 3 sur 3

   Testez

   Publiez votre page et cliquez sur le bouton.

   Vous verrez:

   Votre parcours de réservation glisse depuis le côté droit de la page. Sur téléphone, il occupe tout l'écran.

Présélectionner un établissement, un service ou un membre de l'équipe

Ajoutez ces attributs à un bouton pour avancer directement dans le parcours de réservation :

<button class="softalon-booking-trigger" data-service-id="SERVICE_ID">
    Book a haircut
</button>

Pour trouver un ID, ouvrez l'option de partage de ce service, de cet établissement ou de ce membre de l'équipe dans Softalon et copiez le lien de réservation complet. Les ID figurent dans le lien après serviceId=, locationId= et memberId=. Consultez Partager votre lien de réservation.

Choisir le mode d'ouverture

Définissez-la pour chaque bouton avec data-variant, ou pour toute la page avec data-variant sur la balise script :

<script src="https://hairhaven.onsoftalon.com/embeds/booking.js" data-variant="dialog"></script>

Les clients peuvent fermer le widget avec la touche Échap. Avec sheet, un clic sur l'arrière-plan assombri le ferme aussi.

Le contrôler avec JavaScript

Si vous écrivez votre propre code, le script ajoute window.$softalon.booking :

window.$softalon.booking.init({
    variant: "sheet",
    params: { locationId: "LOCATION_ID", serviceId: "SERVICE_ID" },
});

window.$softalon.booking.onCompleted(function (data) {
    // The client finished booking
});

window.$softalon.booking.open();

Ajouter le Live Chat

Si votre forfait inclut l'assistant IA et que le Live Chat est activé, ajoutez le script du chat pour afficher un bouton de chat dans le coin de votre site web :

<script src="https://hairhaven.onsoftalon.com/embeds/chat.js"></script>

• Pour placer le bouton à gauche, ajoutez data-position="left" à la balise script.
• Pour ouvrir le chat depuis votre propre bouton, donnez-lui la classe softalon-chat-trigger ou l'attribut data-softalon-chat-trigger.

Si le Live Chat est désactivé, ou si votre forfait ne l'inclut pas, le script du chat n'affiche rien. Consultez Activer le Live Chat sur votre site de réservation.

Le script du chat ajoute aussi window.$softalon.chat, avec open(), close(), isOpen(), hide(), show(), onSessionStarted(callback) et onMessageReceived(callback).