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

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

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>

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

Troubleshooting

Trigger Buttons Not Working

• Check that enableTriggerButtons is not set to false in your configuration
• Ensure the widget has finished loading before testing trigger buttons
• Verify the data-knowflow-trigger attribute is spelled correctly
• Check browser console for JavaScript errors

Programmatic API Not Available

• Confirm that window.KnowFlowWidget exists for programmatic control
• Wait for the widget to fully initialize before calling API methods
• Check that your widget configuration is valid