WhatsApp Widget

Live Preview

Primary Color

Secondary Color

Accent Color

Font Family

Font Size

Position

Auto Open Widget

Show Branding

Enable Analytics

Enable Lead Capture

Enable Business Hours

Enable Quick Messages

Offline Message

Quick Installation Guide

Include CSS & JS

Add the widget files to your HTML document:

              <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/kk-whatsapp-widget/dist/style.css">
              <script
              src="https://cdn.jsdelivr.net/npm/kk-whatsapp-widget@latest/dist/index.umd.js"></script>
            

Add Container Element

Create a div where the widget will be rendered:

Initialize Widget

Use the generated code from above to initialize your widget:

              window.whatsappWidget("#whatsapp-widget", { // Your configuration
              here });
            

Choose Your Widget Style

Basic Widget

Business Widget

Advanced Widget

Live Preview

Generated Code

Quick Installation Guide

Include CSS & JS

Add Container Element

Initialize Widget