Widget Customization

<script
  src="https://widget.chatoura.com/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-primary-color="#6366F1"
  async
></script>

<!-- Bottom right (default) -->
<script ... data-position="bottom-right"></script>

<!-- Bottom left -->
<script ... data-position="bottom-left"></script>

<script
  src="https://widget.chatoura.com/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-auto-open="true"
  data-delay="3000"
  async
></script>

// Open the widget
window.Chatoura.open();

// Close the widget
window.Chatoura.close();

// Toggle open/closed
window.Chatoura.toggle();

// Send a message from the user
window.Chatoura.sendMessage('Hello!');

// Widget opened
window.Chatoura.on('open', () => {
  console.log('Widget opened');
});

// Widget closed
window.Chatoura.on('close', () => {
  console.log('Widget closed');
});

// Message received
window.Chatoura.on('message', (message) => {
  console.log('New message:', message);
});

window.Chatoura.setUser({
  name: 'John Doe',
  email: '[email protected]',
  phone: '+1234567890'
});

<button onclick="window.Chatoura.open()">
  Chat with us
</button>

document.getElementById('chat-button').addEventListener('click', () => {
  window.Chatoura.open();
});

// Only load on specific pages
if (window.location.pathname.includes('/support')) {
  loadChatWidget('YOUR_AGENT_ID');
}

// Only load for logged-in users
if (isUserLoggedIn()) {
  loadChatWidget('YOUR_AGENT_ID');
}

// Load after user interaction
document.getElementById('help-button').addEventListener('click', () => {
  loadChatWidget('YOUR_AGENT_ID');
  window.Chatoura.open();
});

<script
  src="https://widget.chatoura.com/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-hide-button="true"
  async
></script>

<button onclick="window.Chatoura.open()">
  Need help?
</button>

<script ... data-mobile-fullscreen="true"></script>

// Different behavior on mobile
if (window.innerWidth < 768) {
  // Mobile-specific logic
  window.Chatoura.on('open', () => {
    document.body.style.overflow = 'hidden';
  });
}

const agentId = getAgentForPage(window.location.pathname);
loadChatWidget(agentId);

function getAgentForPage(path) {
  if (path.includes('/sales')) return 'sales-agent-id';
  if (path.includes('/support')) return 'support-agent-id';
  return 'default-agent-id';
}

window.Chatoura.setContext({
  page: window.location.pathname,
  product: 'Premium Plan',
  referrer: document.referrer
});