Skip to main content

How to Use the Action Buttons

Learn how to create clickable action buttons that automatically send questions to your AI Agent.

Updated over 2 weeks ago

How to Use the CTA Feature (Action Buttons)

The CTA feature allows you to connect clickable elements on your website—buttons, text links, or any HTML element—to your AI Agent. When clicked, these elements automatically send a predefined question to the chat, creating a seamless user experience.

🎯 What Can You Do With CTA Buttons?

The CTA feature is highly versatile and can be used across your website:

  • Embed them in FAQ sections to let users explore questions instantly

  • Add them to landing pages to guide visitors toward specific topics

  • Place them on contact pages as an alternative to traditional forms

  • Integrate them in product pages to trigger product-related queries

⚙️ How to Implement CTA Buttons

Setting up a CTA button is simple. You need to add a custom data attribute to any clickable element on your website.

Required Parameters:

  • Attribute name: data-qualimero-action-button-content

  • Attribute value: The question or message that should be sent to the AI when the button is clicked

When a user clicks the element, the web chat opens automatically and sends the specified message to your AI Agent.

📋 Implementation Example: Webflow

Here's how to set up a CTA button in Webflow:

  1. Select the element you want to turn into a CTA button (button, link, text block, etc.)

  2. Go to the element's Settings panel

  3. Scroll to Custom Attributes

  4. Add a new custom attribute:

    • Name: data-qualimero-action-button-content

    • Value: The message you want to send (e.g., "What are your opening hours?")

  5. Publish your site

💡 Example Use Cases

FAQ Section

Turn each FAQ question into a clickable element that opens the chat with that question pre-filled:

data-qualimero-action-button-content="How do I reset my password?"

Product Pages

Add a "Ask about this product" button that triggers a product inquiry:

data-qualimero-action-button-content="Tell me more about this product"

Contact Page

Replace or complement contact forms with action buttons:

data-qualimero-action-button-content="I need help with my order"

✅ Best Practices

  • Be specific: Use clear, concise questions that your AI can answer accurately

  • Match user intent: Place buttons where they make contextual sense

  • Test the flow: Click your buttons to ensure the AI responds as expected

  • Keep it natural: Write questions the way your users would ask them

🔧 Technical Notes

The CTA feature works with any HTML element that supports custom data attributes. This includes:

  • Buttons (<button>)

  • Links (<a>)

  • Divs, spans, and other container elements

  • Images with click handlers

The attribute name must be exactly data-qualimero-action-button-content for the feature to work correctly.

📞 Need Help?

If you're having trouble implementing CTA buttons on your specific platform or CMS, reach out to our support team. We're happy to help you get set up.

Did this answer your question?