Help Buttons Component

The Help Buttons component provides easy access to customer support through configurable buttons for Live Chat, FAQs, Contact Us, or custom support options, helping reduce checkout abandonment.

desc - Provide easy access to customer support with configurable contact buttons.

Description

Give customers immediate access to support during checkout. Configure multiple support options including live chat integration, FAQ links, contact forms, or custom support pages. Can integrate with popular live chat tools. Ideally placed near payment section where questions commonly arise.

Limitations

Live chat integration depends on third-party provider.

Sample Use Cases

• Real-Time Support: Integrate live chat button for real-time support during checkout
• FAQ Access: Link to FAQ page for common shipping and payment questions
• Human Assistance: Provide "Contact Us" option for personalized help

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Key Features

• Multiple button types (Live Chat, FAQs, Contact, Custom)
• Live chat integration with popular providers
• Flexible positioning
• Localization support
• Conditional rendering based on cart/customer conditions

Button Types

Live Chat

Integrates with live chat providers for real-time support:

Supported Providers:
- Intercom
- Zendesk Chat
- Drift
- LiveChat
- Tidio
- Crisp
- Gorgias

Button Text: "Chat with us"
Action: Opens live chat widget
Availability: Show when agents are online (optional)

FAQ Link

Direct customers to self-service FAQ page:

Button Text: "View FAQs"
URL: https://yourstore.com/pages/faq
Opens in: New tab
Best for: Common questions about shipping, returns, sizing

Contact Form

Link to contact/support page or form:

Button Text: "Contact Support"
URL: https://yourstore.com/pages/contact
Opens in: New tab
Best for: Complex inquiries requiring detailed information

Custom Support Options

Create custom help buttons for specific needs:

Examples:
- "Schedule a Call"
- "Email Us"
- "View Size Guide"
- "Track My Order"
- "International Shipping Info"

Live Chat Integration

Popular Providers

Intercom

Integration Type: JavaScript API
Button triggers: Intercom('show')
Benefit: Full conversation history, rich media

Zendesk Chat

Integration Type: Widget API
Button triggers: $zopim.livechat.window.show()
Benefit: Integrated with Zendesk support tickets

Drift

Integration Type: JavaScript API
Button triggers: drift.api.openChat()
Benefit: Conversational sales focus

Gorgias

Integration Type: Chat Widget
Button triggers: Opens Gorgias chat
Benefit: E-commerce specific, order lookup

Integration Setup

1. Install your live chat provider's app from Shopify App Store
2. Configure Help Buttons component in Checkout Components
3. Select your live chat provider
4. Test button triggers chat widget correctly
5. Configure offline messages for when support is unavailable

Placement Recommendations

Near Payment Section

Strategic placement where customers have questions about payment security:

[Shipping Information]
---
Questions? [Live Chat] [View FAQs]
[Payment Information]

Above Cart Summary

Prominent placement for easy access throughout checkout:

Need Help? [Chat with Us] [FAQs]
[Cart Summary]
[Items]
[Subtotal]

At Checkout Top

Early access to support for immediate questions:

[Checkout Header]
[Help Buttons: Live Chat | FAQs | Contact]
---
[Contact Information]

Best Practices

Number of Buttons

• Ideal: 2 buttons (Live Chat + FAQ or Live Chat + Contact)
• Maximum: 3 buttons (more creates decision paralysis)
• Minimum: 1 button (single best support option)

Button Priority

Order buttons by speed of resolution:

1. Live Chat (fastest, real-time)
2. FAQ (fast, self-service)
3. Contact Form (slower, requires form submission)

Button Text

• Keep concise: "Live Chat" not "Click Here to Chat with Our Support Team"
• Use action verbs: "Chat", "View", "Contact", "Call"
• Be specific about what happens: "Chat with Us" > "Get Help"
• Consider adding availability: "Chat Now (Online)" or "Email Us (Response in 2hrs)"

Live Chat Availability

Configure offline messages for 24/7 presence:

Online: "Chat with us now!"
Offline: "Leave us a message - we'll respond within 2 hours"

Timing Considerations

When to Show Help Buttons

Use conditional rendering to show at strategic moments:

Show when:
- Customer hesitates (time on page > 30 seconds)
- High-value cart (total > $200)
- International shipping address
- Complex product configurations
- Customer is repeat visitor but hasn't purchased

Impact on Conversion

Research shows:

• Live chat can increase conversion by 20-40%
• 79% of customers prefer live chat for quick questions
• 51% of customers are more likely to purchase from sites with live chat
• Average order value increases 10-15% when live chat is used

Accessibility

Help buttons support:

• Keyboard navigation
• Screen reader compatibility
• High contrast mode
• Focus indicators
• ARIA labels for assistive technology