Adding a chat widget to the website

Adding a chat widget to the website

Important Note

Heads up! A floating chat / WhatsApp / messenger widget will overlap with existing buttons and links on the page, especially in mobile view. Please test the placement of the widget on various pages (especially on mobile) before making it live on your website.


Guide to Adding a Script for Enabling Messenger Widgets on Your Website

To add a floating chat/WhatsApp/messenger widget, please paste the script by navigating to Website > Advanced Settings > Header/Footer. Here, you can paste the script obtained from any messenger platform.



Adding a WhatsApp widget to the website

If you want to add a WhatsApp widget to your website, simply paste the code below by following the steps above. Before pasting the code, update your WhatsApp number, which customers can use to reach out to you, within the script. Then, save the changes.
  1. <script  type="text/javascript">
      var config = {
        phone :"UPDATE YOUR NUMBER HERE",
        call :"Message Us",
        position :"ww-right",
        size : "ww-normal",
        text : "",
        type: "ww-standard",
        brand: "",
        subtitle: "",
        welcome: ""
      };
      var proto = document.location.protocol, host = "cloudfront.net", url = proto + "//d3kzab8jj16n2f." + host;
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = url + "/v2/main.js";
        s.onload = function () { tmWidgetInit(config) };
        var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x);
    </script>
  2. <style>
      /* CSS for mobile view */
    @media only screen and (max-width: 767px) {
      #whatsapp-widget .ww-icon-link {
        margin-bottom: 250%;
      }
    }
    </style>



    • Related Articles

    • Adding a GDPR Cookie widget snippet

      In order to adhere to the EU guidelines for customer data and privacy you will need to install a GDPR Widget Vacation Labs allows you to do in few quick steps: Quick Overview Get GDPR widget snippet easily from third party sites Navigate to the ...
    • Adding Social Media Links to the website

      Social media can help you build a strong relationship with your business partners and your trusted customers. Furthermore, if you are running corporate social profiles, then the best way to get more traffic is through social media links. Also, a ...
    • Adding a contact form on your website

      Overview Contact form vs Inquiry form Adding Custom SMTP details to your VL Back Office Enabling Contact Form on the desired page Configuring captcha for the contact us form Verifying the contact form submission Contact form vs Inquiry form There are ...
    • Adding Support Contact Numbers to the website

      You can change the phone number from your Vacation Labs account. Please follow the steps mentioned below Login to your Vacation Labs account Go to Website -> General Settings Scroll down till you find Support Phone section Edit the Phone number and ...
    • Adding/Modifying pages on the website

      Your Vacation Labs website builder subscription gives you a minimum 45-page website. Apart from standard pages, here's how you can add more pages to add content and volume to your website. While logged in to your Vacation Labs account, please click ...