LogoLogo
  • 🏠Getting Started
    • Important
    • Ideas, Roadmap, & Announcements
    • ChatHQ Affiliate Program
    • White Label Resources
  • 👋Learning The Portal
    • Overview
    • Profile Settings
    • Your Account
    • Engagement
    • Knowledge Bases
    • Conversations
    • Account Settings
    • Billing Management
  • 🚀Engagement Widgets™
    • Overview
    • Installing Widgets
    • Widget Settings
      • Main Settings
      • Widget Window
      • Office Hours
      • Widget Branding
    • Conversion Tools™
      • Add, Reorder, and Delete Tools
      • Single vs Multi-Tool Display
      • Title & Panel Title
      • Tool Visibility
      • Tool Icons
      • Tool Library
        • Advanced Livechat
        • Booking Calenders
        • Custom HTML
        • Dedicated iFrame
        • Extendly for HighLevel
        • Facebook Messenger
        • Forms/Surveys
        • Knowledge Library
        • Link Launcher
        • Reviews
        • Rich Content
        • Tawk.To Livechat
        • Video Showcase
        • Webchat
    • Smart Popups™
      • Creating Smart Popups™
    • Widget Analytics
  • 📖Knowledge Base Builder™
    • Overview
    • Building Knowledge Bases
    • Admin Settings
    • Knowledge Base AI
    • Finished Knowledge Base
  • 💬Advanced Livechat™
    • Overview
  • 🔄Integrations
    • Overview
    • HighLevel
    • Extendly
    • Capri AI
    • Tawk.To
  • 💪API & Developer Docs
    • Overview
    • JavaScript API
    • Custom Tracking & Analytics
      • Widget Events in Google Analytics
        • 1. Google Analytics & Google Tag Manager
        • 2. GA4 Custom Events & Definitions
        • 3. Tags & Triggers in Google Tag Manager
        • 4. Using the Data Layer to Define Custom Variables
        • 5. Creating Custom GTM Variables
        • 6. Testing Widget Analytics
      • Tracking Events from Facebook Ads
    • CSS and JavaScript
      • Floating Action Button (FAB)
  • 🆘Customer Support
    • Support Options
Powered by GitBook
On this page
  • Disable FAB Animation
  • Set Number of FAB "Pulses"

Was this helpful?

  1. API & Developer Docs
  2. CSS and JavaScript

Floating Action Button (FAB)

Change the behavior of the "pulse" animation on the Engagement Widget trigger button

When adding the widget inside HighLevel, copy the CSS code only (everything except the <style> and </style> tags) and paste it inside your agency's Custom CSS section instead of the Custom Javascript section.

Disable FAB Animation

Add the following style tag right after the widget installation script to completely disable the "pulse" animation on the Engagement Widget's trigger button:

<style>
#engagement-widget-fab-wrapper::before {
    animation: unset;
}
</style>

Set Number of FAB "Pulses"

Add the following style tag right after the widget installation script to keep the animation but limit it to only a number of "pulses" (replace the number 3 below with your desired number of "pulses"):

<style>
#engagement-widget-fab-wrapper::before {
    animation-iteration-count: 3;
}
</style>
PreviousCSS and JavaScriptNextSupport Options

Last updated 1 year ago

Was this helpful?

💪