Esther de BoerAug 4, 2026
Claude AI website hosten in Voluit Suite
Claude AI website hosten in Voluit Suite
Esther de Boer
Leer hoe je een website die door Claude AI is gegenereerd eenvoudig integreert in Voluit Suite. Volg dit stappenplan om je eigen ontwerpen, formulieren en agenda's naadloos te hosten op je eigen domein.
Claude AI website hosten in Voluit Suite
Esther de Boer
Leer hoe je een website die door Claude AI is gegenereerd eenvoudig integreert in Voluit Suite. Volg dit stappenplan om je eigen ontwerpen, formulieren en agenda's naadloos te hosten op je eigen domein.
Chapters
00:00
Introductie
Introductie over het hosten van Claude AI websites in Voluit Suite.
00:21
Voorbereiding
00:55
Integraties
01:45
Prompting
02:44
Implementatie
04:18
Afronding
Transcript
00:00
In deze video laat ik je zien hoe je een website die Claude AI voor je heeft gemaakt, host in Voluit Suite.
00:06
Je hebt geen aparte hosting nodig en je kunt je Voluit Suite formulieren en agenda gewoon gebruiken.
00:12
Je ziet hier mijn eigen website die ook door Claude AI is gemaakt en op de demopagina heb ik hier de agenda geïntegreerd.
00:21
Verzamel je materiaal voordat je je prompt begint.
00:25
Ga naar de Mediabibliotheek in Voluit Suite en upload daar al jouw plaatjes die je in je pagina wil zetten.
00:35
Als je ze natuurlijk niet door Claude laat genereren.
00:38
Klik op de drie puntjes bij een plaatje.
00:40
Klik op link ophalen en je hebt nu de link naar het plaatje onder je knop zitten.
00:45
Maak een apart notitietje nu en zet daar de omschrijving van het plaatje en de link.
00:51
En dat hele lijstje zet je straks in de prompt in Claude.
00:55
Wil je een formulier integreren in je website?
00:57
Ga dan naar het formulier, maak het eerst dus in Voluit Suite.
01:02
En dan ga je naar integreren.
01:04
En dan kun je hier kiezen voor insluitcode.
01:07
Dat is de iFrame code.
01:10
Dan klik je op insluitcode kopiëren.
01:13
Die zet je ook weer even in die notitie, zodat je alles bij elkaar hebt wat je straks in de prompt aan Claude meegeeft.
01:21
Hetzelfde doe je voor een eventuele agenda boeking iFrame, als je dat in je pagina wil zetten.
01:28
Je gaat dan naar je calendars en dan klik je op de kalender die je wilt delen en dan zie je hier ook weer insluitcode.
01:37
Die code kopieer je weer, zet je weer in het notitietje, heb je alles bij elkaar voor straks je prompt in Claude.
01:45
Nu ga je naar Claude.
01:46
Je prompt bestaat uit vier delen.
01:48
Wat de pagina moet doen natuurlijk, en voor wie, je doel, je doelgroep, welke secties wil je laten zien.
01:54
De afbeeldingslinks zet je erin, de iframecodes zet je erin, optioneel natuurlijk.
02:01
En dan nog een technische instructie, en die is wel belangrijk.
02:04
Ik zal hem hieronder de video ook neerzetten, dan kan je hem kopiëren.
02:09
Maak een stand-alone HTML-code met alle CSS en JavaScript in één bestand.
02:14
Het wordt geplakt in een code-element in de High Level Website Builder.
02:19
Voluit suite is de Nederlandse white label van High Level.
02:22
Gebruik niet deze HTML-codes, want die worden eigenlijk al door de builder erin gezet.
02:29
Dus die hoef jij niet apart in je HTML te zetten.
02:33
En zorg dat de pagina mobiel goed werkt.
02:36
En dat laatste is echt belangrijk.
02:39
Zonder die instructie krijg je soms code die niet goed rendert op mobiele websites.
02:44
Dan ga je naar je website en open je de pagina waar je dat blok dan neer wilt zetten.
02:52
klikt op het plusje en dan kun je kiezen voor een kolom.
02:56
En dan klik je op de groene sectie.
03:00
En dan kies je hiervoor, sta toe om de volledige breedte in te nemen.
03:05
Want Claude die genereert een hele pagina en die zorgt zelf voor ruimte aan de zijkanten.
03:11
Dus jij hoeft daar helemaal niet meer op te letten, maar je moet er wel voor zorgen dat die ruimte er dus is.
03:16
Nou, en dan ga je in het groene blok staan.
03:20
En dan voeg je hier een HTML-element toe.
03:23
Code heet het.
03:25
Sleep je erin.
03:26
En dan zorg je ervoor dat die custom code nergens padding heeft.
03:32
En je ziet dat er standaard padding wordt toegevoegd.
03:35
Die haal je allemaal weg.
03:36
Dus voor het blauwe element en voor het licht lila element, die moet je allemaal apart selecteren en dan overal de padding weghalen.
03:46
En dan daarnaast zie je hier nog ruimte tussen het blauwe, daar zit er dan ook nog padding.
03:52
Dus die haal je allemaal weg.
03:54
En dan maak je hetzelfde voor de weergave mobiel.
04:00
Dus dan ga je naar de weergave mobiel en dan zie je dat daar weer padding staat.
04:04
Dus dan klik je daar weer op.
04:05
Haal je die padding ook weg.
04:07
Als je dat niet doet staan er soms van die witte randen naast je design.
04:11
Dat is gewoon niet wat je wil.
04:13
Je hebt nu een heel mooi blok over.
04:15
waar je zo de HTML-code in kan plakken.
04:18
Maar wat nou heel slim is om te doen, is om hier een HTML-blokrij-template van te maken.
04:27
En die sla je op, dan hoef je al die padding weg te halen, hoef je niet meer te doen.
04:32
Dan klik je erop, dan klik je hier op algemeen en dan kun je de code editor openen en hier plak je alle code in.
04:42
Klik op het opslaan symbool, dan kun je hem bekijken en dan ga je kijken of het design helemaal naar wens is.
04:51
Je kunt ook kijken hoe het op mobiel rendert.
04:54
Dan kun je klikken op inspecteren en dan zie je hier bij dimensions kun je dan kiezen van welke iPhone of Samsung wil ik het op bekijken.
05:06
En dan kun je dus zien van, hé, hoe ziet het design eruit op mobiel?
05:11
Ziet alles er goed uit?
05:13
En anders kun je dus met Claude nog gaan wijzigen van, hé, ik vind dit toch niet zo mooi of dat niet zo mooi.
05:19
En als je helemaal blij bent, publiceer je het en dan staat je pagina live op je domein.
05:24
Domeinen koppelen wordt uitgelegd in een aparte video.
05:28
Kom je ergens niet uit, stuur een mailt je naar support.