Comment intégrer du contenu (iframe) dans une page Pep's Up?

Qu'est-ce qu'une iframe ?

Une iframe est comme une fenêtre dans une page web qui peut afficher une autre page ou du contenu comme des vidéos, tout en restant à l'intérieur de votre page principale.

Exemple avec un lien Google Sheet :

Rendez vous sur votre Google Sheet et ouvrez la page que vous souhaitez intégrer dans Pep's Up.

Dans notre exemple, nous avons choisis un document nommé :Exemple avec un Google Sheet. 

Vous avez alors deux possibilités :

1. Partager votre fichier en permettant la modification par n'importe qui.
2. Restreindre la modification aux contacts autorisés ou seulement par vous même.

Dans le 1er cas, une fois le document ouvert, cliquez sur le menu Fichier -> Partager -> Publier sur le web. 

Voir l'image ci-dessous :

Une popup va apparaître pour vous permettre de publier votre document. Dans cette popup, choisissez Intégrer et selon si vous souhaitez partager l'intégralité de votre document ou seulement une feuille, utilisez la liste déroulante pour effectuer votre choix.

Enfin cliquez sur le bouton vert Publier.

Google vous demandera alors de confirmer votre partage, indiquez Oui.

Le code à intégrer sur votre page Pep's Up est maintenant visible :

Copier le code et rendez vous dans la page de Pep's UP où vous souhaitez intégrer votre document.

Ouvrez votre page dans Pep's Up et cliquez sur l'icône Source dans la barre d'outil de l'éditeur de texte. Enfin collez le code copié précédemment dans la zone de texte à l'endroit ou vous voulez voir afficher l'iframe.

Pour choisir la taille et améliorer l'affichage vous pouvez rajouter : width="100%" height="600px",  juste avant ></iframe>.

Voici un exemple de code avec la taille configurée :

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ... width="100%" height="600px>

width : permet d'indiquer la largeur du contenu. Dans ce cas, nous avons indiqué qu'il doit prendre toute la largeur.

height: permet de configurer la hauteur du contenu. Dans ce cas, nous avons indiqué 600px, il est conseillé de ne pas dépasser les 900px.

Dans le 2ème cas, celui où vous souhaitez que votre document Google Sheet ne soit pas éditable/modifiable par d'autres personnes, vous devrez suivre les étapes suivantes avant de suivre la procédure indiquée ci-dessus :

1. Dans le menu Données cliquez sur 🔒Protéger des feuilles et des plages.
2. Cliquez sur  +Ajouter une feuille ou une plage, une popup s'ouvrira en vous proposant deux options. Dans la deuxième option : Restreindre les utilisateurs autorisés à modifier cette plage, vous permet de décider qui peut ou non modifier votre document.
3. Vous pouvez maintenant reprendre la première procédure à partir de l'étape "Publier sur le web".

PS: Si par la suite vous modifiez votre document Google Sheet et que vous avez déjà intégré le code dans une page Pep's Up, vous n'avez aucune action à réaliser, les modifications se font automatiquement. Ainsi, procédez à vos modifications directement dans votre document Google Sheet uniquement.

Voici le lien pour voir notre résultat final : https://plateforme-de-prise-en-main.pepsup.com/integration-de-google-sheet-page-887161