Public Chat (Link or Website)

What it is

The Public Chat is the simplest way to put the agent to work. You can share a link that opens the chat in any browser or paste a code snippet on your website to show the chat balloon on its pages. Any visitor can chat, with no login and no server changes.

1. When to use

Use Public mode when you want:

• Anyone who visits the website or opens the link to be able to start a conversation;
• Installation to be just copying and pasting a code snippet, with no server changes;
• The chat to show up as a floating balloon or inside a fixed area of the page.

2. Creating the connection

1. Open the project, click AI Agent Robots in the side menu and open the agent.
2. Click the Channels tab.
3. Click Add channel. If the agent doesn’t have any connections yet, the list of channels shows up right away.
4. In the Web group, choose one of the options and click Select:
   • Public link: a link that opens the agent in any browser;
   • Website embed: the chat balloon inside your website.
5. In Destination and access, leave Access mode set to Public and click Continue.
   • If the project already has a connection of this type, it shows up in this step. Choose Create another connection to make a new one, or select the existing one to open it.
6. In Configuration, fill in:
   • Connection name: an internal name so you can recognize it later, like “Company website”;
   • Allowed domains (optional): the websites where the chat can run, one per line. See section 6.
7. Click Create connection.

The “Connection created” screen shows the Bot link and the code to install on a website, both ready to copy. Public link and Website embed create the same type of connection, so you can use the link and the code at the same time.

⚠️ Heads up: creating the connection doesn’t publish a version of the agent. Until a version is published, the chat answers with the current draft. See how to publish in Your First Agent.

3. Installing on the website

Paste the installation code before </body> on every page where the chat should appear. Then reload the website and check for the balloon in the corner of the page.

The code looks like this:

<!-- Caramelo AI chatbot -->
<script src="https://static.carameloai.com/sdk/latest/client.js"></script>
<script>
  window.CarameloChatbot
    .create({
      publicApiKey: 'ct_...',
      project_id: 'SEU_PROJECT_ID'
    })
    .start();
</script>

To find the code later, open the connection with Manage, go to Installation and pick Website code.

3.1 Understanding each field in the code

If you turn on attention retention or delayed loading, the code gets the matching parameters.

💡 Tip: the code shown on the platform reflects the saved connection. Make your changes, click Save and only then copy the code.

📌 Already installed with the old code? If your website uses the previous format, with var carameloaiChatbot and the prod/index.js script, it keeps working. You don’t need to change it.

3.2 Testing without installing anything

Open the Bot link in your browser. It shows the agent working, so you can check the conversation before pasting the code on your website.

4. How everything connects

┌─────────────────────┐                        ┌──────────────────────┐
│  Visitor opens      │   1. page loads        │  Your website        │
│  your website       │ ─────────────────────▶ │  (chat script        │
└─────────────────────┘                        │  pasted in the HTML) │
                                               └──────────┬───────────┘
                                                          │ 2. script creates an
                                                          │    anonymous ID for the visitor
                                                          ▼
                                               ┌──────────────────────┐
                                               │  Caramelo API        │
                                               │  → validates the     │
                                               │    public key        │
                                               │  → creates the       │
                                               │    conversation      │
                                               └──────────┬───────────┘
                                                          │ 3. chat available
                                                          ▼
                                               ┌──────────────────────┐
                                               │  Chat balloon in     │
                                               │  the screen corner,  │
                                               │  ready to use        │
                                               └──────────────────────┘

In summary:

1. The visitor opens a page on your website;
2. The chat script loads and creates an anonymous identifier for that browser;
3. The platform validates the public key and opens the conversation;
4. The chat balloon shows up in the corner of the screen.

5. How the visitor is identified

Unlike Intranet mode, there’s no login here. The platform automatically generates an anonymous ID (for example, user-a1b2c3...) that is saved in the visitor’s browser.

📌 Need to know who the visitor is? You can set up the agent to ask for details (name, email, phone) during the conversation. If your website has a logged-in area and you want the identity guaranteed by your system, the right mode is Intranet (authenticated access). See the dedicated guide.

6. Adjusting the connection

To change the connection later, open the Channels tab, find the connection under Your connections and click Manage. The page has three sections:

What each Advanced option does:

• Render inside a fixed container: instead of floating, the chat shows up inside an area of your page. After saving, copy the Container element from Installation and paste it at the spot on the page where the chat should be:

  <div id="chatbox_CONNECTION_ID"></div>
  

• Attention retention: after some time without interaction (10 seconds by default, adjustable in Retention seconds), the browser tab draws attention and the chat glows so the visitor comes back;

• Delayed loading: the chat doesn’t show up right away. It only loads after the time set in Delay seconds;

• Allowed domains: one domain per line. example.com also allows app.example.com. With an empty list, the chat runs on any website.

⚠️ Heads up: attention retention and delayed loading don’t work together. Turning one on turns the other off.

After making changes, click Save at the bottom of the page. Saving only changes the connection and doesn’t publish a version of the agent.

7. Removing the chat from a website

Open the connection with Manage. At the end of the Settings and Advanced sections is the Danger zone: click Delete connection. Deleting is permanent, and the link and any codes already installed stop working right away. Then remove the code from your website.

8. Frequently asked questions