Spinning button

🔄 Spinning Button Widget

The Spinning Button widget is an eye-catching, animated element designed to boost interaction. It’s ideal for important call-to-action buttons like “Book Now,” “Start Chat,” or “Get Offer.” Whether you want users to open a form, launch a popup, or start a conversation, this widget draws attention with a smooth spinning effect.

1. Choose a Layout

What you’ll see:

• Layout options like Fixed Corner Button, Inline Button, or Floating Center Button

• A Continue with this template button

What to do:

• Click on any layout to preview it

• Choose the one that fits your design, then click Continue to start customizing

2. Use the Main Tabs

After selecting a layout, you’ll work in three main tabs:

• Content – Add your button text, icon, and set the action

• Style – Customize the design, colors, size, and spin behavior

• Settings – Adjust how and where the button appears

3. Customize Your Button

Content Tab

Add your button’s core details and functionality:

• Button Text – Write a clear message like “Click Here” or “Get Quote”

• Icon Selection – Choose from available icons or upload your own

• Click Action – Decide what happens when the button is clicked:

  • Open a web link

  • Trigger a popup or modal

  • Start a chat tool or messaging service

  • Run custom code or a script

• Tooltip (Optional) – Add a short message that shows on hover

This tab defines what your button says and does.

Style Tab

Control how your button looks:

• Shape & Size – Choose from round, square, or pill-style buttons

• Color Settings – Customize text, background, and border colors

• Spin Animation – Set it to always spin, spin on hover, or pulse subtly

• Font & Icon Size – Adjust sizes to balance visuals

• Hover Effects – Add zoom, shadow, or glow effects when hovered

• Spacing & Positioning – Refine placement for desktop and mobile

This helps your button match the overall design of your site or page.

Settings Tab

Fine-tune how the button behaves:

• Display Mode – Choose between fixed (floating) or inline placement

• Page Visibility – Set where the button appears (all pages or specific sections)

• Mobile Display – Enable or disable visibility on mobile or desktop

• Custom Code (Optional) – Add CSS or JavaScript for extra functionality

Use this tab to make sure the widget behaves the way you need.

💡 Helpful Tips

• Use the Content tab to create a clear and compelling action

• Use the Style tab to make the button stand out visually

• Use the Settings tab to control its location and behavior

• Always click Save when you're done editing to apply your changes