Support » Plugin: IBM Watson Assistant » Custom link or button to display chatbot

  • Resolved nicoter

    (@nicoter)


    Hi,

    How can I create a link or button which opens the chat bot window?

    I tried to copy the HTML code of the current button and paste it into a page (and adjust CSS), but it didn’t react to a click. I assume it’s some kind of JS listener, but I’m not good with JS.

    Is there an easy way like adding some IDs to the html tag?

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support intelahelp

    (@intelahelp)

    Hello @nicoter. Thanks for reaching out to us.
    You can show and hide the chatbox by manipulating the chatbox button. It has id attribute set to “watson-fab”. To have custom button to show and hide chatbox, you may follow these steps:

    1. Make the button invisible with CSS
    2. Make your own button and place it anywhere on your page
    3. Attach an action to your button to simulate the click on chatbox button
    4. 1. Make the button invisible with CSS
      CSS code:

      
      #watson-fab {
          display: none;
      }
      

      2. Make your own button and place it anywhere on your page
      HTML code:

      
      <button id="custom-chatbox-button">Chatbox</button>
      

      3. Attach an action to your button to simulate the click on chatbox button
      Javascript code:

      
      // Variable for storing the reference to custom button
      var customButton = document.getElementById("custom-chatbox-button");
      // Attaching the function to click event
      customButton.onclick = function() {
          // Variable for storing the plugin button
          var pluginButton = document.getElementById("watson-fab");
          // Simulating the click on plugin button
          pluginButton.click();
      }
      

      If you want to dive a little deeper into chatbox’s inner workings, we recommend you to familiarize yourself with React. While it may sound complicated, initial React tutorial is pretty straightforward and there are lots of resources on the Web to help you.

      If you have any more questions, don’t hesitate to ask them.

    • This reply was modified 7 months, 2 weeks ago by intelahelp.

    Great in-depth reply which solved the problem!

    Many thanks!

    Plugin Support intelahelp

    (@intelahelp)

    You are welcome!

    Devs: please add a custom Chat Button option to the plugin, just like the Chatbot custom logo option.

    Plugin Support intelahelp

    (@intelahelp)

    Hello @brucetm.

    This feature is included in the plan and will appear in one of the next updates. But if you need to change the look of the button right now, please use the instructions above.
    Or If you have knowledge of JavaScript, CSS, PHP and want to participate in this implementation, you can offer a merge request at: https://github.com/Intela-solutions/watson-assistant-wordpress.

    If you have more questions, don’t hesitate to ask them.

    Hi @intelahelp thank you for the info. Looking forward to that addition.

    I wrote because the above suggestion doesn’t replace the button graphic, it removes it and places it on a page in a static location, instead. I would prefer to replace the button graphic the plugin uses with another image, keeping the “hover over every page” behavior.

    In the short term, can you point me to where this graphic is loaded, perhaps I can override it? Thanks!

    Plugin Support intelahelp

    (@intelahelp)

    Hello @brucetm.

    To change the button image, you need to add styles for #watson-fab-icon.
    CSS code (for example):

       #watson-fab-icon::before {
          content: "";
          background-image: url ('image url');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: block;
          width: "image width";
          height: "image height";
       }

    This is great progress, thank you @intelahelp!

    Next, I assumed wrongly that the black circle was part of the original button image. How do I hide this element? I want to use my own PNG with transparency as the button with custom shape.

    Thanks again for your patience and fast advice, much appreciated.

    Plugin Support intelahelp

    (@intelahelp)

    Hello @brucetm.

    We tried a huge amount of PNG with transparency and could not reproduce the problem.
    Please make sure your image does not contain a black circle. And if the image does not contain it, to solve this problem, we need additional information:

    • The image you are using
    • Screenshot of the button with the problem
    • Full CSS code that you added
    • Link to your site with an existing problem

    Uh oh, sounds like I am making you waste resources, sorry about that.

    Replacement image does not contain a black circle, for sure.

    When I use the code you provided to hide your button graphic, the white chat-balloon graphic disappears, but the black circle remains.

    I assumed that this black was part of your plugin styling, because I can change its shape by adjusting #watson-fab border-spacing.

    I hope it does not turn out to be a mistake somewhere else on my site instead. What I will do next is try the plugin and your customization suggestions in an empty default theme with no plugins, and will report back here.

    Thanks again for your help and advice!

    • This reply was modified 1 month, 1 week ago by brucetm.

    Hi again @intelahelp:

    It was indeed part of the plugin styling, I finally got rid of it with:

    #watson-fab.drop-shadow {
        background: transparent;
        box-shadow: none;
    }

    And then I added a shadow to the outline of my image PNG with transparency with:

    #watson-fab-icon::after {
          content: "";
          background-image: url('https://staging-playhacker.kinsta.cloud/wp-content/uploads/2019/10/Bot-icon-01-60-transp-wht-outline-no-circle-shifted-up-less.png');
          background-size: 100% 100%; 
          display: block;
          width: 70px;
          height: 70px;
         -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
         filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
    }

    I haven’t yet figured out a hover animation though.

    • This reply was modified 1 month, 1 week ago by brucetm.
    • This reply was modified 1 month, 1 week ago by brucetm.
    Plugin Support intelahelp

    (@intelahelp)

    @brucetm, thank you for letting us know.
    If you have more questions, don’t hesitate to ask them.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.