Advanced configurations

Quack AI Widget: Advanced Customization & JavaScript API Reference

This guide explains how to customize your Quack AI chat widget with CSS overrides and JavaScript APIs for advanced embedding, styling, and event handling.

---

1. CSS Customization

1.1 Widget Root Position

Override the default position of the chat widget:

.quackchat-root {
  bottom: 60px !important;
  right: 60px !important;
}

• Adjusts the floating position of the chat widget.

• Use !important to ensure your override takes priority.

💡 Pro Tip: You can use top and left instead, depending on your desired layout.

---

1.2 Custom Font Family

Override the chat widget’s font for seamless brand alignment:

.qc-themes {
  --qc-font-family: "Bytesized", sans-serif !important;
}

• Sets a custom font family for all Quack AI chat widget text.

• Use your own font or any web-safe font stack.

---

2. JavaScript API

2.1 Programmatically Open/Close the Chat

Trigger chat visibility using window.postMessage:

// Opens the chat
window.quack.expandChat()

// Closes the chat
window.quack.minimizeChat()

• Useful for opening the chat after specific user actions or closing it programmatically.

• Works across all major browsers with embedded widgets.

---

2.2 Identify Users in Session

Associate user information with the current chat session:

window.quack.identify({
  email: "[email protected]",
  id: "123",
  // ...any other user fields
});

• Call after user authentication or profile update.

• Accepts any key-value pairs to enrich session context.

---

2.3 Track Custom Events

Integrate your own event tracking logic:

window.quack.trackCallback(function(eventName, properties) {
  // Handle event data
});

• Receives all trackable events from Quack AI (e.g., chat_opened, message_sent).

• eventName: Name of the triggered event.

• properties: Additional metadata for the event.

Read more Quack SDK Tracking Documentation

---

2.4 Add Custom Error Handling

Capture and manage widget errors in your application:

window.quack.addErrorHandler(function(error) {
  // Custom error processing
});

• Any uncaught errors from the widget will be passed to this handler.

• Enables advanced logging, alerting, or UI fallback.

---

2.5 Align Chat Widget Position

Programmatically change the alignment of the chat widget on the screen:

// Aligns the chat to the bottom-left corner
window.quack.alignChat("bottom-left")

// Aligns the chat to the bottom-right corner
window.quack.alignChat("bottom-right")

• Dynamically repositions the chat widget without needing CSS overrides.

• Accepts "bottom-left" or "bottom-right" as valid position values.

• Useful when you want to change the alignment based on page layout, user device, or other conditions.

💡 Pro Tip: Use alignChat if you want runtime control (via JavaScript). For static positioning, use CSS overrides on .quackchat-root.

---

Example Integration

<!-- Example: Custom styling and JavaScript API usage -->
<style>
  .quackchat-root { bottom: 60px !important; right: 60px !important; }
  .qc-themes { --qc-font-family: "Bytesized", sans-serif !important; }
</style>
<script>
  window.quack.identify({ email: "[email protected]", id: "abc-456" });
  window.quack.trackCallback((event, props) => console.log(event, props));
  window.quack.addErrorHandler(error => console.error('Quack Error:', error));
  window.quack.alignChat("bottom-right")
</script>