Merry Christmas all,

Christmas is on its way. Is your website ready? Are you preparing any special holiday offers and discounts for the visitors of your website or online store? Do you want to show personalized holiday greetings on your widget? If yes, then we also have something for you to help you greet your visitors and promote all those sales and special offers.

You can change your live chat widget appearance with your customized image and make them look more attractive on your website.

You might have seen the Christmas Live Chat Widget on the SalesIQ website ; I would like to share how we did this with SalesIQ JS APIs.

Steps to change the Live Chat Widget on the website:

• Go to your website source code, where you have placed the SalesIQ live chat widget code.
  
• Copy and place the given code below the SalesIQ code:
  

  
  

  1. <div id="salesiqchat" style="position:fixed;bottom:20px;right:20px;"></div>
     
  2.    <script>  
     
  3.    $zoho.salesiq.ready=function(embedinfo)
     
  4.       {
     
  5.           $zoho.salesiq.floatbutton.visible("hide");
     
  6.           $zoho.salesiq.floatwindow.minimize(function()
     
  7.           {
     
  8.             $zoho.salesiq.floatbutton.visible("hide");
     
  9.            });
     
  10.            $zoho.salesiq.floatwindow.close(function()
      
  11.            {
      
  12.                $zoho.salesiq.floatbutton.visible("hide");
      
  13.             });
      
  14.             $zoho.salesiq.custom.html("salesiqchat",{"online.html":"<img src =' https://zoho.com/salesiq/images/we-are-online.png' style='height:150px;width:150px'>", "offline.html":"<img src =' https://zoho.com/salesiq/images/we-are-offline.png' style='height:150px;width:150px'>"});
      
  15.       }
      
  16.    </script>
      
  
  

  
  

• Then, Save changes. The exclusive Christmas live chat widget will appear on your website.
  

• You can adjust the position of the live chat widget placed on your website using the:
  

  
  

  1. <div id="salesiqchat" style="position:fixed;bottom:20;right:20;"></div>
     
  
  

How to replace the image in the Live Chat widget?

To replace your customized image in the live chat widget, you can remove the existing image URL in the <img src> tag and place your image URL in the code. (Note: The image URL is marked in red for your reference)

1. $zoho.salesiq.custom.html("salesiqchat",{"online.html":"<img src =' https://zylker.com/images/christmas-sale-online.png ' style='height:150px;width:150px'>", "offline.html":"<img src =' https://zylker.com/images/christmas-sale-offline.png ' style='height:150px;width:150px'>"});
   

The existing image will be replaced with your customized image.