AI Commerce AgentsDashboard
A

Documentation

Product guide and widget installation

Use this page to understand what each dashboard area does, how the storefront widget is installed, and how to troubleshoot common launch issues for WooCommerce, Shopify, HTML and React/Next.js projects.

Open agentsConnect store

Create an agent for each storefront.

Train it with approved business knowledge.

Install one secure script on the client site.

Dashboard functionality

What each module is for

Agents

Create one assistant per store or client. Each agent has its own API key, knowledge base, widget settings, allowed domains, simulator and analytics.

Knowledge

Upload store context, policies, FAQs, catalog notes and internal answers so the assistant can respond with approved information instead of guessing.

Widget studio

Customize brand name, greeting, launcher text, colors, chat bubbles, header, position and language. The preview updates before you publish.

Simulator

Test shopper questions before going live. Use it to validate refunds, shipping, product recommendations, edge cases and handoff behavior.

Integrations

Connect WooCommerce or Shopify so the assistant can work with product and catalog context instead of static support copy only.

Analytics

Review conversations, usage and friction signals. Use the data to spot missing answers, shopper objections and opportunities to improve the store.

Allowed domains

Limit where each widget can load. This prevents a leaked script from being reused on unapproved domains or client sites.

API key rotation

Rotate a widget key from the install screen if a snippet is exposed, a client contract ends or you want to revoke previous access.

Installation

Publish the widget

  1. Step 1

    Create or open an agent

    Go to Agents, choose the store/client assistant, then review its knowledge, widget style and allowed domains.

  2. Step 2

    Copy the embed snippet

    Open the agent Install screen and copy the generated script. The snippet stays stable when you update widget settings.

  3. Step 3

    Paste before the closing body tag

    Use the footer/custom HTML area in WordPress, Shopify, Webflow or any site builder. In custom HTML, paste it before </body>.

  4. Step 4

    Verify and monitor

    Open the storefront, send a test message, then check analytics and simulator results before handing the store to the client.

Standard HTML, WordPress, Shopify or Webflow

Paste the generated snippet into the footer, theme custom HTML, tag manager or immediately before the closing body tag.

<script async src="https://agentes.elsaltoweb.es/api/widget?key=YOUR_AGENT_KEY"></script>

Next.js example

In React and Next.js, load the script with the framework loader instead of placing a raw script tag inside JSX.

import Script from "next/script";

export function WidgetScript() {
  return (
    <Script
      src="https://agentes.elsaltoweb.es/api/widget?key=YOUR_AGENT_KEY"
      strategy="afterInteractive"
    />
  );
}

Troubleshooting

Common issues

Widget does not appear

Check that the script is installed once, the agent key is active and the current domain is allowed.

Browser console shows 403

The domain is not authorized. Add the exact domain or a wildcard such as *.example.com.

React or Next.js throws a script error

Do not paste the raw script inside JSX. Load it with a framework script loader.

The style did not update

Refresh the storefront and confirm the settings were saved on the agent widget screen.

Contact supportRead academy