How to Add a WhatsApp Icon Conditionally on Product Pages or All Pages

arunchahar

Hello Bagisto Team,
I hope you all are doing well!
I need help adding a WhatsApp icon to my Bagisto store with these requirements:

Display the icon only on product details pages.
Optionally, display the icon on all pages when needed.

I tried adding the script using the Custom JS option in the admin panel, but it did not work as expected. How can I properly identify product detail pages and conditionally include the script? Any guidance or code examples would be greatly appreciated!

My code:

 <script> 
    var url = 'https://scrm-data-us-oss.oss-us-west-1.aliyuncs.com/sender/whatsapp_replace_crisp/user_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":"Message Us",
      "borderRadius":"25",
      "marginLeft":"0",
      "marginBottom":"50",
      "marginRight":"50",
      "position":"right"
  },
  "brandSetting":{
      "brandName":"Honey King",
      "brandSubTitle":"Replies within 1 min",
      "brandImg":"https://www.website.com/storage/channel/1/2KzMyW6BZs0BCzbWp4aMg1PAALW5E3bfBDcsnbql.jpg",
      "welcomeText":"Hi,there!\nHow can I help you?",
      "messageText":"Hello, I have a question about {{page_link}}",
      "backgroundColor":"#DC4E1E",
      "ctaText":"Start Chat",
      "borderRadius":"25",
      "autoShow":false,
      "phoneNumber":"919013780284"
  }
};
    s.onload = function() {
        CreateWhatsappChatWidget(options);
    };
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
 </script>

Thank you!

Rishabh-Webkul

Hello @arunchahar

If you want to make changes and add a WhatsApp icon to my Bagisto Product detail page.

Product Detail Page File Path - packages >> Webkul >> Shop >> src >> Resources >> views >> products >> view.blade.php

Thanks & Regards

arunchahar

@Rishabh-Webkul and how do i add in case i want to show on all frontend shop pages?