Adding Neon Studio to your site

The Neon Studio configurator runs on your own website, in your own branding. You paste a small piece of code on the page where it should appear. Nothing else — no plug-in, no account for your visitor, no server at your end.

Where do you find your code?

In your portal at app.mark2form.com: open your software under My software, go to the Use it tab and click Connect. Choose On my website; if you have more than one key, you then choose which website it is for. Under Paste this code on your page is your code, with the Copy the code button, and below it you enter your site’s address. Rather go step by step, per website? Under More explanation is Connect step by step.

During your trial there is no Connect yet: you put the configurator on your own site with a subscription.

The code is two parts:

• An element that the configurator goes into. Put it exactly where you want it on the page.
• A script that places the configurator in that element.

Roughly, it looks like this:

<!-- Sketch. The real code, with your key in it, is in your portal. -->
<the-element-from-your-portal></the-element-from-your-portal>
<script defer src="<the-script-from-your-portal>"></script>

So always take the code from your portal and not from this article: the portal has the version that is correct today. See also SDK and API for what the SDK does and does not do.

Pasting: three things that must be right

1. Copy the code literally. Use the button in your portal; do not retype it.
2. Leave the name in the element as it is. The script looks for exactly that name. Invent your own and the script cannot find the spot, so your page stays empty.
3. Both parts on the same page. The element may sit halfway down the page and the script at the bottom — as long as they are on one page together.

In WordPress, Shopify, Wix or Squarespace you paste this into a block called “HTML”, “Custom HTML” or “Code”. A plain text editor strips the <script> out, so that one will not do.

How tall does it get?

By itself. The configurator measures itself and passes its height to your page, so it grows and shrinks with what your customer does. You do not set a height. The width is always 100% of the room you give it.

Want something around it — a border, a maximum width, some air — then put that on your own element.

Neon Logo and Neon Text

Neon Studio has two products, each with its own price tiers and its own subscription: Neon Logo (your customer uploads a file) and Neon Text (your customer types). Each product is listed separately under My software, with its own code on its own Use it tab: the key in that code belongs to that one product. Want both on your site? Then paste each product’s code on the page where it should appear. See also Setting up Neon Text.

Your key: what is it, and how secret is it?

The key in the code is your public key. It belongs on your website — all it says is “this visitor belongs to this company”, so the configurator loads your prices, colours and logo.

What it cannot do: get into your portal, view your orders or change anything. That needs a login. The secret key for the Production API is a different key, and it never belongs on a web page.

If you would rather nobody pasted your public key on their own site, record which web addresses it may work on: while connecting, or later on the Use it tab under Manage keys, at Allowed domains. Everywhere else it does nothing. While that list is empty, it starts on any domain: handy for testing, but add your own domains before you go live.

You never have to paste the code again

This is the most important sentence in this article: changes to your settings are live immediately. Different prices, a new colour, another button label — you save it in your portal and your site shows it right away. The code on your site never changes.

The one exception: when you renew your key, with Renew key under Manage keys on the Use it tab. The old key stops working straight away, and your site will not show the configurator again until the new code is on it. So only do that if you think your key has leaked.

Nothing appears — now what?

What you see	What is usually going on
Empty page, nothing happens	The element is missing or its name was changed
A message about invalid parameters	The code was half pasted — copy it again from your portal
A message that the key is not active	Your key is switched off; get in touch
You are on the trial and the configurator does not appear on your site	That is right: putting it live on your own site comes with a subscription. See How the trial works
It works on your test page but not on your site	Your site builder strips the <script>; use a real HTML block

Look first with See it the way your customer does on the Use it tab, then look at the light next to your key. The Test button next to it checks whether your domain is right, whether the software loaded and whether it received its settings. If it works in your portal and not on your own site, the problem is in how the code was pasted — not in your settings.