UI Skills: Visual and Interactive Components

Buttons, Images, Carousels, and More

What Are UI Skills?

UI Skills are visual and interactive components the agent can send in WhatsApp:

• Clickable buttons
• Images
• Interactive lists
• Maps with locations
• Card carousels
• Forms (WhatsApp Flow)

Difference:

• Skills: How should it act (text responses)
• UI Skills: How should it look (visual components)

The 8 Types of UI Skills

1. CTA URL Button (Link Button)

A clickable button that opens a link in the browser.

When to use:

• Link to documents
• Book an appointment
• See more details on web
• Download PDF

Configuration:

Title: "See Pricing Plans"
URL: https://woztell.com/pricing
Button Text: "View Prices"

2. Image (Picture)

An image (PNG, JPG) the agent sends.

When to use:

• Show product
• Process diagram
• Feature screenshot
• Infographic

Configuration:

Title: "Our Plans"
Image URL: https://cdn.woztell.com/plans.png

3. Interactive List (Menu)

A list with options the customer can tap.

When to use:

• Menu of options
• Select category
• Choose between plans
• Filter results

Configuration:

Title: "What interests you?"
Items:
  1. "Pricing" → response: "See our plans"
  2. "Features" → response: "Show features"
  3. "Demo" → response: "Schedule demo"
Button Text: "Select an option"

4. Location (Map)

An interactive map with address.

When to use:

• Show office location
• Nearby branches
• Pickup point
• Event address

Configuration:

Title: "Our Office"
Address: "Main Street 123, Mexico City"
Latitude: 25.6866
Longitude: -100.3161

5. Location Request (Ask for Location)

Ask customer to share their current location.

When to use:

• Find nearest branch
• Calculate shipping
• Home services
• Logistics

Configuration:

Message: "What's your location to calculate shipping?"
Button Text: "Share Location"

6. Carousel - Quick Reply (Button Carousel)

Multiple horizontal options customer can tap.

When to use:

• Multiple quick options
• "Yes" / "No" / "Maybe"
• Select time slot
• Rating (1-5 stars)

Configuration:

Message: "Are you satisfied with our service?"
Options:
  - "Yes" → response: "Thank you!"
  - "No" → response: "We're sorry"
  - "Other" → response: "Tell me more"

7. Carousel - URL (Card Carousel)

Cards with image, title, and link.

When to use:

• Show multiple products
• Recommend blog posts
• Case studies
• Galleries

Configuration:

Card 1:
  - Image: https://cdn.woztell.com/plan-starter.jpg
  - Title: "Starter Plan"
  - Description: "For small businesses"
  - URL Button: "See Details" → https://woztell.com/starter

Card 2:
  - Image: https://cdn.woztell.com/plan-pro.jpg
  - Title: "Pro Plan"
  - Description: "For enterprises"
  - URL Button: "See Details" → https://woztell.com/pro

8. WhatsApp Flow (Form)

An interactive form embedded in WhatsApp.

When to use:

• Collect customer data (name, email, phone)
• Satisfaction surveys
• Custom questions
• Contact information

Configuration:

Flow Name: "Contact Information"
Fields:
  1. Full Name (required)
  2. Email (required)
  3. Phone (required)
  4. Message (optional)
  5. Callback Time (select: morning/afternoon/evening)

How to Create a UI Skill

Step 1: Go to Advanced

In WOZTELL:

Channels
→ Your channel
→ Meta AI Agent
→ Scroll down
→ "Advanced"
→ "UI Skills"

Step 2: Click "Add UI Skill"

In the "UI Skills" section, find the blue "Add UI skill" button.

Step 3: Select Type

Choose one of the 8 component types.

Step 4: Complete Fields

Depending on type, add:

• Title
• Description / Message
• URLs (if applicable)
• Images (if applicable)
• Options / Items (if applicable)

Step 5: Test and Save

Click "Save". The UI Skill appears in the list.

Important Limitation: The Sandbox

Why? Meta's sandbox doesn't support advanced components.

Solution: Test in real WhatsApp:

1. Activate the agent
2. Send a message that triggers the UI Skill
3. You'll see the component rendered on your phone

Use Cases by Component

E-commerce (Retail)

SaaS (Software)

Services (Consulting, Repair)

Best Practices

1. Don't Overload

BAD: A UI Skill in every message

GOOD: UI Skills only when they really help

2. Use Buttons for Clear CTAs

BAD: "Want to book? Type yes"

GOOD: "Book Now" button leading to calendar

3. Images Must Be Clear

BAD: Very small or blurry image

GOOD: Legible image, 400x300px minimum

4. URLs Must Be Valid and HTTPS

BAD: http://woztell.com (insecure)

GOOD: https://woztell.com (secure)

5. WhatsApp Flow Only for Important Data

BAD: Ask name and last name in a Flow

GOOD: Ask name, email + phone number

Troubleshooting

Quick Summary: When to Use Each

Next Steps

1. Create 1-2 simple UI Skills (Button + Quick Reply)
2. Test in real WhatsApp (not sandbox)
3. Verify the agent uses them when it should
4. Iterate based on customer feedback