Plug-ins & extentions

Integraties in Webflow

CONTENT MANAGEMENT

Waarom uitbreiden?

Extra features toevoegen

Zonder ze zelf te moeten bouwen.

Afbeeldingsbron: https://webflow.com/updates/embeds-for-popular-videos-and-media-in-rich-text-elements

Connecties met externe tools

Afbeeldingsbron: https://webflow.com/apps/detail/integrately

Connecties met externe tools

Afbeeldingsbron: https://webflow.com/blog/google-forms

Minder handmatig werk in CMS

Embeds / Widgets

Wat is een Embed?

= externe inhoud die je injecteert in de pagina

Code block die een <iframe> rendert
Soort "venster" naar een externe tool/site
😢 Moeilijk / niet mogelijk om te stylen
Voorbeelden: Typeform, Google Maps, Calendly,...

Youtube embed

Je kan bijvoorbeeld een youtube video renderen door de <iframe> code te copy/pasten in een code Embed Block of in een rich text editor.

Veelvoorkomende embeds

Voor veelvoorkomende Embeds (zoals Youtube en Google Maps) bestaan er custom elements in Webflow.

Voordeel

vervelende styling issues zijn al opgelost
Werkt via interface ipv code

Oefening

Deel 1: Embed block toevoegen

Maak een nieuw project aan in Webflow en voeg een Google Maps kaart toe via een Embed Block.

Plugins / Apps

Wat is een plugin?

= extra functionaliteiten die je aan je tool kan toevoegen

Add-on of extensie (of Apps in Webflow)
Third party
Geen code voor nodig

🔗 https://webflow.com/apps

Oefening

Deel 2: Lottie animaties toevoegen

Voeg boven de kaart 2 div-elementen toe:
- Blok 1: "Temperatuur"
- Blok 2: "Wind"
Plaats in elke div-block een passende Lottie animatie

Data feeds / API's

Wat is een Datafeed?

= externe data die wordt opgehaald, getoond en/of geüpdatet in een tool

Gebruik voor: productlijsten, voetbalstatistieken, weer updates, events,...
API nodig

API

= Application Programming Interface
= Een manier om data en functies van een tool te gebruiken

Je stelt vragen aan de API = requests
De API stuurt antwoorden = responses
Vaak in JSON dataformaat

Menukaart met mogelijkheden = API

Jouw bestelling = Request

Het gerecht dat je krijgt = Response

Recap

JSON

= JavaScript Object Notation

Dataformaat dat gebruikt wordt om data via een API te versturen
Bestaat uit key/value pairs

{
  "name": "Pommelien Thijs",
  "age": 24,
  "isStudent": false,
  "discopgraphy": {
    "2023": "Per Ongeluk",
    "2025": "Gedoe"
  },
  "phoneNumbers": null
}

Recap

Oefening

Deel 3: Open Meteo API koppelen

Voeg een Embed block toe en plak de JavaScript code uit de Canvas briefing hierin.
Publiceer de site om het resultaat te bekijken.

Best practices

👀 Analyseer op voorhand

de mogelijkheden van de plugin/API
in hoeverre je styling kan customizen

⚡️ Beperk aantal externe integraties voor performance

✅ Check GDPR bij embeds/plugins

⛔️ Zorg voor fallback content

Wat als API niet werkt?
Wat als gebruiker geen consent geeft?

8. Plug-ins & extentions

By Lecturer GDM

8. Plug-ins & extentions

More from Lecturer GDM