# Web chat: how to install it

> Put your Atenta receptionist on your own website with one line of code or the WordPress plugin. Steps for WordPress, Shopify, Tiendanube, Wix, Squarespace, Webflow, Google Tag Manager and your own site.

The web chat puts your Atenta receptionist inside your own website: a chat button appears at the bottom right, your visitors write there and Atenta answers from the same knowledge base, just like on WhatsApp. Every conversation reaches **Chats** in your app, marked as web; you can take over whenever you want and anything Atenta doesn't know is passed to you. It also appears on [Your page](https://atenta.mx/en/docs/tu-pagina).

## Before you start

1. In your app, **Settings → Your page**: choose your page name (for example `my-business`). That name is your business code.
2. In **Settings → Web chat**: turn the web chat on and copy your code.

## Your code

It's a single line. It goes once, on every page, right before `</body>`:

```html
<script src="https://atenta.mx/chat.js" data-negocio="my-business" async></script>
```

- `data-negocio`: your business code (required).
- `data-idioma`: `es`, `en` or `pt` to fix the language; without it, the chat uses your website's language.
- `data-posicion="izquierda"`: puts the button at the bottom left.

The script is under 6 KB with gzip and defers loading the window until someone taps the button. It uses no third-party cookies or tracking; to remember the conversation it stores a random identifier for that business in the visitor's browser, never the messages. The server uses the IP address to limit abuse.

## Step by step by platform

### WordPress (with the plugin)

1. Download the plugin [atenta-chat.zip](https://atenta.mx/en/descargas/atenta-chat.zip).
2. In WordPress: **Plugins → Add New → Upload Plugin** → choose the .zip → **Install Now** → **Activate**.
3. **Settings → Atenta Chat** → type your business code and save. You can also choose the language and the button's side there.

### Shopify

1. **Online Store → Themes** → “…” on your current theme → **Edit code**.
2. Open `layout/theme.liquid` and paste your code right before `</body>`.
3. Save and open your store.

### Tiendanube

1. On a supported plan, link your GTM ID in **Settings → External codes → Google Tag Manager**.
2. In GTM create a **Custom HTML** tag with your Atenta code and the **All Pages** trigger.
3. Save, submit and publish the container. Check your storefront; checkout blocks Custom HTML.

The old tracking fields were retired. [Tiendanube's GTM guide](https://ayuda.tiendanube.com/google-ads/como-instalar-google-tag-manager-en-mi-tiendanube).

### Wix (paid plan)

1. Publish the site and connect your domain. Open **Settings → Development & integrations → Custom Code**.
2. Add your code to **All pages**, once per visit, at **Body - end**.
3. Apply and check your published site. [Wix help](https://support.wix.com/en/article/embedding-custom-code-on-your-site).

### Squarespace (paid plan)

1. Open **Code Injection** on a Core, Plus, Advanced or compatible legacy plan.
2. Paste your code in **Footer**.
3. Save and check your site; this does not apply to checkout. [Squarespace help](https://support.squarespace.com/hc/en-us/articles/205815908-Customize-parts-of-your-site-with-code-injection).

### Webflow (paid plan)

1. **Site settings → Custom code**.
2. Paste your code in **Footer code**.
3. Save and publish.

### Google Tag Manager

1. **Tags → New → Tag Configuration → Custom HTML**.
2. Paste your code and pick the **All Pages** trigger.
3. Save, submit and publish the container.

If your installation loads the script without attributes (for example, a GTM template), define the configuration **before** loading it:

```html
<script>
window.AtentaChatConfig = {
  negocio: 'my-business',
  idioma: 'en',
  posicion: 'derecha'
};
</script>
<script src="https://atenta.mx/chat.js" async></script>
```

`negocio` is required; `idioma` accepts `es`, `en`, `pt`, and `posicion` accepts `izquierda` (left) or `derecha` (right). Each present `data-*` attribute overrides its matching global field, even when empty: `data-negocio=""` or an invalid code prevents the chat from mounting, even with a valid global value. An invalid language falls back to the page language, then the browser and finally Spanish; an invalid position keeps the button on the right.

Configuration is read once per script load. Later changes do not move or change the chat. Do not put visitor information or keys in it. Install one tag per page and check the button in GTM Preview and on your site. This compatibility does not mean a template is published or approved in Gallery.

### Your own site

1. Open the template or HTML shared by all your pages.
2. Paste your code before `</body>`.
3. Publish the changes.

## Check it's there

In **Settings → Web chat → Check installation** type your website address: Atenta checks the page and tells you whether it found your code, another business's code, or nothing. If you installed it with Google Tag Manager, the code doesn't show in the HTML: open your site and look for the button.

## What your visitor sees

- “You're talking to *your business*'s receptionist” and, before the first message, a short notice with the [privacy notice](https://atenta.mx/en/privacidad).
- Messages up to 300 characters. If they write too fast, the chat asks them to wait a few seconds; if they reach the hourly limit, it tells them how long is left.
- If you hand the conversation to a person on your team, the chat says so and your reply arrives right there.
- Turning chat off removes the button from Your page. On external sites the button remains, but trying to send shows that chat is unavailable; it offers WhatsApp if the public profile includes it.

## Security

The visitor's browser never talks to the engine directly: the chat window lives on Atenta and every message goes through Atenta's server, which signs it. Your website stores no key. **Allowed domains** (in Settings → Web chat) is only needed if a developer connects your site directly to the chat API.

## Is someone else installing it?

**Settings → Web chat → Send instructions to my developer** opens your email (or your phone's share menu) with your code and a link to this guide.