Getting Started
Integrate AgentUriel into your website in just a few minutes. Our widget is lightweight, customizable, and works on any website.
Quick Start
- 1Sign up for an account and get your API key from the dashboard
- 2Copy the widget code and paste it into your website
- 3Replace YOUR_API_KEY with your actual API key
- 4That's it! The agent will appear on your website
Installation
Add the following script tag to your website, preferably just before the closing </body> tag:
<script
src="https://agenturiel.com/api/widget/script.js"
data-api-key="YOUR_API_KEY"
data-agent="sale"
data-position="bottom-right"
data-theme="normal"
data-require-consent="false"
></script>Important: API Key
Your API key will be provided after you purchase a plan. Each API key is unique to your account and should be kept secure. You can find your API key in the dashboard under Settings → API Keys.
Configuration
Customize the agent behavior using data attributes:
| Attribute | Description | Default |
|---|---|---|
data-api-key | Your unique API key (required) | - |
data-agent | Which agent type the API key belongs to: "sale", "order", "information" or "appointment". | sale |
data-position | Widget position: bottom-right, bottom-left | bottom-right |
data-theme | Visual theme of the widget: "normal" (bold shadows), "business" (clean & minimal) or "playful" (round & colorful). Overrides the theme configured on the agent. | agent's configured theme (normal) |
data-require-consent | Set to "true" only if you confirm that all your visitors will accept the GDPR cookie consent on your site (your cookie banner / GDPR compliance is your responsibility). When "true", the widget tracks visitor activity for sales analytics. When "false" or omitted, no visitor tracking occurs. | false |
data-hide-fields | Comma-separated list of product-card detail fields to hide, so you only list the ones that are redundant for your shop — e.g. data-hide-fields="condition" for a shop that only sells new items. Hideable fields: "stock" (quantity), "condition" (product state, e.g. new/used) and "description". The name, price, image and Add to cart button are always shown and cannot be hidden. | all fields shown |
Widget themes (data-theme)
normal— the default look — bold offset shadows and strong borders.business— clean and minimal — soft shadows, lighter borders, smaller corner radii.playful— round and colorful — violet-pink gradients, pill-shaped input, bouncier animations.
You pick the theme when creating or editing the agent (with a live animated preview). Setting data-theme on the script tag overrides that choice per page. Custom branding colors apply on top of any theme.
Product-card fields you can hide (data-hide-fields)
List any of these, comma-separated, to hide them on the product cards:
stock— the available quantity.condition— the product state (e.g. new or used).description— the product description.
The product name, price, image and Add to cart button are core and are always shown — they cannot be hidden. If data-hide-fields is not set, all fields are shown.
Example with all configuration options:
<script
src="https://agenturiel.com/api/widget/script.js"
data-api-key="YOUR_API_KEY"
data-agent="sale"
data-position="bottom-right"
data-theme="normal"
data-require-consent="false"
></script>Advanced Customization
For more advanced use cases, you can use the JavaScript API to have full control over the agent:
<script>
window.SaleAgentAI = {
apiKey: "YOUR_API_KEY",
position: "bottom-right",
// Callback functions
onOpen: function() {
console.log("Chat opened");
},
onClose: function() {
console.log("Chat closed");
},
onMessage: function(message) {
console.log("New message:", message);
}
};
</script>
<script src="https://agenturiel.com/api/widget/script.js"></script>JavaScript Methods
- SaleAgentAI.open() - Open the chat widget
- SaleAgentAI.close() - Close the chat widget
- SaleAgentAI.toggle() - Toggle the widget state
- SaleAgentAI.sendMessage(text) - Send a message programmatically
Event Callbacks
- onOpen - Called when the widget opens
- onClose - Called when the widget closes
- onMessage - Called on each new message
- onReady - Called when the widget is loaded
Greeting Cloud Bubble
A small speech bubble that pops next to the closed chat button so visitors see a personalized greeting before they click. It fades out when the chat opens and reappears with a small bounce when the chat closes.
Fields
- Show cloud bubble - turns the bubble on or off.
- Bubble text - up to 100 characters.
- Position - Left or Right of the chat button (independent of the widget's data-position attribute).
Configure on the branding row
Open Settings then Branding, edit your brand, toggle Show cloud bubble, enter your greeting (up to 100 characters), pick Left or Right, save, then make sure your agent has its branding toggle enabled.