Popup Button Examples - Annual Permit LLC

Popup Button Examples

Click any button below to see the callback popup in action

Primary Button
Outline Button
Text Link Button
Icon Button
Inline Text Link

Have questions about UCR registration?

Floating Button (Right Corner)

See the orange button in the bottom-right corner? That's the floating button style.

How to Use These Buttons

1. Floating Button (Recommended)

Perfect for: Always accessible, doesn't block content

<button class="btn-floating" onclick="openPopup()"> 📞 Request Callback </button>

2. In Your Hero Section

Perfect for: Landing pages, above the fold

<button class="btn-primary" onclick="openPopup()"> Get Free Consultation </button>

3. Within Content

Perfect for: Blog posts, service descriptions

Need help with DOT compliance? <button class="btn-text-link" onclick="openPopup()"> Request a callback </button>
💡 Pro Tip
You can place multiple trigger buttons on the same page. They'll all open the same popup. This is great for long pages where users might be at different scroll positions.

Best Practices for Button Placement

✓ DO:

  • Use floating button for persistent access
  • Add button after key service descriptions
  • Include in pricing sections
  • Place near deadline/urgency messages
  • Use contrasting colors that stand out

✗ DON'T:

  • Place button over important content
  • Use tiny hard-to-click buttons on mobile
  • Hide button in footer only
  • Use vague text like "Click Here"
  • Make button blend into background

Recommended Placements by Page Type

Homepage

• Hero section (primary button)
• After "How It Works" section
• Floating button (bottom right)

Service Pages (UCR, Permits, etc.)

• After pricing table
• Next to deadline warnings
• In "Get Started" section
• Floating button

Blog Posts

• Within content as text links
• At end of article
• Floating button (less aggressive)

Contact Page

• Alternative to form (for people who prefer calls)
• As primary CTA
• Next to phone number