Embed een codefragment of een externe URL om inhoud van andere platforms weer te geven. Voeg een aangepast onderdeel toe zoals een afteltimer of een weersvoorspelling, of toon inhoud van een andere website, zodat alles wat bezoekers nodig hebben op één plek is.
Code of een website embedden
Voeg rechtstreeks vanuit het Elementen toevoegen-paneel een iFrame toe aan de website. Kies of je code of een website wilt embedden en plak dan de code of het webadres zodat het in het iFrame verschijnt.
Om een embed toe te voegen:
Ga naar je editor.
Wijs linksboven het Elementen toevoegen-pictogram
aan.
Selecteer Elementen.
Klik op het Embedden-pictogram
.
Sleep het Code embedden of Een website embedden-element naar de pagina.
Klik in de actiebalk op het Instellingen-pictogram
.
Volg de relevante stappen hieronder:
Stel de code in die je wilt embedden met behulp van de beschikbare instellingen:
HTML-embed-code invoeren: Plak je HTML-code in het tekstvak.
Toegankelijke naam: Voeg een korte en unieke beschrijving toe voor de code die je embedt, zodat deze toegankelijk is voor bezoekers die ondersteunende technologie gebruiken. Het is niet zichtbaar op de website.
Cookies en vergelijkbare technologieën die door je code worden ingesteld: Selecteer de juiste categorie voor de code die je embed (bijvoorbeeld: Essentials, Analytics).
Let op: We kunnen geen ondersteuning bieden voor externe code die niet is gemaakt of getest met Wix. Ondervind je een probleem met je codefragment? Neem dan rechtstreeks contact op met de provider.
Stel de link die je wilt embedden in met behulp van de beschikbare instellingen:
Link: Voer de URL in die je op de website wilt weergeven. Zorg ervoor dat het adres begint met HTTPS (HTTP-websites worden niet weergegeven).
Toegankelijke naam: Voeg een korte en unieke beschrijving toe voor de link die je embedt, zodat deze toegankelijk is voor bezoekers met behulp van ondersteunende technologie. Het is niet zichtbaar op de website.
Cookies en vergelijkbare technologieën die door je code worden ingesteld: Selecteer de juiste categorie voor de link die je embedded (bijvoorbeeld: Essentials, Analytics).
Let op: Sommige websites hebben een beveiligingsbeleid dat verbiedt om te worden ingesloten op externe platforms. Deze websites verschijnen mogelijk niet in de editor of op de live website.
De grootte van de weergegeven inhoud aanpassen
Ingesloten elementen bevatten vaak vooraf gedefinieerde breedte en hoogte in pixels, ingesteld door de dienst waarvan ze zijn verkregen, zoals in het onderstaande voorbeeld:
<iframe width="560" height="315"
src="https://www.wix.com"
frameborder="0">
</iframe>
Deze instellingen kunnen de inhoud mogelijk bijsnijden als de iFrame-container (op het canvas) kleiner is dan 156 px * 315 px. Om ervoor te zorgen dat de inhoud niet wordt bijgesneden, vervang je de px-waarden door percentage-eenheden en stel je ze in op 100% zoals hieronder:
<iframe width="100%" height="100%"
src="https://www.wix.com"
frameborder="0">
</iframe>
Richtlijnen
Voordat je je code of link in het iFrame embedden, raden we aan de volgende richtlijnen te lezen.
Code
Zorg er altijd voor dat de code die je embed up-to-date en HTML5-compatibel is. De meeste browsers geven pagina's en scripts niet correct weer als ze zijn geschreven met oudere versies van HTML.
HTML-code bevat de kernelementen van een pagina, maar de ontwerpinstellingen en andere complexe functionaliteiten worden meestal apart opgeslagen. Daarom werken sommige elementen mogelijk niet of zien ze er anders uit als de relevante elementen niet als referentie in de HTML-code zijn opgenomen, bijvoorbeeld de CSS- en JS-bestanden.
Link
Als je niet zeker weet hoe je het target-attribuut moet gebruiken, lees er dan hier over of neem contact op met de maker van de code.
Zorg ervoor dat de link https bevat, niet http, anders wordt deze niet weergegeven op de live website.
Problemen met het embedden oplossen
Ondervind je problemen bij het embedden van je code of link? Klik hieronder op een probleem om meer te lezen en stappen te volgen.
De inhoud in mijn embed ziet er bijgesneden uit
Dit kan gebeuren wanneer je iFrame te klein is voor de inhoud.
Als er in de widgetcode een andere hoogte en breedte is gedefinieerd, heeft dit invloed op de manier waarop je inhoud eruitziet in het iFrame.
Als het iFrame te klein is, wordt er automatisch een scrollbalk toegevoegd zodat bezoekers de rest van de widget kunnen zien. Scrollbalken hebben de neiging om andere elementen te overlappen, dus zorg ervoor dat je iFrame groot genoeg is om alle inhoud zonder scrollbalken weer te geven.
Om dit probleem op te lossen, pas je de grootte van het iFrame aan door de grepen rond het element te verslepen.
Elementen zien er niet uit of functioneren niet zoals ze zouden moeten
HTML-code bevat de kernelementen van een pagina, maar de ontwerpinstellingen en andere complexe functionaliteiten worden meestal apart opgeslagen.
Daarom werken sommige elementen mogelijk niet of zien ze er anders uit als de relevante elementen niet als referentie in de HTML-code zijn opgenomen, bijvoorbeeld de CSS- en JS-bestanden.
De links in mijn iFrame werken niet
In de meeste gevallen werken links niet als ze zijn ingesteld om in een nieuw tabblad of venster te openen. Controleer de code die je hebt ingevoerd om te zien of dat het probleem is.
Neem bij twijfel contact op met de externe provider die de code heeft geschreven.
De inhoud in mijn iFrame reageert niet op verschillende schermformaten
Het iFrame zelf reageert niet. Hierdoor kan de widget niet reageren op verschillende schermformaten, zelfs als dit in de code is gedefinieerd.
Mijn iFrame geeft de website niet weer
Sommige websites hebben een beveiligingsbeleid dat verbiedt dat ze worden ingesloten op externe platforms zoals Wix. Deze websites verschijnen mogelijk niet in de editor en/of de live website nadat je de link in het HTML-element hebt geplakt.