​
Widget Trigger Buttons

Enhance your website UX by adding custom buttons that can open, close, or toggle your chat widget. This allows you to integrate the widget seamlessly with your existing design and user flow.

​
Basic Usage

1

Enable Trigger Buttons

When configuring your widget, ensure trigger buttons are enabled:
window.KnowFlowConfig = {
  integrationId: "your-integration-id",
  websiteId: "your-website-id",
  enableTriggerButtons: true, // Default: true
  // ... other config options
};
2

Add Data Attributes

Add the data-knowflow-trigger attribute to any HTML element:
<!-- Open the widget -->
<button data-knowflow-trigger="open">Get Help</button>

<!-- Close the widget -->
<button data-knowflow-trigger="close">Close Chat</button>

<!-- Toggle the widget (default action) -->
<button data-knowflow-trigger="toggle">Chat Support</button>
<button data-knowflow-trigger>Chat Support</button>
3

Style Your Buttons

The trigger works on any HTML element, allowing for creative implementations:
<!-- Help card -->
<div class="help-card" data-knowflow-trigger="open">
  <h3>💬 Need Help?</h3>
  <p>Click here to chat with our AI assistant</p>
</div>

<!-- Help icon -->
<i class="fa fa-question-circle" 
   data-knowflow-trigger="open" 
   title="Get Help"></i>

<!-- Image trigger -->
<img src="help-icon.png" 
     alt="Help" 
     data-knowflow-trigger="open" />
4

Test Your Triggers

Load your website and test that the trigger buttons work as expected.

​
Supported Actions

ActionDescriptionUse Case
openOpens the widget dialog”Get Help” buttons, FAQ links
closeCloses the widget dialogCustom close buttons in your UI
toggleToggles the widget stateGeneral “Chat” or “Support” buttons

​
Advanced Implementation

​
Programmatic Control

Control the widget via JavaScript for advanced interactions: 
// Wait for widget to initialize
setTimeout(() => {
  // Open the widget
  window.KnowFlowWidget.open();
  
  // Close the widget
  window.KnowFlowWidget.close();
  
  // Toggle the widget
  window.KnowFlowWidget.toggle();
}, 1000);

​
Dynamic Elements

The widget automatically detects trigger buttons added after page load: 
// Add a trigger button dynamically
const button = document.createElement("button");
button.textContent = "Dynamic Help Button";
button.setAttribute("data-knowflow-trigger", "open");
document.body.appendChild(button);
// This button will work immediately

​
Event Handling

Listen for widget state changes: 
// Custom event handling (if you need to track opens/closes)
document.addEventListener('click', function(e) {
  if (e.target.hasAttribute('data-knowflow-trigger')) {
    // Your custom analytics or tracking code
    console.log('Widget trigger clicked:', e.target);
  }
});

​
Real-World Examples

​
FAQ Page Integration

<div class="faq-section">
  <h2>Frequently Asked Questions</h2>
  
  <div class="faq-item">
    <h3>How do I reset my password?</h3>
    <p>You can reset your password by...</p>
    <a href="#" data-knowflow-trigger="open" class="help-link">
      Still need help? Chat with us
    </a>
  </div>
  
  <div class="faq-item">
    <h3>How do I cancel my subscription?</h3>
    <p>To cancel your subscription...</p>
    <a href="#" data-knowflow-trigger="open" class="help-link">
      Chat with support
    </a>
  </div>
</div>

​
Support Card Design

<div class="support-options">
  <div class="support-card" data-knowflow-trigger="open">
    <div class="card-icon">💬</div>
    <h3>Chat with AI</h3>
    <p>Get instant answers to your questions</p>
    <span class="card-cta">Click to start chatting</span>
  </div>
</div>

<style>
.support-card {
  cursor: pointer;
  padding: 2rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.support-card:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0,123,255,0.15);
  transform: translateY(-2px);
}
</style>

​
Header Navigation

<nav class="header-nav">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/support">Support</a></li>
    <li>
      <button class="help-button" data-knowflow-trigger="open">
        <i class="icon-help"></i> Live Chat
      </button>
    </li>
  </ul>
</nav>

​
Best Practices

​
Design Guidelines

  • Clear Call-to-Action: Use action-oriented text like “Get Help” or “Chat Now”
  • Visual Hierarchy: Make trigger buttons visually distinct but not overwhelming
  • Consistent Styling: Match your site’s design system and brand colors
  • Accessibility: Include proper ARIA labels and keyboard navigation support

​
Placement Strategy

  • FAQ Pages: Add “Still need help?” links after each question
  • Product Pages: Include support triggers near pricing or technical details
  • Error Pages: Offer immediate assistance when users encounter problems
  • Checkout Flow: Provide help during critical conversion moments

​
Performance Considerations

  • Minimal Impact: Trigger buttons add no performance overhead
  • Progressive Enhancement: Buttons work even if the widget fails to load
  • SEO Friendly: Search engines can still crawl and index your content

​
Troubleshooting