Assistance
Documentation

Mettre SuperSaaS dans un cadre (iframe)

Si vous souhaitez avoir plus de contrôle sur l’apparence de la page que ne le permettent les options de personnalisation, vous pouvez placer votre agenda dans un cadre situé sur votre site. Vous pouvez par exemple juxtaposer à votre agenda une barre de menu contenant des boutons qui renvoient à d’autres parties de votre site. La page des “Paramètres du compte” contient une option qui permet de désactiver l’en-tête et le pied de page de manière que vous puissiez les personnaliser. La ligne de code suivante vous permet d’afficher un agenda à l’intérieur d’un cadre situé sur votre site :

N’utilisez un cadre que si vous avez spécifiquement besoin d’intégrer une page SuperSaaS entière dans votre propre mise en page. Si un lien ou un widget peut répondre à vos besoins, ces options sont généralement plus simples et plus fiables.
Choisissez votre agenda :
<iframe src="https://www.supersaas.com/schedule/demo/Therapist" width="100%" height="800"> </iframe>
Ce tutoriel peut vous montrer les expressions de code correspondant à votre compte si vous vous êtes connecté
intégration dans une iframe
Les versions récentes de Safari bloquent tous les cookies à l’intérieur d’une iframe. Cela signifie que les utilisateurs de Mac et d’iPhone verront une fenêtre pop-up leur demandant d’autoriser les cookies. Ils devront ensuite cliquer sur un lien indiquant “Cliquez ici pour essayer de définir un cookie”. Par conséquent, l’intégration dans un cadre ne leur offre pas une très bonne expérience utilisateur.
Un cadre est le plus adapté lorsque l’agenda est principalement utilisé pour de la consultation ou pour des processus internes strictement contrôlés. Pour les pages de réservation publiques, testez soigneusement sur Safari et iPhone avant de vous engager dans cette approche.
Lorsque vous transférez votre agenda dans une iframe, vous pouvez utiliser les paramètres d’URL pour prédéfinir une date ou une mise en page. Complétez simplement le lien de votre agenda avec les paramètres appropriés.

Vous pouvez modifier les valeurs relatives à sa largeur et à sa hauteur pour ajuster l’iframe à votre site. Si vous souhaitez afficher une version plus compacte de votre agenda de façon à ce qu’il tienne mieux dans un cadre, vous pouvez utiliser la version mobile du site à la place. Pour accéder à la version mobile du site, il suffit de remplacer le nom de domaine figurant comme adresse web de votre agenda par m.supersaas.fr :

<iframe width="300" src="https://www.supersaas.com/schedule/demo/Therapist">
</iframe>
intégration dans une iframe, avec la version mobile de l’agenda

Si vous utilisez une iframe et que vous avez configuré votre agenda pour rediriger vos visiteurs vers votre site après qu’ils ont effectué une réservation, vous devrez peut-être prévoir un moyen de “sortir” de l’iframe. Comme la page de renvoi s’affichera sur votre site à l’intérieur du cadre, à moins que vous ne l’ayez justement configurée pour qu’elle y tienne, elle ne s’affichera pas correctement. Une des manières qui permettent de sortir d’une iframe consiste à ajouter un peu de JavaScript dans l’élément <body> de la page sur laquelle vos utilisateurs vont se retrouver, comme dans l’exemple suivant :

<script>
  if (window != top) top.location.href = location.href
</script>
Pour que l’iframe s’affiche correctement à travers une connexion sécurisée (https) vous aurez besoin d’activer les paramètres “SSL/TLS” depuis votre compte SuperSaaS. Vous pouvez activer le SSL depuis la page Contrôle d’accès.