Putting the contact form on your website

Your Aigento contact form has its own page, linked under Settings →
Channels → Hosted pages → Contact page. You can also show the
same form inside a page of your own website, such as your Contact page.
Messages sent from it arrive in Aigento as contact form tickets, the same as
messages sent from the contact page.

The form runs through a website widget, which decides which websites may
show it.

Before you start

You need a website widget that lists your site's address.

1. Go to Settings → Channels → Add it to your site → Websites.
2. If you have none yet, the form to add one is already open; otherwise click
   Add a website. Enter your site's address under Your website
   address, for example example.com. Aigento fills in Name from it,
   example in this case; change it if you like, then click Add website.

Aigento saves the address with https:// and without any path, so
example.com/contact becomes https://example.com. https://example.com
and https://www.example.com are different addresses, so when you enter one
of them Aigento adds the other as well. If your site does not answer on it,
remove it before you click Add website.

The widget's conversations are grouped under its name. If that name is
already in use, Aigento adds a number, like example (2).

Each widget shows as one row with its name, its main address and its status:
Live · seen and when, Not seen yet until a page with its snippet
loads, or Off. Edit on the row opens it: that is where you add more
addresses (Addresses → Manage) and copy the snippets. The row's ⋯ menu
renames the widget (Rename) or deletes it (Delete). Deleting a widget
stops its snippet from working on your site right away. Its conversations and
tickets stay in Aigento, and you can't undo it.

Preview sites: wildcard addresses

If every version of your site gets its own address, such as
https://preview-new-contact.example.com, you can add one wildcard entry for
all of them instead of each in turn: https://*.example.com. Open the widget
with Edit, click Manage beside Addresses and add it under
Allowed addresses.
It covers any address with one extra part in front of example.com, so it covers
https://preview-new-contact.example.com and https://www.example.com, but
not https://example.com itself (add that separately) and not
https://a.b.example.com. It works only with https://, and only on a domain
you own: https://*.vercel.app or https://*.co.uk are refused.

Aigento shows a warning under such an entry. Any address under that domain can
show the form, so remove DNS records that point at services you no longer use.

Add the form to a page

1. Go to Settings → Channels → Add it to your site → Websites and click
   Edit on the website widget the page belongs to.
2. Click Add to website, choose Contact form and click Copy
   snippet.
3. Paste the snippet into your page's HTML where the form should appear.

The snippet has two lines. The first,
<div data-aigento-contact-form></div>, marks where the form goes. The
second is the website widget's script with data-aigento-launcher="off", so
the page shows the form and no chat button.

To show the chat button on the same page, add the widget's chat snippet as
well, or paste only the first line on a page that already has it. A page shows
the chat button unless every Aigento script on it has
data-aigento-launcher="off".

A form snippet copied before this attribute existed also shows the chat
button. Copy the snippet again to hide it.

What visitors see

The same fields as the contact page: email, name (optional), subject and
message. After sending, they see Message Sent! and a short thank-you.
You reply from the ticket, and your reply reaches them by email.

The greeting, the description and the accent colour come from the contact
page settings (Edit beside Contact page under Hosted pages). The
embedded form always sends a message; it does not open a live chat, even when
After sending, continue as a chat is on.

Match your site's look

The form uses your page's font by default. Your site's stylesheet cannot
otherwise change the form, so a theme update will not break it. To match your
design, set any of these on the first line of the snippet:

<div
  data-aigento-contact-form
  style="--aigento-accent: #e11d48; --aigento-radius: 4px; --aigento-font: Inter, sans-serif"
></div>

• --aigento-accent: the button and highlight colour. Without it, the form
  uses the accent colour from your contact page settings.
• --aigento-radius: how rounded the fields and the button are. The default
  is 8px.
• --aigento-font: the font. The default is your page's font.

Spam

Aigento quietly drops messages sent by automated tools, without creating a
ticket, and limits how many messages one visitor can send in a short time.

If the form does not appear

• Check the address. The page must be on an address the website widget
  lists, matching exactly or under a https://*. entry. Add to website
  shows a warning under the snippet when the widget has no addresses or is
  switched off.
• Check the placeholder. The data-aigento-contact-form line must be in
  the page's HTML when the page loads. A form placeholder that your site's own
  scripts add later is not picked up.