Handleiding · voor developers
Zo bouw je met Vonti sites en apps voor je klanten.
Van je accounts koppelen tot een betaalde factuur, knop voor knop. De schermen zijn echt en komen uit een demoproject: de webshop van een bloemist, gebouwd door Studio Sam. De assistent heet hier Lou. Bij jou staat overal de naam van jouw assistent.
Vonti voor developers is nog in de maak en we bouwen er elke dag aan. Zie je een knop die hier niet staat, of andersom? Mail ons op support@vonti.nl. Meer over je assistent zelf staat in de gewone handleiding.
01 · Aan de slag
Aan de slag als developer
Je sites en apps staan op je eigen accounts. Die koppel je één keer in Mijn Vonti, onder Apps, op de kaart Koppelingen. Daarna ziet je assistent ze vanzelf.
Zo doe je het
- 1Open mijn.vonti.nl en ga naar Apps.
- 2Tik bij GitHub op Koppel en log in. Liever met een token? Tik op Liever met een token, of nog geen account? en volg de stappen.
- 3Tik bij Vercel op Koppel. Inloggen met Vercel kan nog niet, dus het formulier voor een token gaat vanzelf open. Maak het token bij Vercel en plak het hier.
- 4Wil je betaald worden via je eigen Stripe? Tik bij Stripe op Koppel en plak een beperkte sleutel (begint met rk_live_). De rechten die nodig zijn staan erbij.
- 5Open je assistent en ga naar Home. Daar staat je studio.
GitHub
Hier staat de code van elk project, met elke versie bewaard. Een nieuw project komt altijd op je eigen GitHub. Zonder GitHub kun je geen project maken.
Vercel
Hier draaien je sites. Publiceren, de preview voor je klant en je eigen domein lopen via je eigen Vercel-project.
Stripe
Alleen nodig voor betaallinks bij je facturen. Het geld gaat rechtstreeks naar jouw Stripe. Vonti ziet het niet.
Firebase
Een app met data krijgt Firebase. Dat project maak je zelf aan. Je assistent vraagt je daarna om de gegevens.
Wat gratis is
Een GitHub-account is gratis. Vercel heeft een gratis Hobby-abonnement voor eigen projecten; voor websites van klanten vraagt Vercel het Pro-abonnement. In Vonti kosten alleen bouwbeurten credits, zie het hoofdstuk Credits.
Je sleutels
Tokens en sleutels gaan versleuteld naar je eigen assistent en blijven daar. Wij bewaren ze niet, en ze komen nergens meer in beeld.
02 · Je studio
Je studio op Home
Als developer of webdesigner ziet Home er anders uit dan bij andere vakken. Bovenaan staat Je studio.
Drie grote tegels
Nieuw project: beschrijf wat je wilt, je assistent zet het op. Projecten: al je sites en apps, elk met eigen chats. Facturatie: van offerte naar factuur.
Vier kleine tegels
Offertes, Facturen, Klanten en Verzoeken. Ze openen meteen het juiste scherm, zonder dat je iets hoeft te typen.
Melding bij een verzoek
Stuurt je klant een wijzigingsverzoek of akkoord, dan krijg je op Home een melding met Later en Bekijk. Op de tegel Verzoeken staat hoeveel er nog open staan.
Je projectchats
Chats van een project staan apart onder Je projectchats, met een code-icoon en de naam van het project. Tik erop en het project gaat open in die chat.
Je eigen website
De tegel Website is je eigen site. Staat er een slotje op, dan zet Bouw mijn website er met één klik een klaar op je eigen GitHub. Heb je hem al als project, open dat project en kies Dit is mijn eigen website.
03 · Nieuw project
Een nieuw project
Tik op Home op Nieuw project. Je beschrijft de klus, kiest het soort en een naam. De repo staat daarna meteen op je eigen GitHub.
Zo doe je het
- 1Vul bij Wat wil je bouwen? in een paar zinnen in wat je klant wil.
- 2Kies het soort: Website (Next.js, gemaakt om gevonden te worden), Applicatie (React en Vite, met inloggen en een dashboard) of Lege HTML-site. Je eigen sjablonen staan er ook tussen.
- 3Geef het project een naam. Zo heet de repo op je GitHub.
- 4Laat het vinkje Laat me eerst drie ontwerprichtingen zien aan staan als je eerst wilt kiezen.
- 5Tik op Maak het project. Het project gaat open met een verse chat, met je vraag er al in.
Drie ontwerprichtingen
Nog voor er een pagina gebouwd is, zie je drie richtingen naast elkaar, elk met een eigen palet en letterpaar. Typ bij één richting wat anders moet en tik op Pas aan, of tik op Kies deze. Dan bouwt hij de hele site in die stijl.
Later nog eens kijken
De richtingen blijven bewaard. Je vindt ze terug in het menu Project, onder Ontwerprichtingen.
Eigen sjablonen
Tevreden over een project? Kies in het menu Project Opslaan als sjabloon, als website of app. Je geheimen (.env) gaan niet mee. Bij een volgend project staat je sjabloon in de lijst.
Foto’s
Je assistent zoekt foto’s in vrije beeldbanken en zet de bron erbij. Plaatjes laten maken door de AI kan nog niet.
Nieuwe site
In Je projecten staat ook Nieuwe site. Dan kies je alleen het soort en een naam, zonder startvraag, en kun je kiezen of de repo privé is.
Een app met data
Kies je Applicatie, dan vraagt je assistent om de gegevens van je eigen Firebase-project. Online gaat het pas als jij akkoord geeft.
04 · De editor
Bouwen in de editor
Links de chat, rechts je project met de tabs Preview, Code en Wijzigingen. Wat je assistent verandert, zie je meteen in de preview. Je echte site verandert pas als jij publiceert.
Bouwen, Plan en Vraag
Boven het invoerveld kies je hoe hij werkt. Bouwen: hij past de site aan. Plan: hij schrijft eerst een plan dat jij aanpast en met Goedkeuren en bouwen laat uitvoeren. Vraag: alleen uitleg, er verandert niets.
Model: Auto, Standaard of Max
Auto: een nieuw gesprek start op Max en houdt daarna hetzelfde model. Standaard is snel en zuinig. Max denkt het diepst en kost meer. Je keuze geldt vanaf je volgende vraag.
Verbeter
Typ kort wat je wilt en tik op Verbeter. Hij maakt er een duidelijke opdracht van. Kijk hem na, pas aan wat je wilt en tik op Stuur. Verbeter kost geen credits.
@bestand
Typ @ en een deel van een bestandsnaam. Kies het bestand uit de lijst met de pijltjes en Enter. Dan werkt hij precies in dat bestand.
Wat ik doe
Zolang hij werkt, staat boven de invoer de stap van nu. Tik op Bekijk alle stappen voor het venster Wat ik doe: elke stap in gewone taal, met eronder wat er technisch gebeurde.
Computer en Telefoon
Met de knop boven de preview wissel je tussen de breedte van een computer en een telefoon. Na elke beurt laadt de preview vanzelf opnieuw.
Het menu Project
Ongedaan maken, Versies, Verzoeken van je klant, Plan, Ontwerprichtingen, Eigen domein, Opslaan als sjabloon en Wijzigingen weggooien. Wat nu niet kan, staat er niet in.
Het menu Preview
Laat hem kijken en verbeteren: hij bekijkt de site op computer en telefoon en verbetert de zwakste punten. Verder Opnieuw laden, Je live site en Open in een nieuw tabblad.
Wisselen van project
Tik bovenin op de naam van het project, met het pijltje ervoor. Je ziet Je projecten weer. Het kruisje rechtsboven brengt je terug naar Home.
Ook op je telefoon
De editor past op je telefoon. Bovenin wissel je tussen de chat en het project.
05 · Bewerk
Zelf aanpassen met Bewerk
Een tekst of kleur pas je zelf aan, zonder het te vragen. Tik boven de preview op Bewerk en klik op het stuk dat anders moet.
Zo doe je het
- 1Tik op Bewerk. Wat je aanwijst krijgt een oranje rand.
- 2Klik op een tekst, knop of blok. Het venster Aanpassen gaat open.
- 3Pas de tekst aan en tik op Toepassen. Of beschrijf bij Of vraag iets anders over dit stuk wat er anders moet.
- 4Kleur, achtergrond, grootte, uitlijning en vet zie je meteen in de preview. Tik op Stijl in de batch om ze te bewaren voor later.
- 5Onder de chat staat dan hoeveel visuele wijzigingen klaarstaan. Tik op Opslaan, of op Weggooien.
Tekst direct
Een gewone tekst vervangt hij meteen in de code, zonder chat en zonder credits. Lukt dat niet, bijvoorbeeld omdat de tekst vaker voorkomt, dan gaat je vraag naar de chat.
Stijl als klus
Kleur en grootte uitproberen is gratis. Pas als je de batch opslaat, zet hij alles in één bouwbeurt in de code, in de stijl van het project. Dat telt als klus.
Zelf in de code
Liever zelf typen? Open de tab Code, kies links een bestand en tik op Opslaan, of gebruik Cmd+S of Ctrl+S. Ook dat staat eerst alleen in de preview.
06 · Versies
Versies en ongedaan maken
Voor elke vraag in de editor legt hij vast hoe het was. Viel het tegen, dan zet je het terug. Live gaat een teruggezette versie pas met Publiceren.
Ongedaan maken
In het menu Project, zolang er iets niet gepubliceerd is. Je gaat terug naar hoe het was voor je laatste vraag.
Voor je laatste vragen
In Versies staan je laatste vragen die nog niet gepubliceerd zijn. Tik op Terug bij de vraag waarvoor je terug wilt.
Gepubliceerde versies
Ook in Versies: de laatste 25 versies van je site op GitHub. Zet terug laat zo’n versie eerst in de preview zien. Let op: wat nog niet gepubliceerd is, gaat dan weg.
Wijzigingen
De tab Wijzigingen toont regel voor regel wat er anders is dan je live site, in rood en groen.
Alles weggooien
Wijzigingen weggooien in het menu Project haalt alles weg wat nog niet gepubliceerd is. Je live site blijft precies zoals hij is.
07 · Je klant erbij
Je klant erbij
Met Deel met klant krijgt je klant een link naar de site zoals hij nu in je preview staat, ook wat je nog niet gepubliceerd hebt. Hij geeft akkoord of vraagt een wijziging, en wijst zelf aan waar.
Zo doe je het
- 1Tik in de editor op Deel met klant. Je assistent bouwt de preview op je eigen Vercel. Staat het project daar nog niet, dan maakt hij eerst het Vercel-project aan.
- 2Tik op Kopieer en stuur de link naar je klant. De link werkt een maand. Met Nieuwe link met de huidige preview maak je een verse.
- 3Je klant ziet de site. Hij tikt op Wijs iets aan, klikt op het stuk dat anders moet en typt erbij wat.
- 4Hij tikt op Dien wijzigingsverzoek in, of op Akkoord.
- 5Bij jou komt het verzoek binnen met een nummer, de pagina en het aangewezen stuk.
Verzoeken afhandelen
Open in het menu Project Verzoeken van je klant. Toon in preview zet een oranje rand om het aangewezen stuk. Laat (naam van je assistent) het doen zet het verzoek in de chat en op In behandeling. Klaar? Tik op Afgerond.
Wat je klant ziet
Onder de site ziet je klant zijn verzoeken met de stand: Ontvangen, In behandeling of Afgerond. Zonder dat jij hoeft te mailen.
Akkoord zet niets live
Een akkoord van je klant komt bij je binnen als melding. Live zetten blijft altijd jouw knop Publiceren.
Alleen eigen projecten
Deel met klant staat bij je eigen projecten en vraagt een gekoppeld Vercel. Bij een site die SandeDesign voor je host staat de knop er niet.
08 · Publiceren
Controle en publiceren
Rechtsboven staat Publiceren. Die knop is alleen actief als er iets niet gepubliceerd is. Voor er iets live gaat, controleert hij je project. Die controle is gratis.
Zo doe je het
- 1Tik op Publiceren. Hij kijkt of er een sleutel in je code staat, een .env meegaat naar GitHub of een geheime NEXT_PUBLIC- of VITE-variabele in de browser belandt. Hij let ook op achtergebleven sjabloontekst, plaatjes zonder alt-tekst en een ontbrekende titel of sitemap.
- 2Is er iets mis, dan staat er Eerst dit oplossen. Tik op Laat (naam van je assistent) het oplossen, of op Toch publiceren.
- 3Alles goed? Tik op Ja, publiceer. Alles gaat in één keer naar je GitHub en je eigen Vercel bouwt de site.
- 4In het venster Gepubliceerd zie je je adres en de stand bij Vercel. Meestal staat hij binnen een minuut live. Je mag het venster sluiten.
Bouw mislukt
Mislukt de bouw bij Vercel, dan blijft je echte site op de vorige versie. Je ziet het einde van de bouwlog en tikt op Laat (naam van je assistent) fixen.
Nog niet op Vercel
Staat het project nog niet op Vercel, dan zie je Zet online. Eén tik maakt het Vercel-project en de eerste versie.
Eigen domein
Kies in het menu Project Eigen domein, vul je domein in en tik op Koppel domein. Hij koppelt het aan je Vercel-project en laat het DNS-record zien dat je bij je domeinbeheerder zet: voor jouwbedrijf.nl een A-record, voor www.jouwbedrijf.nl een CNAME.
Controleer
Een wijziging in DNS kan een paar uur duren. Tik dan in hetzelfde venster op Controleer. Werkt het, dan staat er een vinkje.
Je live site
Later nog eens kijken waar je site staat en of hij gebouwd is? Kies in het menu Preview Je live site.
09 · Offerte tot betaald
Van offerte tot betaald
Je klanten, offertes en facturen staan in Facto. Je regelt ze vanuit je studio, met de tegels Facturatie, Offertes, Facturen en Klanten. Alles wordt eerst een concept.
Zo doe je het
- 1Klanten: tik op Nieuwe klant. Alleen de naam is verplicht. Bij een klant staat de knop Offerte.
- 2Offertes: tik op Nieuwe offerte, kies de klant en vul de regels in (omschrijving, aantal, prijs exclusief btw en btw). Tik op Maak concept. De offerte verstuur je daarna in Facto.
- 3Zet de offerte op Verstuurd, en op Akkoord zodra je klant ja zegt.
- 4Facturatie: onder Klaar om te factureren tik je op Maak factuur. De offerte wordt een conceptfactuur.
- 5Bij een conceptfactuur tik je op Versturen. Je ziet het adres en kunt het aanpassen, bijvoorbeeld naar de boekhouding van je klant.
- 6Na het versturen staat de factuur bij Openstaand. Is je Stripe gekoppeld, tik dan op Betaallink en stuur de link naar je klant.
Versturen via Facto
Facto maakt de PDF met je eigen factuursjabloon en verstuurt hem vanuit Facto. Daarna staat de factuur op verzonden. Je assistent verstuurt alleen als jij het hem uitdrukkelijk vraagt.
Factuur klaar
Maak je een nieuwe factuur, dan zie je na Maak concept het venster Factuur klaar, met het veld Versturen naar, Open in Facto en Versturen.
Betaallink via je eigen Stripe
Een betaallink kan bij een verstuurde factuur die nog niet betaald is. Hij wordt meteen gekopieerd. Een tweede keer geeft dezelfde link, met Kopieer betaallink.
Betaald terugmelden
Betaalt je klant, dan zet hij de factuur in Facto op betaald zodra je Facturatie of Facturen opent. Je ziet dan Betaald via Stripe met het nummer. Zonder Stripe tik je zelf op Betaald.
10 · Credits
Credits
Alleen bouwen kost credits. Een klus kost wat hij kost: een titel aanpassen kost weinig, een hele pagina meer. Wat een klus kostte, zie je achteraf onder elk antwoord.
Wat het kost
De developer-uitbreiding komt bovenop je assistent van €75 per maand. Elke maand komt er een vaste bundel credits bij.
| Bundel | Per maand | Credits |
|---|---|---|
| Start | €49 | 250 |
| Pro | €99 | 550 |
| Studio | €199 | 1.200 |
| Bureau | €399 | 2.600 |
- Bijkopen: 100 credits voor €20.
- Een volledige nieuwe pagina kost meestal 6 tot 8 credits, een kleine aanpassing rond 1.
- Alle bedragen zijn exclusief btw. Alles op een rij staat op onze prijzenpagina.
Wat kost credits
Een beurt in Bouwen of Plan, de drie ontwerprichtingen, een gekozen richting laten bouwen en een opgeslagen batch uit Bewerk.
Wat gratis is
Vraag, gewone chats met je assistent, Verbeter, een tekst direct aanpassen met Bewerk, zelf typen in de code, de controle voor Publiceren en de controle die hij na een grote bouwbeurt zelf doet.
Prijs onder het antwoord
Onder elk antwoord na een klus staat een regel zoals 1,2 credits · Standaard · saldo 412,6. Met Max kost dezelfde klus meer dan met Standaard.
Je saldo
Rechtsboven in de editor staat je saldo. Tik erop voor Je credits: je saldo, de bundel die elke maand bijkomt, wat je deze maand bouwde en per klus wat hij kostte en voor welk project.
Bijkopen
In hetzelfde venster, of in Mijn Vonti onder Abonnement. Je betaalt in een nieuw tabblad bij Stripe. Je saldo werkt zich daarna vanzelf bij.
Saldo op
Is je saldo op, dan bouwt hij niet verder tot je bijkoopt. Vraag, chatten en Bewerk werken gewoon door.
11 · Geheugen en chats
Projectgeheugen en chats
Elk project heeft zijn eigen chats en zijn eigen geheugen. Zo lopen je klanten nooit door elkaar, en weet hij over drie maanden nog waarom die knop groen is.
Chats per project
Een project opent op zijn laatste chat. Met Chats linksboven zie je alle chats van het project. Nieuwe chat begint vers, met het geheugen van het project.
Geheugen van dit project
Je assistent schrijft zelf op wat je klant wil, wat er besloten is en waarom. Elke wijziging komt erbij met datum, elke publicatie ook. Jij hoeft nooit een notitie te typen.
Bekijken
In de lijst met chats staat Geheugen van dit project met de laatste wijzigingen. Tik op Bekijken voor alles. Elke nieuwe chat in het project leest dit eerst.
Apart van je gewone chats
Projectchats staan niet in je gewone gesprekken. Op Home vind je ze onder Je projectchats. Sluit je de editor, dan ga je terug naar je gewone assistent.
12 · Bestanden
Bestanden en opslag
Je documenten zijn van jou, dus ze staan bij jou. Je assistent bewaart ze op je eigen computer, via Vonti Sync.
Bijlagen uit de chat
Stuur een foto of bestand mee met de paperclip. Hij gaat ook naar je eigen opslag: uit een gewone chat naar de Inbox, uit een projectchat naar Projecten met de naam van het project. Nooit zomaar in je repo.
Vonti Sync
Je opslag koppel je bij het instellen van je assistent, bij Koppel je opslag. Kies Op mijn computer. Voor Windows download je een klein programma, op een Mac plak je één regel in Terminal.
Later doen
Kan het nu even niet, tik dan op Sla over. Je assistent herinnert je eraan.
In je project
Moet een bestand echt in de site, zeg het dan in de projectchat. Hij zet het op de goede plek in de code.
13 · Eigen koppelingen
Eigen koppelingen
Een experiment voor developers: koppel je eigen dashboard of systeem aan je assistent. Hier geven we geen actieve ondersteuning op, tenzij je ons inhuurt.
Zo doe je het
- 1Ga in Mijn Vonti naar Instellingen en tik op de kaart Op je toestel op Alles op je toestel. Je assistent opent.
- 2Kies Eigen koppelingen.
- 3Vul een Naam in, bijvoorbeeld mijn_dashboard, en bij Wanneer gebruiken wanneer je assistent hem gebruikt.
- 4Kies de Methode en vul het Adres van je API in. Gebruik {plek} voor waarden die hij zelf invult, zoals {datum}.
- 5Heeft je API een sleutel nodig, vul dan Kop voor de sleutel en Sleutel in. Bij POST, PUT en PATCH kan er een Lijf (JSON) bij.
- 6Tik op Probeer om te testen, en op Opslaan.
Je sleutel blijft in je box
De sleutel staat alleen in je eigen assistent. Je assistent ziet hem niet; hij krijgt alleen het antwoord van je API.
Wat mag
Alleen adressen die met https:// beginnen en openbaar bereikbaar zijn. Adressen binnen je box of je eigen netwerk worden geweigerd.
Aanpassen
Bij elke koppeling staan Wijzig en Weg. Laat je de sleutel leeg bij Wijzig, dan blijft de oude staan.
14 · Terminal
Terminal en code
Onder de preview staat de terminal. Tik op Terminal om hem open te klappen. Bouw je al jaren, dan voel je je meteen thuis. Nog nooit gebouwd? Je hoeft er niets mee.
Server
De uitvoer van de dev-server van je preview. Hier zie je wat er gebeurt als de preview opstart of een pagina compileert.
Build
Tik op Build om de site te bouwen zoals hij live gaat. De preview staat zolang uit en komt daarna vanzelf terug. Met Stop breek je hem af.
Shell
Een echte terminal in je projectmap, voor npm, git en de rest. Hij draait als een aparte gebruiker zonder toegang tot je assistent. Hij sluit als je de editor sluit, van project wisselt of een kwartier niets typt.
De foutbalk
Gaat compileren, de build of iets in de preview mis, dan verschijnt een balk met de fout. Terminal opent de uitvoer, Laat (naam van je assistent) fixen zet de fout in de chat, het kruisje negeert hem.
De tab Code
Links Bestanden en Zoeken, rechts een echte editor. Gewijzigde bestanden zijn gemarkeerd. Opslaan zet je wijziging in de preview, niet live.
15 · Vragen
Veelgestelde vragen
- Gaat er iets live zonder dat ik het weet?
- Nee. Alleen jouw knop Publiceren zet iets live. Een akkoord van je klant en een teruggezette versie komen eerst in de preview.
- Kost chatten met mijn assistent credits?
- Nee. Alleen bouwen kost credits. Vraag, gewone chats, Verbeter en een tekst aanpassen met Bewerk zijn gratis.
- Wat gebeurt er als mijn credits op zijn?
- Dan bouwt hij niet verder tot je bijkoopt, via het saldo in de editor of in Mijn Vonti onder Abonnement. Daarna gaat hij meteen verder.
- Van wie is de code?
- Van jou. Alles staat op je eigen GitHub en draait op je eigen Vercel. Stop je met Vonti, dan neem je alles mee.
- Ik zie Deel met klant niet.
- De knop staat alleen bij je eigen projecten, niet bij een site die SandeDesign voor je host. Koppel ook Vercel in Mijn Vonti, onder Apps.
- De preview start niet.
- De eerste keer duurt het klaarzetten een minuut of twee. Start hij daarna nog niet, vraag dan in de chat: waarom start de preview niet? Hij leest de uitvoer en lost het op.
- Kan ik inloggen met Vercel?
- Nog niet. Vercel koppel je voorlopig met een token. De stappen staan in Mijn Vonti, onder Apps, bij Vercel.
- Kan hij plaatjes maken?
- Nog niet. Hij zoekt foto’s in vrije beeldbanken en zet de bron erbij.
- Krijg ik hulp bij eigen koppelingen?
- Eigen koppelingen zijn een experiment. Daar geven we geen actieve ondersteuning op, tenzij je ons inhuurt.
- Mijn vraag staat er niet tussen.
- Vraag het je assistent zelf, of mail ons op support@vonti.nl.
Nog geen toegang? Bekijk Vonti voor developers en zet je naam op de lijst.