yanıtlyAdd AI-powered live support to your website by adding the Yanıtly web widget. One-line setup, full customization.
Quick Start
Paste the following code right before the </body> tag of your site:
<!-- Yanıtly Web Widget -->
<script
src="https://yanitly.com/widget/embed.js"
data-tenant-id="YOUR_TENANT_ID"
async
></script>You can get your Tenant ID from the Yanıtly panel → Settings → Widget section.
Customization
Use the YanitlyConfig object to customize the widget to match your brand:
<script>
window.YanitlyConfig = {
tenantId: 'YOUR_TENANT_ID',
// Pozisyon
position: 'bottom-right', // bottom-right | bottom-left
// Dil
language: 'tr', // tr | en
// Tema
theme: {
primaryColor: '#6C3AED',
headerTitle: 'Size Nasıl Yardımcı Olabiliriz?',
headerSubtitle: 'Genellikle birkaç dakika içinde yanıt veririz',
welcomeMessage: 'Merhaba! 👋 Size nasıl yardımcı olabiliriz?',
placeholder: 'Mesajınızı yazın...',
poweredByText: 'Yanıtly ile güçlendirilmiştir',
},
// Davranış
behavior: {
autoOpen: false, // Otomatik açılsın mı?
autoOpenDelay: 5000, // Otomatik açılma gecikmesi (ms)
soundEnabled: true, // Bildirim sesi
showUnreadBadge: true, // Okunmamış mesaj rozeti
persistConversation: true, // Konuşmayı kaydet
},
// Başlatıcı buton
launcher: {
icon: 'chat', // chat | support | help
tooltip: 'Bize yazın!',
size: 'medium', // small | medium | large
},
};
</script>
<script src="https://yanitly.com/widget/embed.js" async></script>Custom CSS
You can further customize the widget's appearance with CSS:
/* Widget CSS değişkenleri */
:root {
--yanitly-primary: #6C3AED;
--yanitly-primary-hover: #5B21B6;
--yanitly-bg: #ffffff;
--yanitly-text: #1f2937;
--yanitly-border-radius: 16px;
--yanitly-font-family: 'Inter', sans-serif;
--yanitly-launcher-size: 56px;
--yanitly-z-index: 9999;
}JavaScript API
Use the JavaScript API to programmatically control the widget:
YanitlyWidget.open() Open widget
YanitlyWidget.close() Close widget
YanitlyWidget.toggle() Toggle open/close
YanitlyWidget.isOpen() Check if open (boolean)
YanitlyWidget.setUser(user) Set user info
YanitlyWidget.clearUser() Clear user info
YanitlyWidget.sendMessage(text) Send message programmatically
YanitlyWidget.on(event, callback) Add event listener
YanitlyWidget.destroy() Remove widget
// Özel butona tıklandığında widget'ı aç
document.getElementById('support-btn').addEventListener('click', () => {
window.YanitlyWidget.open();
});
// Belirli bir sayfada otomatik aç
if (window.location.pathname === '/checkout') {
window.YanitlyWidget.open();
}
// Olayları dinle
window.YanitlyWidget.on('open', () => {
console.log('Widget açıldı');
analytics.track('support_widget_opened');
});
window.YanitlyWidget.on('messageSent', (message) => {
console.log('Mesaj gönderildi:', message.text);
});User Identity
Provide personalized support by passing logged-in user data to the widget:
window.YanitlyConfig = {
tenantId: 'YOUR_TENANT_ID',
user: {
// Zorunlu alanlar
externalId: 'user_12345', // Sisteminizdeki kullanıcı ID
email: 'ahmet\u0040example.com',
// Opsiyonel alanlar
name: 'Ahmet Yılmaz',
phone: '+905551234567',
avatar: 'https://example.com/avatar.jpg',
// Özel metadata
metadata: {
plan: 'professional',
company: 'Acme Inc.',
signupDate: '2025-01-15',
orderId: 'ORD-789',
},
},
};Platform Guides
🔌 WordPress
- 1. Go to Appearance → Theme Editor → open footer.php
- 2. Paste the widget code before the </body> tag
- 3. Save the file
Alternative: You can use the "Insert Headers and Footers" plugin.
🛒 Shopify
- 1. Go to Online Store → Themes → Edit
- 2. Open the theme.liquid file
- 3. Add the widget code before the </body> tag
{% if customer %}
<script>
window.YanitlyConfig = {
tenantId: 'YOUR_TENANT_ID',
user: {
externalId: '{{ customer.id }}',
email: '{{ customer.email }}',
name: '{{ customer.name }}',
}
};
</script>
{% endif %}
<script src="https://yanitly.com/widget/embed.js" async></script>⚛️ React / Next.js
// components/YanitlyWidget.tsx
import { useEffect } from 'react';
interface YanitlyWidgetProps {
tenantId: string;
user?: { name: string; email: string };
}
export default function YanitlyWidget({ tenantId, user }: YanitlyWidgetProps) {
useEffect(() => {
// Config ayarla
(window as Window & { YanitlyConfig?: { tenantId: string; user?: { name: string; email: string } }; YanitlyWidget?: { destroy(): void } }).YanitlyConfig = {
tenantId,
...(user && { user }),
};
// Script yükle
const script = document.createElement('script');
script.src = 'https://yanitly.com/widget/embed.js';
script.async = true;
document.body.appendChild(script);
return () => {
script.remove();
(window as Window & { YanitlyConfig?: { tenantId: string; user?: { name: string; email: string } }; YanitlyWidget?: { destroy(): void } }).YanitlyWidget?.destroy();
};
}, [tenantId, user]);
return null;
}
// Kullanım (layout.tsx veya page.tsx)
<YanitlyWidget
tenantId="YOUR_TENANT_ID"
user={{ name: 'Ahmet', email: 'ahmet\u0040example.com' }}
/>Widget Events
open When widget opens
close When widget closes
messageSent When user sends a message
messageReceived When a response is received
ready When widget is loaded and ready
error When an error occurs
unreadCount When unread message count changes
Mobile Support
The widget automatically opens in fullscreen mode on mobile devices. No additional configuration needed.
- Touch-optimized interface
- Fullscreen mobile mode
- Keyboard-compatible input field
- Fast loading (~45KB gzip)