Content & Behavior
Set the text, language, and contact info.
Sizing & Placement
Control the widget's dimensions and position.

Advanced Placement

Color Palette
Customize the widget's color scheme.
Borders, Rounding & Effects
Adjust roundness, animations, and shadows.
Typography
Adjust font sizes and colors.
Get Your Code
Copy the component code with your customizations.

Install Dependencies

npm install framer-motion lucide-react

Usage

<LeadConversionWidget
  key={0}
  initialDelay={1000}
  position='bottom-right'
  isRTL={false}
  zIndex={50}
  channel='whatsapp'
  contact='79627998846'
  buttonLink=''
  companyImage='/path-to-the-image/AvatarImage.webp'
  isOnline={true}
  widgetHeight='480px'
  headerHeight={70}
  footerHeight={70}
  buttonHeight={48}
  individualPaddings={false}
  headerPaddingTop={12}
  headerPaddingRight={12}
  headerPaddingBottom={12}
  headerPaddingLeft={12}
  bodyPaddingTop={12}
  bodyPaddingRight={12}
  bodyPaddingBottom={12}
  bodyPaddingLeft={12}
  footerPaddingTop={0}
  footerPaddingRight={12}
  footerPaddingBottom={0}
  footerPaddingLeft={12}
  chatBubblePadding={12}
  headerBackgroundColor='#075e54'
  bodyBackgroundColor='#e6ddd4'
  footerBackgroundColor='#f0f2f5'
  ctaButtonColor='#25d366'
  ctaButtonTextColor='#ffffff'
  ctaButtonHoverColor='#1da851'
  ctaButtonHoverTextColor='#ffffff'
  ctaIconStrokeWidth={2}
  chatBubbleColor='#ffffff'
  chatBubbleTextColor='#141414'
  headerTextColor='#ffffff'
  iconColor='#ffffff'
  triggerButtonColor='#25d366'
  onlineDotColor='#25d366'
  headerFont={16}
  headerFontWeight={600}
  bodyFont={14}
  bodyFontWeight={400}
  ctaFont={16}
  ctaFontWeight={700}
  statusTextYOffset={0}
  statusTextXOffset={0}
  statusDotYOffset={0}
  statusDotXOffset={0}
  widgetBorderRadius={12}
  ctaButtonBorderRadius={12}
  triggerButtonBorderRadius={9999}
  waveBorderRadius={9999}
  imageBorderRadius={9999}
  widgetBorderWidth={0}
  widgetBorderColor='#cccccc'
  imageBorderWidth={0}
  imageBorderColor='#ffffff'
  showWaveAnimation={true}
  waveAnimationDuration={1.5}
  waveMagnitude={1}
  widgetShadow='0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)'
  closeOnOutsideClick={false}
  bottomOffset={24}
  sideOffset={24}
  hyperlinkColor='#141414'
  closeIconXOffset={0}
  closeIconYOffset={0}
  showTypingAnimation={true}
  typingAnimationDuration={2000}
  typingAnimationColor='#8e8e93'
  triggerIcon={`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>`}
/>
Credit
The existence of this project (at least in its current form) wouldn't have been possible without the following: