Comment intégrer le widget de réservation TIMIFY dans votre site web ou CMS?

Intégration rapide et facile de TIMIFY dans votre site web!

By TIMIFY

Mise à jour 07 February, 2024

Intégrez le widget de réservation TIMIFY à votre site web rapidement et facilement en quelques paramètres et faites-vous réserver en ligne.

Voici ce que vous devez savoir

Le widget de réservation TIMIFY fonctionne dans tous les navigateurs web à partir Edge, Firefox, Safari et Chrome. Nous disposons également de plugins pour de nombreux systèmes de gestion de contenu (CMS), dont Joomla, Word Press et Drupal.

Lorsqu'il s'agit d'intégrer un widget à votre site web, vous avez deux options : ajouter le widget en tant que superposition ou en tant qu'iFrame. La différence réside dans la façon dont ils s'affichent sur votre site web. Nous vous expliquons plus en détail ci-dessous, afin que vous puissiez choisir celle qui vous convient le mieux.

Nous vous fournissons des instructions et des conseils pour les deux options. L'option la plus facile à choisir est la position fixe avec la superposition.

Nous vous indiquons comment intégrer le widget si vous utilisez un CMS.

----------------------------------------------------------------------------------------------------------------------------

Qu'est-ce qui est le mieux pour vous, une superposition ou un iFrame?

Le widget de réservation en superposition: Bouton de réservation nécessaire.

Un widget superposé se trouve au centre de votre site web, couvrant votre contenu. Pour ouvrir le widget, l'utilisateur doit cliquer sur un bouton de réservation. Un overlay est plus rapide - et un peu plus facile - à installer, par rapport à l'ajout d'un iFrame. Voici à quoi ressemble un bouton de réservation standard:

...et voici ce qui se passe lorsque l'utilisateur clique sur "réserver maintenant":

Le widget de réservation comme iFrame

Abréviation de "inline frame", une iFrame est simplement une image dans une image. Si vous choisissez cette option, votre widget de réservation s'ouvre automatiquement: vous n'avez pas besoin de bouton de réservation. Un iFrame vous offre plus d'options de personnalisation, et pour cette raison, sa mise en place prend un peu plus de temps. Vous devez également comprendre suffisamment le langage html pour savoir où placer le widget sur votre site web. Voici comment et à quoi ressemble un iFrame:

Décidez quelle option vous voulez, et lisez les instructions d'installation. Dans le cadre du processus d'intégration, vous devrez peut-être fournir votre TIMIFY compte ID. Vous le trouverez sous Compte -> Détails:

-----------------------------------------------------------------------------------------------------------------------------

Connectez-vous à votre compte TIMIFY et faites ouvrir votre site web. Vous devrez copier-coller quelques lignes de code dans le code HTML de votre site.

ÉTAPE 1:

Allez dans Paramètres -> Intégration -> et sélectionnez le bouton Réservation dans l'onglet.

ÉTAPE 2 :

Choisissez l'endroit où vous souhaitez que votre bouton apparaisse. Si vous optez pour une position fixe, votre bouton apparaîtra toujours au milieu de votre écran, à gauche ou à droite. Il apparaîtra toujours dans cette position - sur chaque page de votre site web - que vous fassiez défiler l'écran vers le haut ou vers le bas. Vous n'aurez qu'un bout de code à copier-coller dans votre HTML - le bouton de réservation lui-même.

Si vous choisissez une position de bouton flexible, vous avez toute liberté quant à l'endroit où vous souhaitez placer votre bouton. Vous aurez un bout de code supplémentaire à ajouter à votre code HTML: pour déterminer où vous voulez que le bouton de réservation apparaisse. Vous devez comprendre un peu de html pour savoir où ajouter ce code!

ÉTAPE 3:

Pour le bouton de réservation fixe:

ouvrez le fichier HTML de la page web sur laquelle vous souhaitez que le widget de réservation apparaisse. Pour ce faire: cliquez avec le bouton droit de la souris sur votre site web. Un menu apparaît: cliquez sur l'élément qui vous permet de visualiser la source ; dans Internet Explorer, l'élément de menu est "View Source"; dans Mozilla Firefox et Chrome, l'élément de menu est "View Page Source".

Trouvez la balise "body". Maintenant, collez le code que vous avez copié pour le bouton de réservation juste avant la balise "body".

Pour la position flexible du bouton

Ouvrez le fichier HTML de la page web sur laquelle vous souhaitez que le widget de réservation apparaisse.
Trouvez la balise "body". Collez maintenant le code que vous avez copié pour le bouton de réservation juste avant la balise "body".
Vous devez maintenant ajouter le deuxième extrait de code. Repérez l'endroit de votre code HTML où vous souhaitez que le bouton de réservation apparaisse.
Ajoutez une classe "timify-button" pour l'élément auquel l'extrait fait référence.
Ajoutez l'attribut "data-account-id =" et insérez votre identifiant unique de réservation TIMIFY dans le "". (Voir ci-dessus pour savoir comment accéder à votre numéro d'identification TIMIFY)

C'est tout! Cliquez sur "Rafraîchir" et le widget devrait apparaître sur votre site.

-----------------------------------------------------------------------------------------------------------------------------

Connectez-vous à votre compte TIMIFY et ouvrez votre site web. Vous devrez copier-coller quelques lignes de code dans le code HTML de votre site.

ÉTAPE 1:

Allez dans Paramètres -> Intégration -> et sélectionnez le widget de réservation dans l'onglet. Pour intégrer un iFrame, vous n'avez pas besoin d'un bouton de réservation pour déclencher l'ouverture de votre widget: il s'ouvrira automatiquement lorsqu'un visiteur ouvrira votre site web.

ÉTAPE 2:

Vérifiez les paramètres du widget de réservation. Vous pouvez sélectionner ici trois personnalisations optionnelles. Sélectionnez celles que vous souhaitez.

ÉTAPE 3:

Vous avez maintenant le choix : générer un script de bouton de réservation ou une url iFrame. Sélectionnez "Générer une url iframe". Un script sera automatiquement généré pour vous - copiez-le.

Votre script devrait se lire intégralement comme suit :

https://book.timify.com/services?accountId=5c98a186e604f7102e633108 "width =" 100% ">

ÉTAPE 4 :

Ouvrez le code HTML de la page sur laquelle vous souhaitez que le widget de réservation apparaisse, et allez à l'endroit où vous souhaitez intégrer le widget. Collez ici le bout de code que vous avez copié.

Ajustez l'URL dans l'attribut "src" : ajoutez votre ID de réservation TIMIFY unique dans le "". (Voir ci-dessus pour savoir comment accéder à votre identifiant de réservation TIMIFY).

Pour modifier la hauteur et la largeur du widget, changez les valeurs des paramètres ("height" ou "width") en utilisant le code de script généré automatiquement.

Voilà, c'est fait ! Cliquez sur "Rafraîchir" et le widget devrait apparaître sur votre site.

-----------------------------------------------------------------------------------------------------------------------------

Et si vous utilisez un CMS?

La plupart des boîtes à outils de création de sites web vous donnent la possibilité d'ajouter un élément HTML ou de personnaliser votre HTML. En outre, nous avons rédigé des guides pour un certain nombre de CMS, accessibles via Paramètres -> Intégration -> et l'onglet CMS.

Si votre fournisseur de site web ou de CMS ne vous permet pas d'accéder au script, nous vous recommandons de rechercher dans leurs articles d'aide le "HTML personnalisé" ou de contacter leur équipe d'assistance pour savoir comment intégrer le HTML personnalisé.

Vous voulez en savoir plus sur la façon d'activer votre compte pour la réservation en ligne? Lisez CECI.

Peut-être souhaitez-vous améliorer votre expérience de réservation d'un cran ou deux. Personnalisez votre widget de réservation TIMIFY: les paramètres avancés vous montrent comment modifier la couleur de votre widget, pré-remplir les détails du client et autres personnalisations rapides.