HTML Embed: Spotify in je LeadBot

Stap 1: kopieer de insluitcode van Spotify

Om de embedcode van Spotify te krijgen, gebruik je de Spotify desktop-app of de web-app op spotify.com. De mobiele app biedt geen embedoptie, dus daarmee lukt dit niet.

1. 1 Ga naar de gewenste aflevering of playlist die je wilt delen.
2. 2 Klik op de knop Delen. Kies vervolgens de optie Aflevering embedden (bij een playlist heet deze optie Playlist embedden).
3. 3 Stel in het voorbeeldvenster de kleur van de speler in. De grootte die je hier kiest hoef je niet nauwkeurig te bepalen: de LeadBot bepaalt de afmetingen zelf (zie de tips onderaan).
4. 4 Klik op Kopiëren om de HTML-code naar je klembord te kopiëren.

Stap 2: plak de code in de flow-builder

Vervolgens voeg je de gekopieerde code toe aan het HTML Embed-component in je LeadBot, dat je terugvindt in de flow-builder onder Bouwstenen > Componenten.

1. 1 Ga in het dashboard via de zijbalk naar LeadBots en open de gewenste LeadBot.
2. 2 Open het tabblad Bewerken om de flow-builder te starten. Werk je voor meerdere organisaties, controleer dan eerst of je in de juiste organisatie zit.
3. 3 Sleep het component HTML Embed (onder Componenten) op de gewenste plek in je flow.
4. 4 Plak de gekopieerde Spotify-code in het veld HTML inhoud van het HTML Embed-component.
5. 5 Sla de stap op. Krijg je de melding "Je HTML bevat elementen die niet zijn toegestaan.", controleer dan of je alleen het <iframe>-gedeelte hebt geplakt en geen <script>-regel.
6. 6 Controleer het resultaat via het tabblad Voorbeeld: de Spotify-speler moet direct zichtbaar zijn en afspeelbaar.
7. 7 Klik op Publiceren om de wijziging live te zetten. Tot je publiceert, staat de aanpassing alleen in de conceptversie en zien bezoekers de speler nog niet.

Tips en aandachtspunten

Een paar zaken om rekening mee te houden bij het embedden van Spotify-content.

• Alleen desktop of web — De embedoptie zit niet in de mobiele Spotify-app. Gebruik de desktop-app of open open.spotify.com in een browser om de insluitcode te kopiëren.
• Aflevering versus playlist — Zowel podcastafleveringen als playlists kun je embedden; de knop heet dan respectievelijk Aflevering embedden of Playlist embedden.
• De grootte uit Spotify wordt genegeerd — De widget rekt elk iframe naar de volledige breedte van het embedblok (maximaal 320 pixels breed, op mobiel de volledige breedte) en houdt minimaal 300 pixels hoogte aan. De compacte Spotify-speler met height="152" wordt dus alsnog 300 pixels hoog.
• Achteraf aanpassen kan wel — De geplakte code blijft bewerkbaar in het veld HTML inhoud van het blok. Je kunt daar bijvoorbeeld width, height of border-radius aanpassen. Positioneringsstijlen zoals position, top en left worden bij het opslaan uit de code gehaald.
• Altijd eerst publiceren — Een geplakte code is direct zichtbaar in het tabblad Voorbeeld, maar pas na Publiceren zien je bezoekers de Spotify-speler in de live LeadBot.