Home Feedback Widget On-Click Triggers for Feedback Widget

On-Click Triggers for Feedback Widget

Last updated on Jul 08, 2025

On-click triggers provide a powerful way to seamlessly integrate your Crowd feedback widget into your existing user interface. Instead of relying on the traditional launcher, you can trigger the feedback widget directly through any clickable element on your platform, such as links, buttons, icons, images, or custom elements.

What Are On-Click Triggers?

On-click triggers allow you to open your feedback widget by clicking on any element with a specific ID format. This eliminates the need for the traditional widget launcher, providing more control over when and how users access your feedback collection.

Benefits

  • Seamless Integration: Blend feedback collection naturally into your existing UI

  • Strategic Placement: Position feedback opportunities exactly where they make sense

  • Multiple Entry Points: Create various ways for users to provide feedback

  • Enhanced User Experience: Reduce friction in the feedback process

  • Design Flexibility: Use any visual element as a feedback trigger

Prerequisites

  • Active Crowd account with feedback widget feature enabled

  • Created and activated Feedback widget

  • Basic understanding of HTML/CSS (for implementation)

  • Access to your website's code or content management system

Setup Process

Step 1: Access Your Widget Settings

  1. Log into your Crowd dashboard

  2. Navigate to the Feedback Widgets section

  3. Select your active feedback widget

  4. If you don't have an active widget, follow this guide to create and activate a widget

  5. Click on "More Options" in the widget controls

  6. Select "On-Click Triggers" from the dropdown menu

Step 2: Generate Your Widget Token

  1. The setup modal will display your unique widget token

  2. Copy the complete token (it will look like: MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2w...)

  3. Keep this token secure and don't share it publicly

Step 3: Choose Your Implementation Method

The modal provides ready-to-use code examples for:

  • HTML links

  • Button elements

  • JavaScript implementations

  • Custom elements

Implementation Guide

Basic Implementation Format

All on-click triggers use this ID format:

#crowd-widget-${your-widget-token}

Method 1: HTML Links

Perfect for text-based feedback links in navigation menus, footers, or content areas.

html

<!-- Basic feedback link -->
<a href="#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo">
  Give Feedback
</a>

<!-- Styled feedback link -->
<a href="#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo" 
   class="feedback-link" 
   title="Share your thoughts with us">
  💬 Share Feedback
</a>

<!-- Link with additional attributes -->
<a href="#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
   class="btn btn-primary"
   role="button"
   aria-label="Open feedback form">
  Help Us Improve
</a>

Method 2: Button Elements

Ideal for forms, call-to-action sections, or interactive components.

html

<!-- Standard button -->
<button onclick="href='#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo'">
  Send Feedback
</button>

<!-- Button with custom styling -->
<button onclick="href='#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo'"
        class="feedback-btn"
        type="button"
        aria-describedby="feedback-help">
  <span class="btn-icon">📝</span>
  <span class="btn-text">Feedback</span>
</button>

<!-- Button with disabled state handling -->
<button onclick="href='#crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo'"
        class="feedback-btn"
        id="feedback-trigger"
        disabled="false">
  Share Your Experience
</button>

Method 3: Icon and Image Elements

Great for minimalist designs or when space is limited.

html

<!-- Icon with click handler -->
<div id="crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo" 
     class="feedback-icon" 
     style="cursor: pointer;"
     role="button"
     tabindex="0"
     aria-label="Open feedback form">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
  </svg>
</div>

<!-- Image as trigger -->
<img src="feedback-icon.png" 
     id="crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
     alt="Give Feedback"
     class="clickable-image"
     style="cursor: pointer;"
     role="button"
     tabindex="0">

<!-- Font icon implementation -->
<i class="fas fa-comment" 
   id="crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
   style="cursor: pointer; font-size: 24px;"
   role="button"
   tabindex="0"
   aria-label="Open feedback widget"
   title="Share your feedback"></i>

Method 4: Custom Elements and Containers

For complex UI components or custom designs.

html

<!-- Card-based feedback trigger -->
<div class="feedback-card" 
     id="crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
     style="cursor: pointer;"
     role="button"
     tabindex="0">
  <div class="card-header">
    <h3>We Value Your Opinion</h3>
  </div>
  <div class="card-body">
    <p>Help us improve by sharing your feedback</p>
    <span class="cta-text">Click to start →</span>
  </div>
</div>

<!-- Floating action button -->
<div class="floating-feedback-btn"
     id="crowd-widget-MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
     style="position: fixed; bottom: 20px; right: 20px; cursor: pointer;"
     role="button"
     tabindex="0"
     aria-label="Open feedback form">
  <div class="fab-content">
    <span class="fab-icon">💬</span>
    <span class="fab-text">Feedback</span>
  </div>
</div>

For dynamic content or complex interactions, please contact us at support@crowdapp.io

Best Practices

User Experience Guidelines

  1. Clear Intent: Make it obvious that clicking will open a feedback form

  2. Strategic Placement: Position triggers where users naturally look for help or have opinions

  3. Timing: Consider when users are most likely to want to give feedback

  4. Frequency: Don't overwhelm users with too many trigger options

  5. Context: Place triggers relevant to the content or action users just completed

Design Recommendations

  • Use consistent styling that matches your brand

  • Ensure triggers are easily identifiable and clickable

  • Maintain adequate spacing around clickable elements

  • Consider mobile users with appropriate touch targets (minimum 44px)

  • Use hover states and transitions for better feedback

Accessibility Best Practices

html

<!-- Proper ARIA labels -->
<button onclick="href='#crowd-widget-token'" 
        aria-label="Open feedback form to share your experience"
        aria-describedby="feedback-help">
  Feedback
</button>
<div id="feedback-help" class="sr-only">
  Opens a form where you can share your thoughts and suggestions
</div>

<!-- Keyboard navigation support -->
<div id="crowd-widget-token"
     role="button"
     tabindex="0"
     onkeypress="if(event.key==='Enter'||event.key===' ') this.click()">
  Feedback Icon
</div>

Platform-Specific Integration

WordPress

php

// Add to functions.php
function add_feedback_trigger_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Give Feedback',
        'class' => 'feedback-btn',
        'widget_token' => 'your-widget-token'
    ), $atts);
    
    return '<a href="#crowd-widget-' . esc_attr($atts['widget_token']) . '" 
               class="' . esc_attr($atts['class']) . '">' . 
               esc_html($atts['text']) . '</a>';
}
add_shortcode('feedback_trigger', 'add_feedback_trigger_shortcode');

// Usage: [feedback_trigger text="Help Us Improve" class="my-feedback-btn"]

Shopify

liquid

<!-- In your theme template -->
<a href="#crowd-widget-{{ settings.crowd_widget_token }}" 
   class="feedback-link">
  {{ settings.feedback_text | default: 'Give Feedback' }}
</a>

<!-- In settings_schema.json -->
{
  "name": "Crowd Feedback",
  "settings": [
    {
      "type": "text",
      "id": "crowd_widget_token",
      "label": "Widget Token",
      "info": "Enter your Crowd widget token"
    },
    {
      "type": "text",
      "id": "feedback_text",
      "label": "Feedback Button Text",
      "default": "Give Feedback"
    }
  ]
}

React Implementation

jsx

import React from 'react';

const FeedbackTrigger = ({ 
  widgetToken, 
  children, 
  className = 'feedback-trigger',
  ...props 
}) => {
  const handleClick = (e) => {
    e.preventDefault();
    window.location.href = `#crowd-widget-${widgetToken}`;
  };

  return (
    <button 
      onClick={handleClick}
      className={className}
      {...props}
    >
      {children}
    </button>
  );
};

// Usage
<FeedbackTrigger 
  widgetToken="MM5p1EsT1rVZ2jpucll2wz+tpWEo00pQ38y1rVZ2jpucll2wz+tpWEo"
  className="btn btn-primary"
  aria-label="Open feedback form"
>
  Share Feedback
</FeedbackTrigger>

Vue.js Implementation

vue

<template>
  <button 
    @click="openFeedback"
    :class="buttonClass"
    :aria-label="ariaLabel"
  >
    <slot>{{ buttonText }}</slot>
  </button>
</template>

<script>
export default {
  name: 'FeedbackTrigger',
  props: {
    widgetToken: {
      type: String,
      required: true
    },
    buttonText: {
      type: String,
      default: 'Give Feedback'
    },
    buttonClass: {
      type: String,
      default: 'feedback-btn'
    },
    ariaLabel: {
      type: String,
      default: 'Open feedback form'
    }
  },
  methods: {
    openFeedback() {
      window.location.href = `#crowd-widget-${this.widgetToken}`;
    }
  }
}
</script>

Troubleshooting

Widget Not Opening

Problem: Clicking the trigger doesn't open the widget

Solutions:

  1. Check Widget Token: Ensure the complete token is copied correctly

  2. Verify Widget Status: Confirm your widget is active and published

  3. Check Syntax: Ensure the ID format is exact

  4. Browser Console: Look for JavaScript errors that might prevent functionality

  5. Test Environment: Try on a different browser or device

Multiple Widgets Opening

Problem: Multiple feedback widgets appear when clicking triggers

Solutions:

  1. Same Token: Ensure all triggers use the same widget token

  2. Debounce Clicks: Add click debouncing to prevent rapid firing

  3. Event Propagation: Check for event bubbling issues in nested elements

Mobile Responsiveness

Problem: Triggers are hard to use on mobile devices

Solutions:

  1. Touch Targets: Ensure a minimum 44px touch target size

  2. Spacing: Add adequate spacing around triggers

  3. Hover States: Use focus states instead of hover for mobile

Still need help? Contact our support team at support@crowd.com or use the chat widget in your dashboard