Installing the Netcoder contact form on your website

The Netcoder contact form goes on any website with a few lines of HTML. Visitors write, and your AI agent answers them by email within minutes.

1. Installation

Add an empty element where the form should appear, and the following script tag just before the closing </body> tag of the page. Replace the placeholder values with your keys.

<div id="nc-form"></div>
<script src="https://cdn.netcoder.com/form.v1.js"
        data-backend-url="https://chatrelay.netcoder.ca/webform"
        data-client-key="YOUR-CLIENT-GUID"
        data-agent-key="YOUR-AGENT-GUID"
        data-language="en"
        data-container="#nc-form"></script>

The simplest way to get it is from the Netcoder app: open your AI agent, then Test & Deploy, and the code icon of Test Form. The code is shown with your keys already filled in, ready to copy.

Your AI agent needs a Web Form channel, and an email channel to answer from: both are set up with Netcoder.

2. Configuration parameters

Set on the script tag.

Attribute	Required	Description	Default
data-backend-url	Yes	Address of the Netcoder relay: https://chatrelay.netcoder.ca/webform
data-client-key	Yes	Your client key
data-agent-key	Yes	The key of your AI agent
data-language		en or fr: the labels of the form	en
data-phone		visible, required or hidden	visible
data-company		visible, required or hidden	visible
data-title		Title above the form
data-container		CSS selector of the element to draw the form in	Before the script
data-accent-color		Colour of the button	#D97955
data-accent-text-color		Colour of the text of the button	#FFFFFF

3. How it works

• The visitor gives a name, an email and a message; the phone and the company are optional, required or not asked, as data-phone and data-company say.
• The form is sent to Netcoder as soon as it is posted, and the visitor is thanked at once.
• Your AI agent answers by email, usually within minutes, in the language the visitor wrote in.
• An agent whose job is to sell also adds the visitor to your contacts.
• A second message from the same email address continues the same conversation.

4. Styling with CSS

For more than the button colours, style the form from your own stylesheet. Start your selectors with body to win, rather than using !important.

body .ncf-primary { padding: 12px 28px; }

Selector	What it is
.ncf	The form
.ncf-title	The title
.ncf-field	A label and its field
.ncf-primary	The send button
.ncf-status	The messages under the button

5. Testing and troubleshooting

• Test before you install — Test Form, under Test & Deploy in the app, sends a real message: you receive the answer of the agent by email.
• “Invalid configuration” — a key is missing or malformed. Copy the code from the app.
• No answer by email — check your spam folder, then that the agent has an email channel.
• Any domain works — nothing needs to be configured on your server.