Voeg live Google-recensies of YouTube-video's toe aan Framer

Voeg een Framer Embed-component toe, plak de TileSet-snippet in de HTML-sectie, publiceer, en je site toont live Google-recensies of YouTube-video's.

Voeg het toe aan een pagina

1. Bouw in TileSet je widget en kopieer het snippet: een scripttag en een div.
2. Open in Framer het menu Insert, zoek naar Embed en sleep de Embed-component naar de plek waar de feed moet komen.
3. Plak in de HTML-sectie van de component beide regels van de snippet.
4. Geef de component de gewenste breedte en voldoende hoogte voor de feed op het canvas.
5. Publiceer de site en open de gepubliceerde pagina. Framer voert scripts alleen uit in de browser, niet in de editor, dus de feed wordt getoond op de gepubliceerde site.

Plak beide regels in dezelfde box

Houd de scripttag en de div samen in dezelfde Embed-component. Zo beschrijft de hulp van Framer het toevoegen van een script aan een pagina. Meerdere feeds op één pagina werken op dezelfde manier: één Embed-component per widget, elk met de volledige snippet.

Waar Custom Code voor dient

De Custom Code-instellingen van Framer voegen een script toe aan de head of body van de hele site, of van gekozen pagina's. Dat is de plek voor scripts die geen plek op de pagina nodig hebben. Het kan geen div plaatsen waar je de feed wilt hebben, dus TileSet gebruikt de Embed-component.

Styling om het passend te maken

In TileSet kun je kolommen, de afstand tussen tegels, hoekradius en licht of donker instellen, zodat de feed in je ontwerp past zonder extra CSS. Stel de widget zo in dat deze overeenkomt met de achtergrond van je pagina.

Controleer of het werkt

1. Publiceer de site en open de live pagina eenmaal in je browser, zodat de widget wordt geladen.
2. Plak op het “Install”-tabblad van de widget het adres van de pagina in “Check my page” (Mijn pagina controleren) en druk op “Check” (Controleren).

Als het vak op de gepubliceerde pagina leeg blijft, controleer dan of je beide regels hebt geplakt en of de component hoog genoeg is. Meer informatie in Installeer de snippet.