alby-chatbot

Prerequisites

Ensure alby is installed to unlock these elements and elevate your storefront. Learn more here.

Usage

The alby-chatbot component can be embedded in your webpage with various attributes to customize its behavior.

Basic Example

<alby-chatbot
  widget-id="widget-id"   
</alby-chatbot>

Properties

API

The alby-chatbot component provides a comprehensive API for programmatically controlling the chatbot interface.

Methods

Usage Examples

Basic Control

const chatbot = document.querySelector('alby-chatbot');

// Open chat
await chatbot.show();

// Close chat
await chatbot.hide();

// Submit text programmatically
await chatbot.submitText("Hello, I need help with my order");

Example

<button onclick="openChat()">Open Chat</button>
<button onclick="submitQuestion()">Ask Question</button>

<script>
const chatbot = document.querySelector('alby-chatbot');

async function openChat() {
  await chatbot.show();
}

async function submitQuestion() {
  await chatbot.submitText("What's my order status?");
}
</script>

CSS Variables Configuration

The alby-chatbot component can be customized using CSS custom properties (CSS variables). These variables allow you to control the appearance and behavior of the chatbot without modifying the component's internal styles.

Usage

You can set these variables using inline styles on the component:

<alby-chatbot
  style="--alby-launcher-button-color: #007bff; --alby-chat-border-radius: 20px"
></alby-chatbot>

Priority Order

CSS variables follow this priority order (highest to lowest):

1. Inline styles - Set directly on the component element
2. Widget styling - Configured through the Alby dashboard
3. Default values - Built-in component defaults

Available CSS Variables