Your first agent, step by step

The first agent a workspace makes opens on a guided setup: one page, one step at a time, from reading your site to the chat on it. Every step can wait. Later leaves a step for later, Back returns to the one before, and Go to the dashboard leaves the setup at any point. Until the agent is on a site, the steps at the top of its pages lead back to the step you left. A later agent offers the same setup there, as Guided setup.

1. Read your site#

The agent starts reading your site as soon as it is made, and the setup lists the pages it read. A site that gave 3 pages or fewer is said so plainly, because that is little to answer from, with what to add: another page's address, a file such as a brochure or a price list, or a text. Without a website, those three come first.

Continue opens once one page or file is ready. Websites explains what the reader takes and what it skips.

2. Instructions and tone#

• Instructions: the agent starts from instructions for the use you chose on the create form. Read them and change what does not fit: who it speaks for, what it helps with, how it sounds, when it points to a person. Facts belong in sources, not here. Writing instructions.
• First message: what the chat says before the visitor types anything, in the agent's main language. The other languages are under Settings.
• Where visitors go when the agent does not know: an e-mail address, a phone number or a page. The agent then shows it as a button. Once it is set, the setup says where it leads, and you change it under Actions.

Your changes are saved when you choose Continue. To try the agent first, the setup opens the Playground in a new tab.

3. Choose the AI model#

The model writes every answer from what the agent read. The setup shows each one as a card: who makes it, what an answer costs in credits, and whether it reads the pictures a visitor sends. The one your plan starts a new agent on is marked Recommended. On Free the dearer models stay locked: each says the plan that unlocks it, and the workspace owner gets a link to the plans. Your choice is saved when you leave the step, and you change it later under Settings or in the Playground. Models and credits.

4. Test it#

The agent's own chat, as a visitor sees it, with Questions to try: those a visitor asks an agent made for the use you chose, and a last one it should decline politely. Type your own as well. Under each answer, Improve answer lets you correct it: the better answer is kept as a question and answer under Sources and used from then on (Improving your answers). Questions asked here are kept under Activity as tests, apart from your visitors' conversations. The step is done after the first answer, here or in the Playground, which offers the same questions and Improve answer.

5. Look and branding#

The look a visitor sees, with the widget beside it as it will sit on your page: the Primary color, the Logo at the top of the chat, the button that opens it (its Position, its Icon, or a Launcher image of your own) and the Greeting, a short message above the button. An image you upload is kept at once; the rest when you leave the step, by Continue, Back or Later. The name in the header, fonts, the theme and the second message are under Settings, and the setup links there. Appearance, Greeting and nudge.

6. Put it on your site#

Choose what your site is made with, and the setup shows the steps for it with the code to paste. The code is the same everywhere; only where it goes differs. Install the widget explains what it does to your page.

For the builders that take the code on your own pages, all but Google Sites and Gamma, the setup lists your site's address under Allowed domains, so that no other site can show your agent: the address it read, the same with or without www. for a domain of your own, and over https:// too when it was read over http://. It does this only when nothing is listed yet and the agent has not been seen on a site. If the chat is then turned away on another address of the same site, such as www. or a subdomain, the setup says so and offers a button to allow that address. Any other address you add yourself under Allowed domains. Allowed domains.

While this step is open, the setup checks every few seconds whether the chat has been seen on your site: open a page of your site once. The code for a box on the page (an iframe) shows no button, so that one is seen at its first question.

Buttons are named below as these tools' own English help pages name them; in another language your screen shows them in that language.

WordPress#

1. To show the chat on every page, add the code to the footer of every page with a plugin that adds code to headers and footers, or ask whoever built your site to put it in your theme's footer.
2. For one page only, open that page in the editor, add a Custom HTML block and paste the code into it.
3. On WordPress.com, scripts work only on a plan with plugins, once its hosting features are switched on.

The ChatterLab plugin for WordPress is not offered here until it is in the plugin directory.

Wix#

1. Your site has to be published and connected to a domain of its own.
2. In your site's dashboard, open Settings, then Custom Code under Development & integrations.
3. Click + Add Custom Code, paste the code and give it a name, such as ChatterLab.
4. Under Add Code to Pages choose All pages, and under Place Code in choose Body – end.
5. Click Apply, then open a page of your site.

Squarespace#

1. Code injection is part of the Core, Plus and Advanced plans, and of some older ones.
2. Open Pages, then Website Tools, then Code Injection.
3. Paste the code into the Footer field: it goes before </body> on every page.
4. Click Save, then open a page of your site.

Shopify#

1. Editing a theme's code works once the theme is yours: a paid theme still on trial has to be bought first. A theme update can remove the change, so note where you pasted it.
2. In your Shopify admin, go to Online Store, open the … menu beside your theme and choose Edit code.
3. Open theme.liquid in the layout folder: every page of your shop uses it.
4. Paste the code just before </body>, save, then open a page of your shop.

Webflow#

1. Custom code needs a Core, Growth, Agency or Freelancer Workspace, or a paid Site plan.
2. Open Site settings, then the Custom code tab.
3. Paste the code into the Footer code section, which goes before </body> on every page, and click Save changes.
4. Publish your site, then open one of its pages: custom code only runs on the published site.

Google Sites#

Google Sites takes code only as an embed: the chat sits in a box on the page, without the button in the corner. That is why you paste the iframe code here.

1. Open your site in Google Sites, on a computer.
2. At the right, click Insert, then Embed, and choose Embed code.
3. Paste the iframe code, click Next, then Insert.
4. Click Publish, at the top right.

Gamma#

Gamma has no place for code on every page. There are two ways.

In a box on one card:

1. In a gamma made in Gamma 5, add a Custom HTML block to the card where the chat should be.
2. Paste the iframe code into it. If the chat does not show, turn on Interactive.
3. Publish your site.

As a button on every page, through Google Tag Manager:

1. In Google Tag Manager, make a container for your site and add a tag that runs the code on all pages. Publish it.
2. Copy the container's ID, which starts with GTM-.
3. In Gamma, open your site, click the three-dot menu at the top right and choose Site Settings.
4. On the Settings tab, paste the ID into the Google Tag Manager ID field, save, and publish your site.

By hand#

1. Paste the code just before </body> on every page where the chat should appear.
2. In most site builders that is a box called custom code or footer code: once there, it is on every page.

7. It is live#

Once the chat has been seen on your site, the last step says so and what to do next: read what visitors ask under Activity, and improve answers from the Overview (Improving your answers). Collecting visitors' details and opening a ticket when a person is needed come with Starter and up (Leads, Tickets). Choosing Continue on the step before completes the setup, and the steps at the top of the agent's pages go once the agent is on a site.