4f:I[267044,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0feduxwyr82nv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/0h18ahbw9nndq.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/0yqk60ay0h76r.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/046rld3pdrzo7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/0lmmb08iwroji.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 50:T12e5,

A floating WhatsApp chat button that opens a popup with your team members. Each visitor picks who to talk to and starts a WhatsApp conversation directly. Every feature can be toggled on or off, and every visual detail is fully customizable.

Key Features

Multi-Agent Popup with individual phone numbers, names, roles, and avatars for each team member
Online/Offline Status with animated green dot indicator and customizable status text
Automatic Scheduling using timezone-aware business hours. Set start/end hours, working days (Everyday, Mon-Fri, or Custom per day), and the component handles the rest
Pre-filled Messages with a default message for the whole team or custom messages per member
4 Button Animations: None, Pulse, Focus Ring, Satellite, and Multicolor. Animations pause automatically when the popup is open or on hover
Optional Label with a floating tooltip next to the button (e.g. "Need help? Chat with us")
Smart Positioning that auto-detects if the button is on the left or right side of the screen and aligns the popup accordingly
Offline Members Dimmed and non-clickable, with online members sorted to the top automatically
Avatar Fallback with auto-generated initials when no photo is provided
Responsive with mobile-friendly popup width and max-width constraints

Use Only What You Need

Every feature is optional. Toggle them on or off directly from the properties panel:

Scheduling: enable per member. When off, use the simple Online toggle. When on, configure timezone, start/end hours, and working days
Custom Days: when scheduling is set to Custom, toggle individual days (Sun-Sat) with separate hours for each
Button Label: show or hide the floating text tooltip next to the button
Button Animation: choose from 4 animation styles or turn it off completely
Pre-filled Message: set a default message for all members, or override it per member
Shadow: toggle the button shadow on or off

Good to Know

Timezone: The component uses IANA timezone names (e.g. "America/Sao_Paulo", "Europe/London"). It converts the visitor's local time to your business timezone to determine who is online. This means your schedule is always based on your office hours, regardless of where the visitor is.

Phone Number Format: Enter the full number with country code, no spaces or dashes (e.g. "5511999999999" for Brazil). The component automatically generates the correct wa.me link.

Smart Popup Alignment: The popup automatically opens to the left or right depending on where the button is positioned on the screen. No manual configuration needed.

Offline Members: When a member is offline (either manually toggled or by schedule), they appear dimmed with reduced opacity and are not clickable. Online members are automatically sorted to the top.

Full Customization

Every visual detail is controlled from the properties panel. Nothing is hardcoded:

Members: name, role, phone number, pre-filled message, avatar, and online status per member
Button Style: accent color, size, and shadow toggle
Button Animation: None, Pulse, Focus, Satellite, or Multicolor
Popup Style: width, border radius, header background, and body background
Header Title: text, font (family, weight, size, line-height, spacing), and color
Header Subtitle: text, font, and color
Response Text: text, font, and color (e.g. "Usually replies within a few minutes")
Member Style: name font and color, role font and color, avatar size, and offline indicator color
Label Style: text, font, and color for the optional floating tooltip

Controls are grouped by section and unused options hide automatically. For example, scheduling controls only appear when "Use Schedule" is enabled for a member, and custom day controls only show when "Custom" working days are selected.

51:T16d0,

A complete FAQ component with everything you need. No plugins, no external dependencies. Every feature can be toggled on or off, and every visual detail can be customized to match your brand.

Key Features

Real-Time Search with instant filtering and text highlighting on matches
Category Tabs auto-generated from your items, with a customizable "All" label
Two Visual Styles: start with Cards (with background, shadow, border) or Dividers (minimal, edge-to-edge), then customize colors, fonts, spacing, borders, and shadows to create your own look
Markdown Support for bold, italic, inline code, links, headings, ordered/unordered lists, and blockquotes
Reactions (👍👎) so visitors can rate each answer, with Google Analytics tracking built in
Copy to Clipboard button to copy any answer in one click
CTA Buttons with optional call-to-action link per item
SEO Schema with auto-generated FAQPage JSON-LD for Google rich results
Keyboard Navigation with Arrow keys, Enter/Space, Home/End, and Escape
Deep Linking to jump directly to a specific question via URL hash
Responsive with ResizeObserver and custom mobile breakpoint

Use Only What You Need

Every feature is optional. Toggle them on or off directly from the properties panel, and unused controls hide automatically to keep things clean:

Search: show or hide the search bar. When enabled, you can customize the placeholder text, background color, border, and radius
Categories: show or hide category tabs. Categories are auto-generated from your items. Customize the "All" label, text colors, active colors, backgrounds, radius, and spacing
Reactions: show or hide the thumbs up/down buttons. When enabled, votes are saved locally and tracked via Google Analytics. You can change the label text and set a unique storage key for each FAQ section
Copy Button: show or hide the copy-to-clipboard button on each answer
CTA Button: add an optional call-to-action link per item with custom label and URL
SEO Schema: toggle the automatic FAQPage JSON-LD generation for Google rich results
Numbering: show or hide question numbers, with a dedicated Number Style for font, color, and background

Google Analytics Tracking

When a visitor clicks 👍 or 👎, the component automatically fires a Google Analytics event:

Event name: faq_reaction
Parameters: question (the question text) and reaction ("up" or "down")

Just have Google Analytics enabled in your Framer site settings (Settings > General > Analytics). You can view reaction data in GA under Reports > Realtime > Events, or register question and reaction as custom dimensions for permanent reporting.

Good to Know

SEO Schema: When enabled, the component automatically adds invisible structured data (JSON-LD) to your page. This helps Google understand your FAQ content and can display it as rich results in search. No extra setup needed, just toggle it on.

Reactions Key: If you have multiple FAQ components on the same page, give each one a unique Reactions Key (e.g. "faq-general", "faq-pricing"). This keeps the vote data separate for each FAQ section. If you only have one FAQ, you can leave the default.

Deep Linking: You can link directly to a specific question by adding #faq-0, #faq-1, #faq-2 (and so on) to the end of your page URL. The page will scroll to that question and open it automatically.

Markdown in Answers: You can format your answers using simple Markdown syntax. For example, wrap text in double asterisks for bold, single asterisks for italic, use dashes for bullet lists, or numbers for ordered lists. Links work too: [text](url).

Full Customization

Every visual detail is controlled from the properties panel. Nothing is hardcoded:

Items: question, answer, category, and optional CTA (label + URL) per item
Layout: Cards or Dividers style, gap between items, padding, start open, allow multiple open
Accordion Icon: choose between Chevron, Plus/Minus, or Circle. Customize the size, background color, and icon color
Question Style: full font control (family, weight, size, line-height, spacing) and text color
Answer Style: separate font control, text color, and link color
Number Style: font, color, and background for question numbers
Search Style: highlight color, background, border, and border radius
Category Style: text color, active color, background, active background, radius, and gap
Item Appearance: background color, hover color, border radius, full border and box-shadow controls (Cards mode), divider color (Dividers mode)

Controls are grouped by section and hide automatically when they don't apply. For example, divider color only shows in Dividers mode, number style only shows when numbering is on, and search style only shows when search is enabled.

4e:["$","$L4f",null,{"value":{"fallback":{"$inf$activity-creator-a7a5a10b-e81e-4514-b872-d59cfc1ec6ab-all:/unified/creator/a7a5a10b-e81e-4514-b872-d59cfc1ec6ab/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:a7a5a10b-e81e-4514-b872-d59cfc1ec6ab:/unified/posts/?creator=a7a5a10b-e81e-4514-b872-d59cfc1ec6ab&with=reposts":[{"data":[{"id":"019ca1f8-c406-7f16-9a81-21503e90ef63","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a7a5a10b-e81e-4514-b872-d59cfc1ec6ab","name":"Creative Framer","slug":"creative-framer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1860814/i015j_dj9-YLeMMwC019V81XfAUmkN4S2tySgC2I","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gbKR2IPJYjODpPJnS9xl","resolved":true,"title":"WhatsApp Chat Pro","body":"$50","bodyJson":null,"introduction":"Multi-agent popup with scheduling","slug":"whatsapp-chat-pro","author":{"framerUserId":"a7a5a10b-e81e-4514-b872-d59cfc1ec6ab","name":"Creative Framer","slug":"creative-framer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1860814/i015j_dj9-YLeMMwC019V81XfAUmkN4S2tySgC2I","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/gbKR2IPJYjODpPJnS9xl/whatsapp-floating-rnUCOdmEHNsAxFs8WuA9r141uepCTd","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-19T22:34:04.275Z","updatedAt":"2026-03-17T11:45:22.703Z","publishedAt":"2026-02-28T01:59:20.838Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://whatsappchatbuttonfloating.framer.ai/","price":"5","paymentUrl":"https://creativeframer.gumroad.com/l/WhatsApp-Multi-agent","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"hQpnoU18zdI5RiFilJib","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-28T01:59:20.838Z","updatedAt":"2026-02-28T01:59:20.838Z","type":"post"},{"id":"019c9b2a-bc94-7430-a666-9d0aad5aff41","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a7a5a10b-e81e-4514-b872-d59cfc1ec6ab","name":"Creative Framer","slug":"creative-framer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1860814/i015j_dj9-YLeMMwC019V81XfAUmkN4S2tySgC2I","followed":false,"followsYou":false},"media":[],"resources":[{"id":"blGAWRAwygZoCMfQu178","resolved":true,"title":"FAQ Pro - Accordion ","body":"$51","bodyJson":null,"introduction":"Search, categories & GA tracking","slug":"faq-pro-accordion","author":{"framerUserId":"a7a5a10b-e81e-4514-b872-d59cfc1ec6ab","name":"Creative Framer","slug":"creative-framer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1860814/i015j_dj9-YLeMMwC019V81XfAUmkN4S2tySgC2I","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/blGAWRAwygZoCMfQu178/faq-pro-accordion-ohIdgQYTShCU0MhlQ4aUSt3lQqAGDH","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-19T15:12:43.562Z","updatedAt":"2026-03-17T11:36:00.375Z","publishedAt":"2026-02-26T18:16:35.220Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://faqaccordion.framer.ai/","price":"5","paymentUrl":"https://creativeframer.gumroad.com/l/faq-accordion-framer","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"vTccVIMAqUCMRmvtM45Q","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-26T18:16:35.220Z","updatedAt":"2026-02-26T18:16:35.220Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]