Don't copy any content! Copyright Act [DMCA] Legal Action will be taken - Telegram Group or WhatsApp Now!

How To Add Facebook Chat Plugin In Blogger?

facebook chat plugin for blogger; facebook messenger plugin for website facebook chat plugin wordpress facebook chat box html code facebook customer c

How to Embed Facebook Messenger Chat widget in blogger?

Just follow the simple instructions and you will be done within no time. Let's discuss adding the Facebook chat plugin to blogger.com

Add Facebook Chat Plugin In Blogger
Add Facebook Chat Plugin In Blogger


**Step 1.** Log into your Facebook page and select the setting option as shown in the image.

Embed Facebook Messenger Chat widget in blogger

Embed Facebook Messenger Chat widget in blogger

**Step 2.** After clicking on the setting option, the Facebook Page setting window opens and you can see a lot of options are available but you can select on Messenger Platform in the right sideshow in the image. First of all, you need to whitelist your domain. it’s an important part, without whitelisted you couldn’t use Messenger Chat widget on your website.

To whitelisted your domain you have an SSL certificate. Means its works on HTTPS sites, not in HTTP. In blogger, you can get a free SSL certificate so you don’t worry.

Facebook Chat Plugin In Blogger
Facebook Chat Plugin In Blogger


**Step 3. **To whitelisted your domain select Messenger Platform and you can see all the options related to Messenger. Scroll a little bit and you see the option Whitelisted Domains.

Add your Domain in the input field and click on the Save button. You can add more than one website in the whitelisted domains field.facebook chat widget

**Step 4.** After Whitelisted Domain scroll a little bit more and you can see the Customer Chat Plugin option click on the Set Up button as you see in the image.facebook chat widget**Step 5.** When you click on the setup button a new pop-up window opens. In the first part of this popup window, you can change the Greeting message or you can use the default message after that click on the Next button. In the second part, you can customize the color for the Facebook Messenger Chat widget and click Next.facebook chat widget**Step 6.** In the third part and last part of the popup window, you can see some JavaScript code select and copy all the JavaScript code and click Finish. Paste this code into your computer because we use this code later in our website to Embed the Facebook Messenger Chat widget.facebook chat widgetThe first part of this tutorial is finished, now go to the next part. In this part, we add JavaScript code earlier copy in Facebook in blogger.

Embed Facebook Messenger Code in Blogger, First of all, login into your Blogger Platform.

Embed Facebook Messenger Code in Blogger
Embed Facebook Messenger Code in Blogger


**Step 1.** Navigate to the Layout option in a blogger. After clicking theme Layout window is open according to your blogger theme. In Layout, we add a blogger gadget widget for this click on Add a Gadget option in the sidebar right or in the footer widget according to your theme.facebook chat widget**Step 2.** A new popup window opens when you click on Add a Gadget. Select HTML/JavaScript option.facebook chat widget**Step 3.** After selecting HTML/JavaScript you see a new popup window open. In this window, you can add customized HTML or JavaScript code to increase functionality in your blogger website, but in these cases, we add Facebook Messenger chat widget code. Which we copy earlier when we set up the Customer Chat Plugin on Facebook. Paste that code in the text area and click on save.facebook chat widget**Step 4.** Finally, click on save, and voila you did it. Now in your blogger website, the Facebook Messenger Chat widget will be embedded, visit your website and check how its works!

Here are the attached codes; Just copy and paste to your blogger website or any other website. Then change the Facebook Page ID number and WhatsApp Number. 


<script type="text/javascript">

    (function () {

        var options = {

            facebook: "109530127628507", // Facebook page ID

            whatsapp: "+8801406070407", // WhatsApp number

            call_to_action: "Message Me!", // Call to action

            button_color: "#4caf50", // Color of button

            position: "left", // Position may be 'right' or 'left'

            order: "facebook,whatsapp", // Order of buttons

            pre_filled_message: "Hey There 🤝! How Can I Help You Today?", // WhatsApp pre-filled message

        };

        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;

        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';

        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };

        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);

    })();

</script>

See Demo Here: https://imamuddinwp.blogspot.com/

Bonus: WhatsApp messenger is also added

More Post for you:


Tags:

How to Add Facebook Chat/Messenger to Blogger Website

Facebook Chat Plugin - Messenger Platform 

How do I add the Facebook chat plugin to Blogger?

How do you add a chatbox on Blogger?

How do I integrate Facebook chat into my website?

About the Author

Howdy! It's me! Imam Uddin, imamuddinwp. A passionate SEO Expert, Freelance Digital Marketer, Shopify Expert, and Web Designer. Founder Of NextGen Digital. Find me in google by 'imamuddinwp'.

3 comments

  1. Amazing this is really very helpful and you should promote this site and content but sometimes people feel it risky to take paid seo but taking seo trial is a better and safe option
  2. At Digital Marketing Thanks for this amazing content.
  3. I cannot see any chat box, it is not working
Pls, don't spam or share any sensitive or personal details here. Thank you for being with us.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.