AI Agent Triggers

What Are AI Agent Triggers?

AI Agent Triggers allow you to open the ChatSpark widget from any clickable element on your website, with an optional pre-filled message. Instead of customers clicking the chat bubble and figuring out what to ask, you guide them with context-specific prompts.

Common use cases:

• Replace contact forms: Capture leads conversationally
• Product inquiries: "Tell me more about [Product]" buttons
• Contextual support: "Get help with [Feature]" links
• Sales conversations: "Talk to Sales" CTAs

Basic Setup

Add two attributes to any HTML element to make it trigger your AI Agent:

• class="cs-trigger-agent" - Tells ChatSpark this element opens the widget
• data-trigger="Your message here" - Pre-fills the chat with your prompt (optional)

Basic example:

<button class="cs-trigger-agent" data-trigger="I'd like to learn more">
  Chat With Us
</button>

When a visitor clicks this button, the chat widget opens and automatically sends "I'd like to learn more," starting the conversation with context.

Replace Contact Forms

Traditional contact forms are friction-heavy and often go unanswered for days. Replace them with AI Agent Triggers for instant, conversational engagement.

How It Works

1. Visitor clicks your "Contact Us" trigger
2. Chat opens with a prompt like "I'd like to get in touch"
3. Your agent responds and can ask qualifying questions
4. Lead Capture collects their contact info
5. Lead data syncs to your tools via Zapier: CRMs, email lists, helpdesks, spreadsheets, and 5,000+ more

Example implementation:

<!-- Replace your contact form with this -->
<a href="#" class="cs-trigger-agent" data-trigger="I'd like to contact your team">
  Contact Us
</a>

<!-- Or a more specific prompt -->
<button class="cs-trigger-agent" data-trigger="I have a question about your services">
  Get In Touch
</button>

Benefits Over Traditional Forms

• Instant response: No waiting days for a reply
• Qualification: AI can ask follow-up questions
• Higher conversion: Conversational UX feels more natural
• Rich context: Full conversation history with the lead

Product & Service Prompts

Add "Learn More" buttons throughout your website that open conversations about specific products or services.

Product page example:

<div class="product-card">
  <h3>Professional Camera Kit</h3>
  <p>Everything you need to start your photography journey.</p>
  <button class="cs-trigger-agent" data-trigger="Tell me more about the Professional Camera Kit">
    Learn More
  </button>
</div>

Service page example:

<button class="cs-trigger-agent" data-trigger="What's included in your consulting services?">
  Ask About Consulting
</button>

Pricing page example:

<a href="#" class="cs-trigger-agent" data-trigger="I have a question about your pricing">
  Have Questions?
</a>

Support Triggers

Place contextual help buttons throughout your app or documentation to provide instant support exactly where users need it.

Feature-specific help:

<button class="cs-trigger-agent" data-trigger="How do I set up Lead Capture?">
  Need Help?
</button>

FAQ shortcuts:

<ul class="faq-list">
  <li>
    <a href="#" class="cs-trigger-agent" data-trigger="What are your business hours?">
      What are your business hours?
    </a>
  </li>
  <li>
    <a href="#" class="cs-trigger-agent" data-trigger="What's your return policy?">
      What's your return policy?
    </a>
  </li>
  <li>
    <a href="#" class="cs-trigger-agent" data-trigger="How do I track my order?">
      How do I track my order?
    </a>
  </li>
</ul>

Error page recovery:

<!-- On a 404 page -->
<p>Can't find what you're looking for?</p>
<button class="cs-trigger-agent" data-trigger="I can't find what I'm looking for on your website">
  Ask Our AI Agent
</button>

Automatic Triggers

Automatic Triggers open the chat widget on their own based on visitor behavior. You configure them in your AI Agent settings. No code is required.

Available Trigger Types

• Time on Page - Fires after a visitor has been on the page for a set number of seconds.
• Page Visit - Fires immediately when a visitor loads a matching page.
• Scroll Depth - Fires when a visitor scrolls past a set percentage of the page.
• Exit Intent - Fires when a visitor moves their cursor toward the top of the browser, indicating they are about to leave.

Dashboard Configuration

1. Go to your AI Agent settings and open the Settings tab.
2. Scroll to Proactive Triggers and click Add Trigger.
3. Select a trigger type and configure the condition. For example, select Time on Page and enter 30 for 30 seconds.
4. Optionally add a URL pattern to restrict the trigger to a specific section of your site. For example, entering /pricing means the trigger only fires when the visitor is on a page whose URL contains /pricing.
5. Optionally add an opening message. This appears as a speech bubble above the chat button before the visitor opens the widget. If the visitor clicks the bubble, the widget opens and the message is sent automatically.
6. Set the frequency: once per session, once per day, or always.
7. Save the trigger. It is active immediately.

Example no-code flow: A visitor lands on your pricing page. After 30 seconds, a speech bubble appears above the chat button with the message “Have a question about our pricing? I can help.” The visitor clicks the bubble, the widget opens, and the conversation starts.

JavaScript API

For conditions that cannot be configured in the dashboard, use the ChatSpark.trigger() method to fire the overlay programmatically from your own code.

ChatSpark.trigger("I noticed you're leaving — can I help before you go?");

The method accepts an optional message string. If the widget is already open, the call is ignored. If no message is provided, the bubble appears without text and clicking it opens the widget.

// Open the widget with no pre-filled message
ChatSpark.trigger();

Example: fire on custom storefront event

// Trigger when a user tries to close a checkout modal
checkoutModal.addEventListener("close", function () {
  ChatSpark.trigger("I noticed you're leaving — can I help before you go?");
});

Best Practices

Write Specific Prompts

The more context you provide in the trigger, the better the response:

• ❌ "Help"
• ✅ "Help me understand your pricing plans"

Use Action-Oriented Language

Button text should tell visitors what happens when they click:

• ❌ Click Here
• ✅ Ask About Pricing
• ✅ Get Product Details
• ✅ Chat With Sales

Place Triggers Strategically

• Product pages: Near pricing or feature lists
• Checkout: For last-minute questions
• Pricing page: To handle objections
• Documentation: When explanations get complex
• Footer: As an alternative to contact forms

Test Different Prompts

Review your Conversations to see how visitors interact with different triggers. Adjust prompts based on what leads to the best conversations.