WhatsApp on squarespace sites

Hi.

Does anyone know the easiest way to add a WhatsApp widget to a squarespace site? I have done this with facebook messenger easy enough by copying code from the facebook page, but is it so simple with WhatsApp? I have seen tutorials asking you to sign up for another account on other websites, such as Elfsite and to.chat.be, before installing the widget. Ideally I would like to do it directly from whatsapp and not have to create yet another account.

Thanks  

looking for the same idea...

I did fine this one 

https://elfsight.com/all-in-one-chat-widget/

On 8/22/2021 at 6:04 PM, DarrenJS said:

Hi.

Does anyone know the easiest way to add a WhatsApp widget to a squarespace site? I have done this with facebook messenger easy enough by copying code from the facebook page, but is it so simple with WhatsApp? I have seen tutorials asking you to sign up for another account on other websites, such as Elfsite and to.chat.be, before installing the widget. Ideally I would like to do it directly from whatsapp and not have to create yet another account.

 

Thanks  

You want

1. Add a whatsapp image on bottom right >> Click on it >> show whatsapp popup, same as Facebook Livechat

OR

2. Add a whatsapp image on bottom right >> Click on it >> Browser will open new window to whatsapp?

Hello folks!

If you ever decide to use a Whatsapp Chat widget, we'll be happy to assist you with any questions you might have.

Given that our widget has plenty of options to make your chat window as attractive and powerful as you need, we believe you might find our solution quite useful for you needs 🙂 

We also have more than 80 widgets to help you enhance your website - https://elfsight.com/widgets/.

Feel welcome to contact us in case of any questions!
 

Explore all Elfsight widgets - Widget Catalog
Follow us - Facebook | Instagram
Find helpful guides - Help Center

Regards,
Elfsight Team

Hello, I found this site https://getbutton.io/

It's open source so free. There are pro features. But I'm using free version on my SS site and its looks good. Super easy to use too. Add the supplied code into embed box.

On 8/27/2021 at 10:13 AM, tuanphan said:

You want

1. Add a whatsapp image on bottom right >> Click on it >> show whatsapp popup, same as Facebook Livechat

OR

2. Add a whatsapp image on bottom right >> Click on it >> Browser will open new window to whatsapp?

Hi @tuanphan I come accross this page, and I want to add the 2nd option:

Add a whatsapp image on bottom right >> Click on it >> Browser will open new window to whatsapp? 

Is there any way to use it without any 3rd party widget? 

Thank you!

On 3/27/2022 at 8:13 PM, MRBFin said:

Hi @tuanphan I come accross this page, and I want to add the 2nd option:

Add a whatsapp image on bottom right >> Click on it >> Browser will open new window to whatsapp? 

Is there any way to use it without any 3rd party widget? 

Thank you!

You can add an image block on footer >> add link to whatsapp, then share site url, we will give the code to make image float at bottom right, or right of screen

On 8/26/2021 at 11:13 PM, tuanphan said:

You want

1. Add a whatsapp image on bottom right >> Click on it >> show whatsapp popup, same as Facebook Livechat

OR

2. Add a whatsapp image on bottom right >> Click on it >> Browser will open new window to whatsapp?

@tuanphan I'm interested in option 1. Can you help? What information do you need from me? Hidden site is https://dev-agaves.squarespace.com/ and the PW is Agaves.

Hi @tuanphan, I'm also interested in solution 1 please 🙂

+1

On 7/20/2022 at 9:52 AM, SmallSitesSarah said:

@tuanphan I'm interested in option 1. Can you help? What information do you need from me? Hidden site is https://dev-agaves.squarespace.com/ and the PW is Agaves.

On 12/23/2022 at 1:23 AM, Bewarenana said:

Hi @tuanphan, I'm also interested in solution 1 please 🙂

On 5/22/2023 at 7:55 PM, NoName said:

+1

First, download this whatsapp image > upload to your site

Next, Add to Settings > Advanced > Code Injection > Footer

Replace 0123...89 with your whatsapp number

<a href="https://wa.me/0123456789" target="_blank" class="tp-whatsapp"><img src="/s/w.png"></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

On 5/22/2023 at 8:55 AM, NoName said:

+1

On 12/22/2022 at 1:23 PM, Bewarenana said:

Hi @tuanphan, I'm also interested in solution 1 please 🙂

6 hours ago, tuanphan said:

 

 

First, download this whatsapp image > upload to your site

Next, Add to Settings > Advanced > Code Injection > Footer

Replace 0123...89 with your whatsapp number

<a href="https://wa.me/0123456789" target="_blank" class="tp-whatsapp"><img src="/s/w.png"></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

 

Thanks! Tip for those of us that use the basic subscription and can't inject code: I found this free Get Button widget. You can see an example on my website. Go to your footer and insert an "Embed" block. Then go to "Code Snippet" and paste this code. 

<!-- GetButton.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "YOUR NUMBER WITH HYPHENS", // WhatsApp number
            call_to_action: "Message us", // Call to action
            button_color: "#FF6550", // Color of button
            position: "right", // Position may be 'right' or 'left'
        };
        var proto = 'https:', 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>
<!-- /GetButton.io widget -->

On 5/25/2023 at 9:28 AM, tuanphan said:

 

 

First, download this whatsapp image > upload to your site

Next, Add to Settings > Advanced > Code Injection > Footer

Replace 0123...89 with your whatsapp number

<a href="https://wa.me/0123456789" target="_blank" class="tp-whatsapp"><img src="/s/w.png"></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

 

Hi Tuanphan, after downloading the whatsapp image, what are the steps to upload the image to the site and then insert it into the code here? Thanks!

Hi Tuanphan, another problem I'm having is that after saving the code, and clicking on the widget it opens whatsapp in a new page, so actually seems like what you mentioned is solution number 2, not 1.  Has anyone else tried this? And how did it work out?

On 6/18/2023 at 1:00 AM, Charlottejw said:

Hi Tuanphan, another problem I'm having is that after saving the code, and clicking on the widget it opens whatsapp in a new page, so actually seems like what you mentioned is solution number 2, not 1.  Has anyone else tried this? And how did it work out?

You can change _blank to _self

Hi @tuanphan, I followed your instructions and everything works, except the Whatsapp image doesn't want to show properly. I'm seeing either the white question mark in a blue square (on mobile) or the other icon (on desktop) instead of the image that you provided. I  did upload that Whatsapp image to my Squarespace website though. 

Do you have any advice? 

21 hours ago, DD2023 said:

Hi @tuanphan, I followed your instructions and everything works, except the Whatsapp image doesn't want to show properly. I'm seeing either the white question mark in a blue square (on mobile) or the other icon (on desktop) instead of the image that you provided. I  did upload that Whatsapp image to my Squarespace website though. 

Do you have any advice? 

Use this new code

<a href="https://wa.me/0123456789" target="_blank" class="tp-whatsapp"><img src="https://pluspng.com/img-png/whatsapp-hd-png-whatsapp-logo-png-1000.png" /></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

Hey @tuanphan or anyone else who knows,

Piggy backing this post a little.

I have applied the floating Whatsapp button, but I would like to remove it when the mobile menu is open. How would I do that?

Currently I have this code in the footer code injection:

<a href="https://wa.me/447440651080" target="_blank" class="tp-whatsapp"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-1024.png" /></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

And this is the site incase you need it: https://heardstudio.co.uk/

Thanks!

On 9/29/2023 at 12:19 AM, DillonBradley said:

Hey @tuanphan or anyone else who knows,

Piggy backing this post a little.

I have applied the floating Whatsapp button, but I would like to remove it when the mobile menu is open. How would I do that?

Currently I have this code in the footer code injection:

<a href="https://wa.me/447440651080" target="_blank" class="tp-whatsapp"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-1024.png" /></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
</style>

And this is the site incase you need it: https://heardstudio.co.uk/

Thanks!

Use this new code

<a href="https://wa.me/447440651080" target="_blank" class="tp-whatsapp"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-whatsapp-circle-1024.png" /></a>
<style>
  a.tp-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
}
  a.tp-whatsapp img {
    max-width: 50px;
}
  body.header--menu-open .tp-whatsapp {
  	display: none !important;
    visibility: hidden;
    opacity: 0;
  }
</style>

Thank you @tuanphan! You're a legend on this forum

Hi @tuanphan , I would like to create an image in my site, and replace it with a custom whatsapp image with text etc and make it clickable. How do I make it so when customer clicks this button, it will pop out a new tab to whatsapp, quite similar to version 1 that you suggest, just that it is for a specific image, therefore would require a link for the image.  Thank you for your guidance!

23 hours ago, Dilon said:

Hi @tuanphan , I would like to create an image in my site, and replace it with a custom whatsapp image with text etc and make it clickable. How do I make it so when customer clicks this button, it will pop out a new tab to whatsapp, quite similar to version 1 that you suggest, just that it is for a specific image, therefore would require a link for the image.  Thank you for your guidance!

You can upload your own image and replace the <img> scr link in the code with yours.

https://insidethesquare.co/resources/upload-image