Content toevoegen met het HTML Embed-blok

Wat is een HTML Embed?

Een HTML Embed is een stukje code (embedcode of iframe-code) waarmee je inhoud van een ander platform in je LeadBot invoegt. Veel platformen leveren zo'n code via een knop als Delen of Insluiten. Je plakt de code in het veld HTML inhoud van het HTML Embed-blok in de flow-builder, en de content verschijnt vervolgens op die plek in je LeadBot. Zo bied je laagdrempelig content aan die aansluit bij de behoefte van je bezoeker, of dat nu een uitlegvideo, afspraakplanner of inspirerende podcast is.

Welke embedcodes werken?

Het HTML Embed-blok accepteert niet elke code. Toegestaan zijn de tags iframe, video, audio, source, div, p en br, plus eenvoudige tekstopmaak (strong, b, em, i, u, a, ul, ol en li). Alles daarbuiten wordt niet stilzwijgend weggehaald: het opslaan mislukt met de melding "Je HTML bevat elementen die niet zijn toegestaan.", inclusief een lijstje van de elementen die het probleem veroorzaken. In de praktijk betekent dat: embedcodes die op een iframe zijn gebaseerd werken, embedcodes die een <script>-tag nodig hebben niet.

• Werkt — codes met een <iframe>, <video> of <audio>-tag, zoals YouTube, Vimeo, Spotify, Calendly en de inline boekingspagina van Google Agenda.
• Werkt niet — codes met <script>, <object>, <embed>, <link>, <img>, <span> of <button>. Denk aan de insluitcodes van X/Twitter, Instagram, TikTok en LinkedIn. Levert een platform alleen zo'n code, dan kun je die content niet in je LeadBot tonen.
• Alleen het iframe plakken — zit er een <script>-regel of een <div style="..."> om het iframe heen (Vimeo doet dat bijvoorbeeld), haal die dan weg en plak alleen het <iframe ...></iframe>-gedeelte. Een <div> mag namelijk alleen class en id hebben, geen style.
• Alleen https — de src van een iframe moet met https:// beginnen. Een http-adres wordt wel opgeslagen, maar de widget laat het iframe dan leeg.
• Afmetingen bepaalt de LeadBot — elk iframe wordt op de volledige breedte van het embedblok getoond (maximaal 320 pixels, op mobiel de volledige breedte) met een hoogte van minimaal 300 pixels. Positioneringsstijlen zoals position, top en left worden bij het opslaan uit de code gehaald.

Zo voeg je een HTML Embed toe

Je voegt het blok toe in de visuele flow-builder van je LeadBot. Werk je voor meerdere organisaties, controleer dan eerst of je in de juiste organisatie zit voordat je wijzigingen doorvoert.

1. 1 Kopieer de embedcode bij het platform dat je wilt tonen (meestal via een knop als Delen of Insluiten) en houd alleen het iframe-gedeelte over.
2. 2 Ga in het dashboard via de zijbalk naar LeadBots en open de LeadBot die je wilt aanpassen.
3. 3 Open het tabblad Bewerken om de flow-builder te starten.
4. 4 Sleep vanuit Componenten het blok HTML Embed op de gewenste plek in je flow.
5. 5 Plak de code in het veld HTML inhoud en sla op.
6. 6 Controleer het resultaat via het tabblad Voorbeeld: de content moet direct zichtbaar en werkend zijn.
7. 7 Tevreden? Klik op Publiceren om de wijziging live te zetten. Tot die tijd staat de aanpassing alleen in de conceptversie en zien je bezoekers de content nog niet.

Tip: toon de embed pas na een klik

Wil je een video, planner of speler niet meteen tonen zodra de LeadBot opent? Plaats het HTML Embed-blok dan achter een Knop-component, zodat de content pas verschijnt als een bezoeker daar bewust voor kiest. Zo houd je de eerste stap van je LeadBot overzichtelijk en laat je de embed alleen zien aan bezoekers die er ook echt interesse in hebben.

Populaire platformen

Deze platformen worden veel gebruikt in combinatie met het HTML Embed-blok. Voor elk van deze platformen is er een apart artikel met de exacte stappen en embedcode.

Bekijk per platform het uitgebreide artikel: Calendly , Google Agenda , YouTube , Vimeo en Spotify .

• Calendly — laat bezoekers direct een afspraak inplannen. Zie 'Calendly in je LeadBot met HTML Embed'.
• Google Agenda — toon een afsprakenpagina of agenda. Zie 'Google Agenda in je LeadBot met HTML Embed'.
• YouTube — speel een uitleg- of productvideo af in de widget. Zie 'HTML Embed: een YouTube-video in je LeadBot'.
• Vimeo — alternatief voor video's zonder YouTube-omgeving. Zie 'HTML Embed: een Vimeo-video in je LeadBot tonen'.
• Spotify — laat een podcast of afspeellijst direct beluisteren. Zie 'HTML Embed: Spotify in je LeadBot'.

Werkt de embed niet zoals verwacht?

Bij het opslaan kun je twee foutmeldingen krijgen. "Je HTML bevat elementen die niet zijn toegestaan." betekent dat er tags of attributen in de code zitten die het blok niet accepteert; onder de melding staat om welke het gaat. Haal die eruit — meestal is dat een <script>-regel of een wrapper-div met een style-attribuut — en houd het kale iframe over. "Je HTML is ongeldig. Controleer de syntax." betekent dat er een fout in de code zelf zit, bijvoorbeeld een ontbrekend aanhalingsteken (height=400pt") of hetzelfde attribuut twee keer. Corrigeer de code of kopieer hem opnieuw. Slaat de stap wel op, maar blijft het vlak leeg? Controleer dan of de src van het iframe met https:// begint; een http-adres wordt door de widget genegeerd. Sommige platformen (zoals Spotify) bieden de insluitoptie alleen aan via de desktop- of webversie, en niet via de mobiele app. Zie je in het tabblad Voorbeeld nog niets, controleer dan of je het blok in de juiste flowstap hebt geplaatst en of je de wijziging hebt opgeslagen. En vergeet niet: zolang je niet op Publiceren klikt, blijft de aanpassing alleen zichtbaar in de conceptversie.

Nog vragen?

Heb je na het lezen van dit artikel nog vragen over het gebruik van het HTML Embed-blok? Mail je vraag naar partners@leadbot.nl, dan helpen we je graag verder.