Documentation
  1. Accueil >
  2. Assistance >
  3. Intégration >
  4. Ajoutez une fenêtre SuperSaaS à votre page Facebook
Imprimer la page

Intégrer un agenda SuperSaaS à votre page Facebook

Ce tutoriel vous explique comment intégrer un agenda SuperSaaS à votre page Facebook, permettant ainsi à vos clients de faire leurs réservations sans quitter Facebook. Comme la méthode exposée ne requiert pas de se connecter à son compte Facebook, un message demandera aux utilisateurs de s'enregistrer pendant le processus si vous le souhaitez.

Quels sont les prérequis pour procéder à l'intégration ?

  • Une page Facebook d'entreprise
  • Un compte SuperSaaS avec au moins un agenda

Comment ajouter un agenda SuperSaaS dans une iframe sur votre page Facebook

  1. Connectez-vous à votre compte Facebook d'entreprise

  2. Ouvrez une nouvelle fenêtre dans votre navigateur et rendez-vous sur : apps.facebook.com/static_html_plus/

  3. Sélectionnez Add Static HTML to a Page

    Ajouter de l'HTML statique

  4. Si vous avez plusieurs pages Facebook d'entreprise, choisissez d'abord la page sur laquelle vous voulez intégrer l'agenda et cliquez ensuite sur Add Static HTML: iframe tabs to:

    Choisissez une page

  5. L'onglet HTML statique s'affichera désormais sur votre page Facebook d'entreprise.

  6. Pour modifier l'onglet HTML, cliquez sur l'onglet "Settings" et choisissez apps dans la colonne de gauche.

    Modifier les paramètres

  7. Choisissez l'onglet iframe que vous souhaitez éditer et cliquez sur Edit Settings.

    Modifier les paramètres

  1. Vous pouvez maintenant remplacer le texte par défaut Welcome par un texte de votre choix, par exemple par Effectuer une réservation. Cliquez sur Save et cliquez ensuite sur OK

Modifier le texte

  1. Répétez la 7ème étape à nouveau pour changer l'image par défaut. Cliquez cette fois-ci sur "Change", à côté de Custom Tab Image: Vous serez transféré sur une nouvelle page sur laquelle vous pourrez envoyez une image. Déplacez le curseur au-dessus de l'image en forme d'étoile et cliquez "Edit".

Cliquez sur Changer Cliquez sur Modifier

  1. Une fenêtre où vous pourrez choisir une image sur votre ordinateur s'ouvrira, elle devra avoir les dimensions suivantes : 111 × 74 pixels.

    Vous pouvez télécharger et utiliser un des exemples ci-dessous (cliquez sur le bouton droit de la souris et choisissez "Enregistrer l'image sous…") et créez votre propre bouton.

Choisissez une image Bouton 1 Bouton 2 Bouton 3

  1. Un aperçu de l'image sans aucune option pour la sauvegarder s'affichera. Cependant, si vous naviguez pour revenir à votre page Facebook en utilisant la fonction de recherche, vous verrez que l'image figure sur votre page.

Affichez l'aperçu et naviguez pour revenir sur votre page

  1. Maintenant que toutes les questions de style ont été traitées, vous pouvez intégrer l'iframe à votre page. Cliquez sur le bouton Effectuer une réservation! que vous venez de créer (HTML static tab) et cliquez sur l'onglet Edit tab. Vous pouvez aussi trouver le bouton parmi vos applis sur le côté gauche de votre page.

    Cliquez sur le nouveau bouton effectuer la réservation

  2. Rendez-vous à la section Free apps et choisissez l'appli Website pour simplifier l'intégration (vous pouvez aussi choisir l'appli HTML à la place).

    Choisir Site web Copiez et collez l'URL de l'agenda

  3. Collez l'URL de l'agenda dans le champ URL of external page; effacez les barres de défilement afin d'ajuster la taille de l'agenda à la page et cliquez sur Save & publish Cliquez sur l'Preview tab pour afficher un aperçu de votre site web.

    Aperçu Aperçu
Pour qu'une iframe s'affiche correctement sur une page Facebook, vous devrez activer le "SSL" dans votre compte SuperSaaS. Vous pouvez activer le SSL à partir de votre compte SuperSaaS sur la page Gestion des accès (Cela signifie que le lien de votre agenda changera pour commencer par https au lieu d' http)
Si vous ne souhaitez pas afficher votre agenda dans une iframe, où il est limité aux 800 pixels de largeur des pages Facebook, vous pouvez utiliser un bouton ou un lien à la place, de manière à ce que l'agenda s'affiche dans sa propre fenêtre. (Dans ce cas, le SSL n'est pas nécessaire.)

Utiliser une leadgate pour stimuler vos visiteurs à "liker" votre page Facebook

Une fois que vous avez intégré votre agenda à votre page Facebook, l'appli HTML statique vous permet de créer une leadgate. Si vous activez une leadgate, une fenêtre qui collectera les informations de vos visiteurs s'ouvrira avant même qu'ils ne puissent voir le cadre contenant votre agenda.

  1. Lorsque vous consultez l'appli HTML statique en mode administrateur, cliquez sur l'onglet Edit. Cliquez ensuite sur Leadgate

    Allez sur une fangate

  2. Sélectionnez Enable leadgate, entrez un message destiné à vos visiteurs et cliquez sur Save & publish

    Entrer un message pour les visiteurs Aperçu