Website Widget

The ATLA AI widget is a floating chat button in the corner of your page that opens a conversation with the AI employee. Installation takes about a minute: you only need to paste two <script> tags before the closing </body> - no developers or build tooling required.

Every dialogue started through the widget lands in the unified chat center and is handled exactly like a message from WhatsApp, Instagram, or Telegram: the AI employee replies, maintains the customer card in ATLA AI CRM, and hands the chat off to a human operator when needed.

Live example

See the widget in production: myphone.kg.

Step 1. Get your Organization ID

organizationId is the unique identifier of your company in ATLA AI. You can copy it from your dashboard: Settings → Channels → Website Widget.

Step 2. Embed the snippet

Open your site's HTML template (or the PHP file that contains </body>) and paste the following block right before the closing </body> tag:

<script>
  window.AtlaChatConfig = {
    organizationId: 'YOUR_ORG_ID',
    wsUrl:          'wss://ai.atlabyte.com/api/widget/ws',
    channel:        'widget',

    botName:        'My Phone',
    primaryColor:   '#a91111',
    welcomeMessage: 'Hi there! 👋 How can I help?',
  };
</script>
<script src="https://ai.atlabyte.com/static/atlabyte-chat-widget.js"></script>

That's the minimum viable config - the widget already shows up in the bottom-right corner and starts replying to visitors.

Important

The window.AtlaChatConfig object must be declared before the widget script is loaded. If you swap the order of the <script> tags, the widget initialises with default settings.

Full example with every option

<script>
  window.AtlaChatConfig = {
    // — Required —
    organizationId: '40c0ec7d-e27c-4660-ad9b-d4100a970249',

    // — API / WebSocket —
    wsUrl:          'wss://ai.atlabyte.com/api/widget/ws',
    channel:        'widget',
    leadUsername:   'Guest',

    // — Appearance —
    botName:        'My Phone',
    avatarUrl:      'https://example.com/avatar.jpg',
    avatarInitials: 'MP',
    primaryColor:   '#a91111',
    primaryHover:   '#8b0d0d',
    position:       'right',
    zIndex:         99999,

    // — Texts —
    launcherText:   'Chat with us',
    welcomeMessage: 'Hi there! 👋 How can I help?',
    placeholder:    'Type a message...',
    todayLabel:     'Today',
    onlineLabel:    'Online',
    typingLabel:    'typing...',
    errorMessage:   'Something went wrong. Please try again later.',

    // — Branding —
    poweredBy:      'ATLABYTE',
    poweredByUrl:   'https://atlabyte.com',

    // — Quick replies —
    quickReplies: [
      { label: 'In stock?',    text: 'What do you have in stock?' },
      { label: 'Opening hours', text: 'What are your opening hours?' },
      { label: 'Who is on?',    text: 'Who is working right now?' },
      { label: 'Pricing',       text: 'Tell me about your pricing' },
    ],
  };
</script>
<script src="https://ai.atlabyte.com/static/atlabyte-chat-widget.js"></script>

Parameter reference

Required

Parameter	Purpose
organizationId	The UUID of your company in ATLA AI. The widget won't start without it.

API / WebSocket

Parameter	Default	Purpose
wsUrl	wss://ai.atlabyte.com/api/widget/ws	ATLA AI WebSocket endpoint. Only changes in Enterprise installations with a self-hosted server.
channel	widget	Channel label visible in CRM. Use any value to tell apart widgets installed on different sites of the same company (e.g. widget-landing, widget-shop).
leadUsername	Guest	Default visitor name until they introduce themselves. Shown in the operator panel.

Appearance

Parameter	Purpose
botName	Bot name in the chat header.
avatarUrl	URL of the bot avatar. If empty, avatarInitials are used instead.
avatarInitials	1-2 letters shown in place of an avatar.
primaryColor	Brand colour for the launcher, chat header, and bot bubbles.
primaryHover	Hover colour. Auto-derived from primaryColor when omitted.
position	right or left - which corner of the page hosts the launcher.
zIndex	z-index of the widget container. Raise it if other elements on your site sit on top of the widget.

Interface texts

Every label can be overridden to match your language and tone of voice:

Parameter	Default
launcherText	Chat with us (pass '' to keep only the icon)
welcomeMessage	First bot message when the chat opens
placeholder	Hint inside the input field
todayLabel	"Today" separator between messages of different dates
onlineLabel	Status under the bot name
typingLabel	Status while the bot is composing a reply
errorMessage	Message shown when the connection drops

Branding

Parameter	Purpose
poweredBy	Footer caption inside the chat. Pass '' to hide it.
poweredByUrl	Link wrapped around the caption. Defaults to atlabyte.com.

Quick replies

quickReplies is an array of suggestion buttons that appear under the welcome message. Each entry has two fields:

• label - short text shown on the button itself.
• text - the actual message sent to the bot when the visitor taps it.

quickReplies: [
  { label: 'Pricing',       text: 'Tell me about your pricing' },
  { label: 'Opening hours', text: 'What are your opening hours?' },
]

This dramatically shortens time-to-first-answer: the visitor doesn't type, and the AI receives a clear, well-formed query.

What happens after install

• The widget runs 24/7 and starts the dialogue automatically once the visitor opens the chat.
• Every chat appears in the unified panel alongside WhatsApp, Telegram, and Instagram.
• A lead card is created in ATLA AI CRM automatically, with UTM tags, traffic source, and the page the visitor came from.
• If the visitor pastes a product link, the AI follows it and consults specifically on that product.
• A human operator can take over the chat at any moment from the CRM card - see Chat takeover.

Multiple sites under one company

The number of widgets is unlimited. To keep them tidy in CRM, give each one a different channel value - for example, widget-landing for the marketing site and widget-shop for the e-commerce site. Leads and analytics are split automatically.