Animated ElementsFAQs with Badges for GoHighLevel
The question list that answers objections before they cost the booking, with a small badge on the ones people actually ask.
- Controls
- 82
- Variants shown
- 7
- Dependencies
- None
7 ways to run it
Every one of these is the real element with different settings. Press play again to watch any of them from the start.
82 controls, grouped the way you build
- The questions4
- How it opens7
- The cards18
- Badges13
- Text style15
- Text color6
- Entrance6
- Background & spacing13
Everything it does
- Repeating list of questions, answers and badges
- which question opens first, or none
- several answers open at once
- whether the open one can be closed
- how long it takes to open
- movement feel
- chevron, plus, arrow or caret
- icon side, size, rotation and gap
- space between questions
- card padding, corners, colour and strength at rest, on hover and when open
- card border and its open colour
- card shadow at rest and on hover
- an accent bar on the open card
- badges on or off
- badge style, fill, text and border colours, corners, padding, size, thickness, letter spacing and capitals
- question and answer fonts
- sizes per breakpoint
- thicknesses
- letter spacing
- line heights
- the gap between question and answer
- question, hover, open, answer and icon colours
- scroll or page-load trigger with replay
- entrance, its duration and the stagger between questions
- alignment per breakpoint
- maximum width per breakpoint
- block padding per breakpoint, background + opacity, radius, border
How it actually behaves
One answer ships already open, so the list reads as a list of answers rather than a stack of closed doors, and the canvas, the gallery card and a JavaScript-blocked visitor all get readable copy. The height change is a grid track rather than a measured pixel height, so a long answer, a resize and a font swap all behave.
Closed answers leave the accessibility tree rather than being read out invisibly, each panel is a region named by its own question, and the arrow keys walk down the list the way a native disclosure does. Badges are soft, outline or solid; the advice in the panel is to leave most of them empty, because a badge on every row says nothing.
How to add FAQs with Badges to a GoHighLevel page
- 01
Open the element panel
In the page builder, click the + button to add a new element.
- 02
Go to Widget Marketplace
In the left menu, select Widget Marketplace.
- 03
Find Animated Elements
Locate the Animated Elements widget by Funnelslayer in the installed apps list.
- 04
Drag and drop it into the page
Drop the widget where you want it. The Web Widget Settings modal opens on the element gallery: "Select an element to start with".
- 05
Select an element and continue
Choose an element (Animated Counter, Typing Animation, and more), then click Continue. Search by name or by what it does, or use the category rail on the left to narrow the list. You can switch elements later without losing your settings.
- 06
Customize it
Use the element's settings to customize everything to match your brand. The live preview updates as you go, with separate desktop and mobile views.
Common questions
- Does this output FAQ schema for Google?
- The element renders the questions and answers as real text in the page markup, which is what a crawler reads. It does not emit FAQPage structured data itself, so add that at the page level if you want rich results.
- Will a long answer break the animation?
- No. The height change is a grid track rather than a measured pixel height, so a long answer, a browser resize and a font swap all behave without the panel jumping.
- Can I have every question closed at the start?
- Yes. Set which question opens first, or none at all, and choose whether the open one can be closed again.