Skip to content

iammunendrasingh/free-whatsapp-chat-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Banner

Free WhatsApp Chat Widget for Website

GitHub release (latest by date including pre-releases) GitHub last commit GitHub issues GitHub pull requests GitHub

The Free WhatsApp Chat Widget Generator allows website owners to create and customize a WhatsApp chat button and widget for their website in just three easy steps. The tool is available at iframeweb.com or you can visualize chat widget on your website just by providing your website URL..

How It Works

This tool helps you generate a WhatsApp chat widget by providing options for customization, allowing you to enhance visitor interaction on your website. The widget is highly customizable to fit your brand and website needs.

Steps to Generate the Widget Code:

  1. Customize WhatsApp Chat Button: Personalize the WhatsApp button's appearance and position.
  2. Customize WhatsApp Chat Widget: Add details like your brand name, image, status message, and more.
  3. Generate Code: Copy the generated embed code and insert it into the <head> section of your website.

Once the widget is integrated, visitors can directly start chatting with you via WhatsApp.

Features

  • Custom Branding: Add your business or brand name and logo.
  • Direct Chat Integration: Open WhatsApp chat with a predefined message when users click the widget.
  • Custom Status: Set a custom status below the chat button (e.g., “Available” or “Away”).
  • Dynamic Page URL: Automatically pass the current page URL into the chat message.
  • Widget Colors: Customize background and text colors to match your website’s theme.
  • Responsive Design: The widget is optimized for both desktop and mobile views.

How to Use

  1. Go to the Free WhatsApp Chat Widget Generator.
  2. Follow the three simple steps to customize the widget.
  3. After generating the code, copy and paste it into the <head> section of your website’s HTML.

Example Embed Code

Here’s an example of the code generated by the tool (it uses iFrameWeb's brand values by default so make sure to replace with yours while filling the form:

<script>
var url = 'https://cdn.jsdelivr.net/gh/iammunendrasingh/free-whatsapp-chat-widget@main/main.js';
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var options = {
    "enabled": true,
    "chatButtonSetting": {
        "backgroundColor": "#4DC247",
        "ctaText": "WhatsApp Us",
        "borderRadius": "25",
        "marginLeft": "",
        "marginBottom": "30",
        "marginRight": "30",
        "position": "right"
    },
    "brandSetting": {
        "brandName": "iFrameWeb Solutions",
        "brandSubTitle": "Typically replies within 24 hrs",
        "brandImg": "https://iframeweb.com/wp-content/uploads/2023/10/iframeweb-logo.jpg",
        "welcomeText": "Hi there!\nHow can we help you?",
        "messageText": "Hello, I have a question about {{page_link}}",
        "backgroundColor": "#404145",
        "ctaText": "Start Chat",
        "borderRadius": "25",
        "autoShow": false,
        "phoneNumber": "918851730877"
    }
};
    s.onload = function() {
        CreateWhatsappChatWidget(options);
    };
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
</script>

Live Demo to Visualize WhatsApp Widget on Your Website

Visit https://iammunendrasingh.github.io/free-whatsapp-chat-widget/visualize to Visualize WhatsApp Widget on Your Website by just providing your website URL.

If you like the chat widget, generate it for your website here: Free WhatsApp Chat Widget Generator and try out the tool and see how it works actually on your website.

Support

For any questions, issues, or support, feel free to reach out to us:

We’re here to help!

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0). You can view the full license in the LICENSE file.