Virtuele rondleiding integreren op je website: complete gids 2026

Als je al een tour hebt aangemaakt in Tours en die op je website wilt plaatsen, hoef je geen code vanaf nul te schrijven. Na het publiceren ga je naar Mijn Tours, kies je de gewenste tour, open je het driepuntenmenu en klik je op Integratie. Daar kies je de variant die bij jouw website past — HTML, React, Angular, WordPress of Wix — en kopieer je de gegenereerde code.

In hetzelfde venster kun je de integratie in- of uitschakelen en bepalen op welke domeinen de tour mag verschijnen. Je hebt dus volledige controle over waar de tour wordt weergegeven, zonder dat je de editor opnieuw hoeft te openen of de inhoud van de tour hoeft aan te passen.

Voor de bezoeker is het resultaat eenvoudig: de 360-graden rondleiding opent direct op jouw pagina. Je stuurt hem niet door naar een andere website, haalt hem niet weg van de presentatiepagina en dwingt hem niet om apart naar de galerij te zoeken. Bezoekers kunnen kamers, tafels, appartementen, showrooms of evenementenruimtes precies daar verkennen waar jij de beschrijving, het aanbod, het contactformulier of de reserveerknop hebt staan.

In het kort

• Een virtuele rondleiding die op je website is geïntegreerd, verschijnt direct op jouw pagina — niet als aparte link naar een extern platform.
• In Tours haal je de integratiecode op via Mijn Tours, nadat de tour is gepubliceerd.
• De stappen zijn: Mijn Tours → driepuntenmenu → Integratie → platform kiezen → code kopiëren.
• In het integratiescherm kun je de weergave van de tour op externe websites in- of uitschakelen.
• Je kunt instellen op welke domeinen de tour mag verschijnen, zodat de code niet zomaar overal gekopieerd kan worden.
• Er zijn codevarianten beschikbaar voor HTML, React, Angular, WordPress en Wix.
• Als je de tour in de editor aanpast, wordt de geïntegreerde versie op je website automatisch bijgewerkt.
• De geïntegreerde tour kan 360°-scènes, interactieve punten, reserveringen en gebruiksstatistieken bevatten.

Wat betekent een virtuele rondleiding integreren op je website?

Een virtuele rondleiding integreren op je website betekent dat bezoekers een ruimte in 360° kunnen verkennen direct op jouw pagina. Ze zien niet alleen een grote foto en worden ook niet doorgestuurd naar een externe galerij. Ze kunnen de afbeelding draaien, van de ene ruimte naar de andere navigeren, op interactieve punten klikken en details ontdekken die gewone foto's minder goed overbrengen.

Voor een hotel kan dit een overtuigendere presentatie van de kamers betekenen. Voor een restaurant kunnen mensen de sfeer en de zaal bekijken voordat ze reserveren. Voor vastgoed kan het onnodige vragen verminderen, omdat bezoekers de indeling en de ruimte beter begrijpen voordat ze een bezichtiging aanvragen.

Technisch gezien verloopt de integratie via een code die het platform genereert. Je kopieert die uit Tours en plakt hem in je website. Op WordPress of Wix zet je hem in een HTML-element. Op een op maat gebouwde site zet je hem in de paginacode. Voor React- of Angular-projecten gebruik je de variant die voor die technologie is bedoeld.

Het grootste voordeel is dat de bezoeker in dezelfde context blijft. De tour kan naast de kameromschrijving staan, naast het contactformulier, naast de prijzen of naast de reserveerknop. Dat maakt de ervaring vloeiender en gebruiksvriendelijker.

Hoe haal je de integratiecode op in Tours?

In Tours wordt de integratiecode automatisch gegenereerd. Je hoeft hem niet handmatig op te bouwen en je hoeft niet te zoeken naar verborgen instellingen in de applicatie. Zodra de tour is gepubliceerd, vind je hem in je touroverzicht en open je de integratie direct van daaruit.

• Log in op je Tours-account.
• Open de pagina Mijn Tours.
• Zoek de gepubliceerde tour die je op je website wilt tonen.
• Klik op het driepuntenmenu naast de tour.
• Kies de integratie-optie.
• Controleer of de integratie is ingeschakeld.
• Voeg de toegestane domeinen toe of pas ze aan.
• Kies de codevariant voor HTML, React, Angular, WordPress of Wix.
• Kopieer de weergegeven code en plak hem op de gewenste pagina van je website.

Elke tour heeft zijn eigen integratie-instellingen. Dat is vooral handig als je meerdere locaties, meerdere panden of meerdere presentatiepagina's beheert. Je kunt een tour hebben voor de receptie, een voor de kamers, een voor het restaurant en een voor een evenementenruimte — elk met een eigen code en eigen toegestane domeinen.

Wat kun je instellen in het integratiescherm?

Het integratiescherm is niet alleen een plek om de code te kopiëren. Het is ook de plek waar je bepaalt hoe de tour op externe websites wordt gebruikt. Van hieruit kun je de integratie uitschakelen, alleen bepaalde domeinen toestaan en de juiste code kiezen voor het platform dat je gebruikt.

• In- of uitschakelen: je kunt de weergave van de tour op externe websites stoppen zonder de tour uit je account te verwijderen.
• Toegestane domeinen: je kiest op welke websites de tour mag verschijnen, bijvoorbeeld het domein van het hotel, het restaurant of het makelaarskantoor.
• Platform kiezen: je kunt HTML, React, Angular, WordPress of Wix selecteren.
• Kant-en-klare code: nadat je het platform hebt gekozen, verschijnt de bijbehorende code onder de selector.
• Aparte instellingen per tour: elke gepubliceerde tour kan zijn eigen integratieregels hebben.

De lijst met toegestane domeinen is handig voor controle. Als je bijvoorbeeld een tour hebt aangemaakt voor de officiële website van een hotel, kun je de weergave beperken tot dat domein. Als iemand anders de code kopieert en op een andere website probeert te plaatsen, kan de integratie worden geblokkeerd.

Welke variant kies je: HTML, React, Angular, WordPress of Wix?

Niet alle websites zijn op dezelfde manier gebouwd, daarom biedt Tours meerdere codevarianten aan. Het idee is dat jij de integratie niet handmatig hoeft aan te passen, maar gewoon de juiste variant kiest en de gegenereerde code kopieert.

Als je niet weet welke variant je moet kiezen, is de vuistregel eenvoudig: WordPress voor WordPress, Wix voor Wix, React voor React of Next.js, Angular voor Angular en HTML voor elke andere website die aangepaste code accepteert.

Virtuele rondleiding integreren op WordPress

Op WordPress is de integratie vrij eenvoudig. Je kiest de WordPress-variant in Tours, kopieert de code en plakt hem op de pagina waar je de tour wilt tonen. Je hebt geen speciale plug-in voor virtuele rondleidingen nodig, zolang je thema of editor het toevoegen van aangepaste HTML toestaat.

• In Gutenberg voeg je een aangepast HTML-blok toe en plak je de code daarin.
• In Elementor gebruik je het HTML-element en zet je de code in de gewenste sectie.
• In Divi gebruik je de codemodule.
• In WPBakery kun je een element voor ruwe HTML of aangepaste code gebruiken.
• In de klassieke editor schakel je over naar de tekst- of HTML-weergave en voeg je de code in waar je hem nodig hebt.

Let ook op de ruimte waarin je de tour plaatst. Als je hem in een te kleine sectie perst, ziet de ervaring er niet goed uit. Op desktop is een hoogte van ongeveer 600px doorgaans een goed startpunt; op mobiel is het verstandig de pagina te controleren voordat je publiceert.

Virtuele rondleiding integreren op Wix

Op Wix kies je de Wix-variant in Tours en kopieer je de gegenereerde code. Daarna ga je naar de Wix-editor en voeg je een HTML-integratie-element toe op de plek van de pagina waar je de tour wilt tonen.

• Open de gewenste pagina in de Wix-editor.
• Voeg een nieuw element toe via het +-menu.
• Kies de sectie voor integratie of aangepaste code.
• Selecteer het HTML-element.
• Plak de door Tours gegenereerde code voor Wix.
• Pas de breedte en hoogte aan voor desktop en mobiel.
• Publiceer de pagina en test de tour op de live website.

Als de tour op Wix afgesneden lijkt, is het probleem meestal de grootte van het HTML-element en niet de code van Tours. Vergroot de ruimte waarin je de tour hebt geplaatst, controleer de mobiele versie en zorg ervoor dat je de laatste versie van de pagina hebt gepubliceerd.

Integratie op React, Angular, Webflow, Squarespace of HTML

Als je website niet op WordPress of Wix staat, kies je de variant die bij jouw project past. Voor een volledig op maat gebouwde site is de HTML-variant doorgaans voldoende. Voor moderne applicaties kun je de code voor React of Angular gebruiken.

• React / Next.js: gebruik de React-code en zet hem in de component waar je de tour wilt tonen.
• Angular: gebruik de Angular-code in het template van de juiste component.
• Webflow: voeg een integratie-element toe en plak de HTML-code uit Tours.
• Squarespace: voeg een codeblok toe en plak de HTML-variant.
• Shopify: zet de code in een aangepaste HTML-sectie of een paginatemplate, afhankelijk van het gebruikte thema.
• Puur HTML: voeg de code direct in op de plek waar je de tour wilt laden.

Als jouw platform geen aangepaste code toestaat, kun je de publieke link van de tour of de QR-code gebruiken die Tours genereert. Als het echter mogelijk is, is directe integratie de betere keuze voor commerciële pagina's, omdat de bezoeker dan bij het aanbod, het formulier of de reserveerknop blijft.

Hoe maak je de tour aan voordat je hem integreert?

Voordat je bij de integratiecode komt, moet je een gepubliceerde tour hebben. In Tours verloopt het aanmaken visueel: je uploadt de 360°-scènes, ordent ze en voegt de interactieve punten toe die je nodig hebt.

• Maak een account aan op getours.app en open de Tours-applicatie.
• Open Mijn Tours en klik op de knop voor een nieuwe tour.
• Vul de naam en de categorie van de tour in; optioneel kun je locatie, prijs of tags toevoegen.
• Upload de eerste 360°-scène en geef die een duidelijke naam.
• Voeg in de editor extra scènes, navigatiepunten, informatie, afbeeldingen, video, externe links en scènegroepen toe.
• Als je bepaalde punten aan reserveringen wilt koppelen, kun je ze organiseren met interne tags.
• Publiceer de tour en kies de gewenste zichtbaarheid.
• Na het publiceren ga je terug naar Mijn Tours, open je het driepuntenmenu en kies je integratie.

Kort gezegd: de editor is de plek waar je de 360°-ervaring opbouwt, en het integratiescherm is de plek van waaruit je de tour op je website plaatst en bepaalt waar hij mag worden weergegeven.

Kun je reserveringen hebben in de geïntegreerde tour?

Ja. Als je reserveringen hebt ingesteld in Tours, kunnen die ook werken in de tour die op je website is geïntegreerd. De bezoeker kan de ruimte verkennen en een reservering of aanvraag indienen zonder naar een andere pagina te worden gestuurd.

• Reservering op tourniveau: je kunt een reserveerknop tonen die gedurende de hele tour zichtbaar is.
• Reservering op scèneniveau: je kunt reserveren alleen activeren in bepaalde kamers of zones.
• Reservering op groepsniveau: je kunt meerdere scènes groeperen, handig voor kamertypes, appartementen of verschillende ruimtes.
• Reservering via een interactief punt: een punt in de tour kan een reserveringsvenster openen voor een tafel, een kamer, een ruimte of een bezichtiging.
• Reserveringen via tags: meerdere interactieve punten kunnen dezelfde agenda delen als ze aan dezelfde tag zijn gekoppeld.

Reserveringen worden apart ingesteld in de Booking Manager. Daar stel je de beschikbaarheidsagenda in, de capaciteitsregels, handmatige of automatische goedkeuring en de personen die aanvragen beheren. Daarna koppel je de Booking Manager aan de tour, aan bepaalde scènes, aan scènegroepen of aan interactieve punten.

Als je al een PMS, een channel manager of andere reserveringsplatforms gebruikt, kan Tours functioneren als een extra visueel kanaal. In situaties waarin de beschikbaarheid op meerdere plekken wordt beheerd, helpt handmatige goedkeuring om dubbele boekingen te voorkomen.

Wat ziet de bezoeker in de geïntegreerde tour?

De bezoeker ziet precies de ervaring die je in de Tours-editor hebt opgebouwd. Het is niet alleen een panoramische afbeelding op de pagina, maar een interactieve rondleiding die navigatie, informatie, links, reserveringen en gebruiksstatistieken op de achtergrond kan bevatten.

• 360°-scènes die de bezoeker in alle richtingen kan draaien.
• Navigatie tussen kamers of zones via interactieve punten.
• Informatiepunten met tekst, afbeeldingen of video.
• Externe links naar menu's, catalogi, productpagina's of formulieren.
• Een reserveerknop of interactieve punten die het reserveringsvenster openen.
• Inhoud in meerdere talen, als je dat in de tour hebt ingesteld.
• Gebruiksstatistieken over bezoeken, bezochte scènes en interacties.

Waarom wordt de tour niet weergegeven op de website?

Als je de code op je website hebt geplaatst maar de tour niet verschijnt, betekent dat niet automatisch dat de integratie kapot is. Meestal ontbreekt er een instelling of is de code op een plek gezet die hem niet correct weergeeft.

• Controleer of de tour is gepubliceerd. Een niet-gepubliceerde tour wordt niet correct weergegeven op de website.
• Controleer of de integratie actief is via Mijn Tours → driepuntenmenu → integratie.
• Controleer de toegestane domeinen. Het domein van je website moet in de toegestane lijst staan.
• Zorg ervoor dat je de juiste codevariant hebt gekozen: WordPress voor WordPress, Wix voor Wix, React voor React, Angular voor Angular en HTML voor alle andere gevallen.
• Als je Wix of een visuele websitebouwer gebruikt, vergroot dan de hoogte van het element waarin je de tour hebt geplaatst.
• Controleer of jouw platform HTML-code of externe code toestaat. Sommige gratis abonnementen kunnen beperkingen hebben.
• Publiceer de pagina nadat je de code hebt geplakt. Soms is de tour zichtbaar in de voorvertoning maar niet op de live website als de wijzigingen niet zijn gepubliceerd.

De snelste test is teruggaan naar het integratiescherm, controleren of de integratie actief is, of het domein is toegestaan en of de gekozen code overeenkomt met jouw platform. In de meeste gevallen lost het probleem zich op zonder dat je iets in de tour hoeft te wijzigen.

Vergelijking met andere platforms voor virtuele rondleidingen

Veel platforms voor virtuele rondleidingen bieden een vorm van website-integratie. Het verschil wordt zichtbaar wanneer je meer wilt dan alleen de tour tonen: controle over domeinen, reserveringen, gebruiksstatistieken, meertalige inhoud of codevarianten voor verschillende technologieën.

Voor Tours gaat het er niet alleen om een panorama op je website te plaatsen, maar om de tour een nuttig onderdeel van je pagina te maken: presentatie, interactie, reservering, offerteaanvraag of inzicht in de interesse van bezoekers.

Als je de integratie wilt uitproberen, kun je beginnen met een eenvoudige tour. Maak een account aan, publiceer je eerste tour, ga naar Mijn Tours, open de integratie en kopieer de code voor jouw platform. Binnen een paar minuten kun je een 360-graden rondleiding direct op je website hebben, compleet met interactieve punten, reserveringen en gebruiksstatistieken klaar voor echt gebruik.