Neon Studio in je eigen site zetten

De configurator van Neon Studio draait op jouw eigen website, in je eigen huisstijl. Je plakt er een stukje code voor op de pagina waar hij moet komen. Verder niets — geen plug-in, geen account voor je bezoeker, geen server bij jou.

Waar vind je jouw code?

In je portaal op app.mark2form.com: open je software onder Mijn software, ga naar de tab Gebruiken en klik op Koppelen. Kies Op mijn website; heb je meer dan één sleutel, dan kies je daarna voor welke website. Onder Plak deze code op je pagina staat je code, met de knop Kopieer de code, en daaronder vul je het adres van je site in. Liever stap voor stap, per website? Onder Meer uitleg staat Stap voor stap koppelen.

Tijdens je proef staat er nog geen Koppelen: op je eigen site zet je de configurator met een abonnement.

De code bestaat uit twee stukken:

• Een element waar de configurator in komt te staan. Zet het precies daar waar je hem op de pagina wilt hebben.
• Een script dat de configurator in dat element zet.

In grote lijnen ziet het er zo uit:

<!-- Schets. De echte code, met jouw sleutel erin, staat in je portaal. -->
<het-element-uit-je-portaal></het-element-uit-je-portaal>
<script defer src="<het-script-uit-je-portaal>"></script>

Neem de code dus altijd over uit je portaal en niet uit dit artikel: daar staat de versie die vandaag klopt. Zie ook SDK en API voor wat de SDK wel en niet doet.

Plakken: drie dingen die moeten kloppen

1. Neem de code letterlijk over. Kopieer ’m met de knop in je portaal; niet met de hand overtikken.
2. Laat de naam in het element staan zoals hij is. Het script zoekt precies die naam. Verzin je er zelf een, dan vindt het script de plek niet en blijft je pagina leeg.
3. Beide stukken op dezelfde pagina. Het element mag midden op de pagina staan en het script onderaan — als ze maar samen op één pagina staan.

In WordPress, Shopify, Wix of Squarespace plak je dit in een blok dat “HTML”, “Custom HTML” of “Code” heet. Een gewone tekst-editor filtert het <script> eruit; die kun je dus niet gebruiken.

Hoe hoog wordt hij?

Vanzelf. De configurator meet zichzelf en geeft zijn hoogte door aan jouw pagina, dus hij groeit en krimpt mee met wat je klant doet. Je hoeft geen hoogte in te stellen. De breedte is altijd 100% van de ruimte die je ’m geeft.

Wil je er iets omheen — een rand, een maximale breedte, wat lucht — dan zet je dat op je eigen element.

Neon Logo en Neon Tekst

Neon Studio heeft twee producten, elk met een eigen staffel en een eigen abonnement: Neon Logo (je klant uploadt een bestand) en Neon Tekst (je klant typt zijn tekst). Elk product staat apart onder Mijn software, met zijn eigen code op zijn eigen tab Gebruiken: de sleutel in die code hoort bij dat ene product. Wil je allebei op je site, dan plak je van elk product de code op de pagina waar het moet komen. Zie ook Neon Tekst instellen.

Je sleutel: wat is dat, en hoe geheim is hij?

De sleutel in de code is je publieke sleutel. Die hóórt op je website te staan — hij zegt alleen “deze bezoeker hoort bij dít bedrijf”, zodat de configurator jouw prijzen, kleuren en logo laadt.

Wat hij niet kan: je portaal in, je bestellingen bekijken of iets wijzigen. Daar is inloggen voor nodig. De geheime sleutel van de Productie-API is een andere sleutel, en die hoort nooit in een webpagina.

Wil je niet dat iemand jouw publieke sleutel op zijn eigen site plakt, dan leg je vast op welke webadressen hij mag werken: bij het koppelen, of later op de tab Gebruiken onder Sleutels beheren, bij Toegestane domeinen. Overal anders doet hij dan niets. Staat daar nog niets, dan start hij op elk domein: handig om te testen, maar vul je eigen domeinen in zodra je live gaat.

Je hoeft de code nooit opnieuw te plakken

Dit is het belangrijkste zinnetje van dit artikel: wijzigingen in je instellingen zijn direct actief. Andere prijzen, een nieuwe kleur, een andere knoptekst — je slaat het op in je portaal en je site toont het meteen. De code op je site blijft altijd hetzelfde.

De enige uitzondering: als je je sleutel vernieuwt, met Sleutel vernieuwen onder Sleutels beheren op de tab Gebruiken. De oude sleutel werkt dan meteen niet meer, en je site toont de configurator pas weer als de nieuwe code erop staat. Doe dat dus alleen als je denkt dat je sleutel op straat ligt.

Er verschijnt niets — wat nu?

Wat je ziet	Wat er meestal aan de hand is
Lege pagina, niets gebeurt	Het element ontbreekt of de naam erin is aangepast
Een melding over ongeldige gegevens	De code is half geplakt — kopieer ’m opnieuw uit je portaal
Een melding dat de sleutel niet actief is	Je sleutel staat uit; neem contact met ons op
Je zit in de proef en de configurator verschijnt niet op je site	Dat klopt: live zetten op je eigen site gaat met een abonnement. Zie Zo werkt de proef
Het werkt op je testpagina maar niet op je site	Je websitebouwer filtert het <script> weg; gebruik een echt HTML-blok

Kijk eerst met Bekijk zoals je klant hem ziet op de tab Gebruiken, en kijk daarna naar het lampje bij je sleutel. De knop Test ernaast kijkt of je domein klopt, of de software geladen is en of hij zijn instellingen kreeg. Werkt het in je portaal wel en op je eigen site niet, dan zit het probleem in hoe de code op je site geplakt is — niet in je instellingen.