Ajoutez des avis Google en direct ou des vidéos YouTube à Framer
Ajoutez un composant Framer Embed, collez l'extrait TileSet dans sa section HTML, publiez, et votre site affichera des avis Google en direct ou des vidéos YouTube.
Ajoutez-le à une page
- Dans TileSet, créez votre widget et copiez le snippet : une balise de script et un
div. - Dans Framer, ouvrez le menu Insérer, recherchez Embed et faites glisser le composant Embed là où le flux doit aller.
- Dans la section HTML du composant, collez les deux lignes de l'extrait.
- Donnez au composant la largeur souhaitée et une hauteur suffisante pour le flux sur le canevas.
- Publiez le site et ouvrez la page publiée. Framer exécute des scripts uniquement dans le navigateur, pas dans l'éditeur, le flux s'affiche donc sur le site publié.
Collez les deux lignes dans la même boîte
Conservez la balise de script et le div ensemble dans le même composant Embed. C'est ainsi que l'aide de Framer décrit l'ajout d'un script à une page. Plusieurs flux sur une même page fonctionnent de la même manière : un composant Embed par widget, chacun avec l'extrait complet.
À quoi sert le code personnalisé
Les paramètres Code personnalisé de Framer ajoutent un script dans l'en-tête ou le corps de l'ensemble du site, ou de pages choisies. C'est l'endroit pour les scripts qui n'ont pas besoin d'un emplacement sur la page. Il ne peut pas placer un div là où vous voulez le flux, donc TileSet utilise le composant Embed.
Le styliser pour qu'il corresponde
Dans TileSet, vous pouvez définir les colonnes, l'écart entre les tuiles, le rayon des coins et le mode clair ou sombre, afin que le flux s'intègre à votre design sans CSS supplémentaire. Réglez le widget pour qu'il corresponde à l'arrière-plan de votre page.
Vérifiez que ça fonctionne
- Publiez le site et ouvrez la page en direct une fois dans votre navigateur, afin que le widget se charge.
- Dans l'onglet « Install » (Installer) du widget, collez l'adresse de la page dans « Check my page » (Vérifier ma page) et appuyez sur « Check » (Vérifier).
Si la boîte reste vide sur la page publiée, vérifiez que vous avez collé les deux lignes et que le composant est suffisamment grand. Plus d'informations dans Installer l'extrait.