Comment ajouter un widget vidéo à Framer

Comment installer CompleteGreet sur Framer ?

Pour installer CompleteGreet, copiez le script de son widget dans le code personnalisé du projet Framer, puis publiez le site. Le script charge le widget flottant sur vos pages.

1. Dans CompleteGreet, ouvrez la configuration du widget et copiez le script d’installation. Utilisez le script du widget que vous avez configuré, et non le code d’intégration d’une vidéo placée dans une page.

2. Dans Framer, ouvrez le projet et choisissez Project Settings, puis Custom Code dans la barre latérale gauche. Cliquez sur Add Script, ou sur l’icône + si vous avez déjà ajouté du code. Donnez à cette entrée un nom que vous reconnaîtrez plus tard.

3. Choisissez start of head comme emplacement et sélectionnez All pages. Collez le script complet dans le champ de code, sans le modifier.

4. Enregistrez l’entrée, revenez à l’éditeur du site et cliquez sur Publish. Les modifications de Project Settings n’apparaissent sur le site en ligne qu’une fois la nouvelle publication terminée. Vérifiez l’URL publiée.

L’écran Custom Code se trouve dans Project Settings, en dehors de l’éditeur visuel.

Pour la première vérification, utilisez l’URL publique. L’aperçu de l’éditeur diffère du site publié. Une fenêtre de navigation privée permet d’écarter une ancienne copie de la page ou une session de connexion existante.

Après avoir publié un site de portfolio, par exemple, ouvrez sa page d’accueil et attendez quelques secondes que le widget flottant apparaisse. Collez ensuite l’URL d’une deuxième page dans le navigateur pour vérifier que All pages s’y applique aussi.

Vérifiez cette même URL sur ordinateur et à une largeur de téléphone étroite, autour de 390 pixels. Si le widget apparaît sur ordinateur mais pas sur téléphone, vérifiez qu’une barre de navigation fixe ou un bandeau de cookies ne le masque pas avant de modifier le script d’installation.

Si le widget n’apparaît sur aucune page, revenez à Custom Code. Vérifiez que l’entrée est enregistrée, activée et toujours réglée sur start of head. Corrigez-la, publiez à nouveau et rechargez la page en ligne.

Que pouvez-vous personnaliser sur Framer ?

Sur un site Framer, le ciblage, les actions du widget, la saisie dans les formulaires et l’identité visuelle se règlent dans le service du widget, plutôt que dans l’éditeur de pages de Framer. Framer gère la mise en page autour du widget.

Configurez le widget pour qu’il apparaisse sur certaines URL, puis vérifiez la page en ligne à l’adresse exacte que vous avez ciblée. Une barre oblique finale peut fausser un test rapide. Utilisez donc l’URL publiée plutôt que de vous fier uniquement à l’aperçu de l’éditeur.

Choisissez l’action adaptée à la page : lien, prise de rendez-vous, chat, appel, lien vers une fiche produit ou formulaire. Le libellé du bouton principal doit être clair, pour que les visiteurs sachent ce qui se passera avant d’appuyer dessus.

Un formulaire permet aux visiteurs d’envoyer leurs coordonnées ou d’autres informations sans quitter la page. Testez ses champs obligatoires et la destination des envois sur le site publié, pas seulement dans l’écran de configuration.

La personnalisation visuelle a une limite pratique : les styles de la page Framer ne s’appliquent pas automatiquement à un widget intégré. Le forfait BUILD de CompleteGreet permet de retirer le badge Built With. Vérifiez le rendu final dans l’aperçu du widget avant de publier.

Que vérifier avant la mise en ligne ?

Testez la page publiée sur ordinateur et sur téléphone. Vérifiez que la bulle vidéo ne recouvre ni la navigation, ni les bandeaux de cookies, ni les boutons fixes. Un aperçu ne suffit pas.

Sur ordinateur, ouvrez la bulle et essayez toutes les commandes. Fermez-la et assurez-vous que la page défile toujours normalement. Sur téléphone, appuyez sur la commande de fermeture et sur chaque bouton dans la vidéo. De petites zones faciles à cliquer avec une souris peuvent être difficiles à toucher avec le pouce.

Vérifiez aussi la mise en page au seuil d’affichage mobile le plus étroit. Framer peut y rapprocher les éléments.

Le ciblage des pages demande un test distinct. Ouvrez l’URL exacte où la bulle doit apparaître, puis vérifiez la page d’accueil et une page voisine où elle doit rester masquée.

CompleteGreet permet d’afficher les bulles sur des URL précises. Testez les deux cas pour chaque règle : une bulle masquée ne prouve pas à elle seule que la configuration est correcte. Vérifiez que la règle correspond au chemin de la page publiée, surtout pour une page imbriquée, comme une fiche produit située sous le chemin d’une catégorie. Gardez une courte liste d’URL de test pendant que vous ajustez la règle, afin de vérifier chaque modification sur les mêmes pages.

Questions fréquentes

Quel élément Framer accepte le script d’un widget vidéo ?

Pour un widget flottant CompleteGreet, collez le script d’installation dans Project Settings, puis Custom Code, comme indiqué plus haut. Le composant Embed de Framer sert au contenu placé dans la page, notamment aux intégrations iframe et aux scripts qui les créent. Après l’ajout du script, vérifiez sur le site publié que le widget se charge à l’endroit prévu.

Que vérifier lorsqu’un composant Embed de Framer reste vide ?

Pour une intégration iframe, vérifiez que l’URL ou le script est saisi dans le composant Embed et que la source autorise l’intégration. Certains sites la bloquent au moyen d’en-têtes HTTP. Pour le widget flottant CompleteGreet, vérifiez le script dans Project Settings, puis Custom Code, et assurez-vous que le ciblage des URL inclut l’adresse de la page publiée. Testez la page publiée en ligne avant de conclure que l’installation a échoué.

Le composant Video de Framer fonctionne-t-il comme une bulle vidéo flottante ?

Non. Le composant Video de Framer affiche une vidéo dans la mise en page, tandis qu’un accueil flottant CompleteGreet utilise un script de widget intégré. Utilisez le composant Video de Framer pour des vidéos téléversées ou hébergées, avec des options comme la lecture automatique et une image d’aperçu. Pour l’accueil flottant CompleteGreet, utilisez Project Settings, puis Custom Code.

Les champs du CMS Framer peuvent-ils définir la vidéo affichée sur chaque page de détail ?

Oui. Ajoutez un champ texte simple Video URL pour une vidéo externe, ou un champ File pour un fichier téléversé dans un format comme MP4, puis reliez ce champ au composant Video de Framer à l’aide d’une variable. La vidéo peut ainsi changer selon l’élément du CMS. Un accueil CompleteGreet est une intégration de widget distincte, et non un champ vidéo du CMS placé dans la page.