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

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?