Custom link or button to display chatbot

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

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 5 years, 11 months ago by Intela-bot Help.

Great in-depth reply which solved the problem!

Many thanks!

You are welcome!

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

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!

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.

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 5 years, 4 months 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 5 years, 4 months ago by brucetm.
• This reply was modified 5 years, 4 months ago by brucetm.

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