The Vibe Section: Build Custom Sections with AI

The Vibe section lets you build a fully custom board section just by describing it. Tell the AI what you want, such as an interactive pricing calculator, a timeline of your company story or a tabbed FAQ, and it builds the section and places it on your board.

Every section you build with the Vibe section is:

• On-brand automatically. It uses your board theme's colors, fonts and button styles, so it matches the rest of your board.

• Responsive. It is designed to look right on desktop, tablet and mobile.

• Interactive. It can include tabs, toggles, sliders, accordions, animations and other elements that go beyond the standard section library.

• Tracked. Button clicks and other interactions in the section are recorded in Folloze analytics.

• Editable. You can keep refining it by chatting with the AI, or fine-tune the code yourself.

You can also start from HTML you already have: paste code from another source into the Vibe section, then edit it by describing the changes you want.

The Vibe section is a Premium feature. If you don't have access to it, contact your account administrator or your Folloze Customer Success Manager.

Add the Vibe section to your board

1. In the board editor, click the add-section line where you want the new section to go.

2. In the Custom category, select Vibe section and click Add Section.

 

3. In the AI Generator panel, describe the section you want and send it.

4. The AI builds the section and places it on your board. Your changes are saved automatically.

The Vibe section is set to full width so it can use the whole page. You can change this with the Full grid toggle in the HTML Section panel.

To see the section exactly as visitors will, including its interactions, use Preview.

Edit and refine your section

You can keep improving the Vibe section by chatting with the AI, editing the code, or both.

Refine with AI

1. Click the section on your board to open the section editor.

2. In the AI Generator panel, describe what you'd like to update, remove or add. For example: "Make the headline shorter and add a third pricing tier."

3. The AI applies your request to the current section and keeps everything else as it was.

The AI always works on the latest version of your section, so you can keep refining it as many times as you like. If you close the editor or preview the board, the chat conversation clears, but your section stays exactly as you left it. Just reopen the editor and keep describing changes.

Edit the code

Open the HTML Section panel to view and edit the section's code directly. Use this for small, precise tweaks such as fixing a typo or swapping a link.

You're responsible for any code you add or change manually. Folloze Support can't troubleshoot custom code that has been edited by hand.

Start from existing HTML

Already have a section built elsewhere? Paste its HTML into the HTML Section panel, then use the AI Generator to edit it in plain language. For example: "Match this to our brand colors and add a 'Contact sales' button."

Tips for great results

• Say what the section is for. Include the goal, the audience and the content. "A section for CFOs comparing our three plans, with a monthly/annual toggle" works better than "a pricing section".

• Include your real copy and links. The AI only links to URLs you give it, so paste the exact links you want buttons to go to.

• Provide image URLs. The AI won't invent or pull images from the web. To include images, paste their URLs in your message.

• Describe interactions. Ask for tabs, accordions, sliders, hover effects, counters or animations by name.

• Make one change at a time. Small, specific follow-ups like "move the CTA button under the headline" give more predictable results than many changes at once.

• Let the theme do the styling. The section picks up your board's colors and fonts automatically, so to change the overall look, update the board theme.

Example prompts

• "About us section that tells the story of our company's founding, with a horizontal timeline of 5 milestones from 2015 to today."

• "ROI calculator: visitors enter team size and hours saved per week, and it shows annual savings. Add a 'Book a demo' button linking to https://example.com/demo."

• "FAQ section with 6 questions about onboarding, as an accordion where one answer is open at a time."

FAQ

What does the AI track in analytics? Clicks on primary buttons are recorded as CTA clicks, including the button label and link. Other interactions, such as switching tabs or moving a slider, are recorded as custom events. Both appear in your board analytics.

Can I add a Folloze form or board content items to the Vibe section? Not at this time. To capture leads, place the Vibe section next to a standard form or CTA section.

Can I upload files or images to the AI chat? No. Paste image URLs and links into your message as text.

I see "There was an error processing your request. Please try again later." What should I do? Wait a moment and send your message again. If it keeps happening, check that you have access to AI features. If the problem continues, contact Folloze Support.

I see "I couldn't build that section." What should I do? Rephrase your request with more detail about the content and layout you want, then send it again.

Can I undo an AI change? Yes. Use Undo in the board editor to go back to the previous version of the section. There's no saved version history, so to keep a version for later, copy its code from the HTML Section panel.

What's the difference between the Vibe section and the Embedded section? Both let you add custom HTML to a board. The Embedded section is for code you already have. The Vibe section adds the AI Generator, so you can build and edit the section by describing it.